vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

swarm-ui: persist table filters, add reset button, multi-select, negate

Browse source 
Per mara's issue: tables should remember their filters (with a reset
button), the labels filter should be multi-select, and any filter should
support negation (search vs exclude).

All in the shared Table component (ui/table/Table.tsx), used by
AgentsPage/HivesPage/IssueReportPage:

- filters now persist via the same useLocalSetting hook IssueReportPage
  already used for its own state, keyed by a new required storageKey
  prop (required, not optional, so no caller can forget it and every
  table gets persistence for free)
- a small 'reset filters' button clears every column's filter at once,
  shown only when at least one is active
- new filterMode: "multiselect" (+ a filterValues extractor, alongside
  the existing single-value filterValue) renders a checkbox list and
  matches on any overlap - IssueReportPage's own bespoke label-checkbox
  sidebar is folded into this instead of staying a second, separate
  filter mechanism
- a negate toggle ('exclude') sits under every filter mode's control,
  applying uniformly to text/select/multiselect

Verified: tsc --noEmit and the esbuild bundle both clean.
This commit is contained in:
iris 2026-09-09 19:03:03 +02:00 • committed by mara
commit 915c6c6f92
7 changed files with 386 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/packages/swarm-ui/src/pages/AgentsPage.tsx
View file

@ -482,6 +482,7 @@ export function AgentsPage() {
rows={rows}
rowKey={(a) => a.name}
emptyMessage="no agents yet — the swarm-wide identity store has no agents registered on any hive"
storageKey="swarm-ui:agents:table-filters"
/>
) : null}
<Dialog

8
frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
View file

@ -223,10 +223,16 @@ export function ComponentsPage() {
columns={TABLE_COLUMNS}
rows={TABLE_ROWS}
rowKey={(r) => r.name}
storageKey="swarm-ui:components-demo:table-filters"
/>
</Sample>
<Sample label="empty">
<Table columns={TABLE_COLUMNS} rows={[]} rowKey={(r) => r.name} />
<Table
columns={TABLE_COLUMNS}
rows={[]}
rowKey={(r) => r.name}
storageKey="swarm-ui:components-demo:table-filters-empty"
/>
</Sample>
</Section>

7
frontend/packages/swarm-ui/src/pages/HivesPage.tsx
View file

@ -144,7 +144,12 @@ export function HivesPage() {
) : null}
{!error && hives === null ? <p>loading…</p> : null}
{hives ? (
<Table columns={COLUMNS} rows={hives} rowKey={(h) => h.name} />
<Table
columns={COLUMNS}
rows={hives}
rowKey={(h) => h.name}
storageKey="swarm-ui:hives:table-filters"
/>
) : null}
</Panel>
);

27
frontend/packages/swarm-ui/src/pages/IssueReportPage.css
View file

@ -1,11 +1,13 @@
/* <IssueReportPage> — the repo-picker + hide-blocked toggle sit in one
row (mirrors CreateAgentForm's row/wrap pattern: flex-wrap so narrow
viewports stack instead of overflowing), the label chips get their
own row below since the set is open-ended and shouldn't fight the
controls row for width. Sort buttons live inside the table's own
`<th>` cells (Table.tsx's `header` now accepts real markup for
exactly this) so they inherit the table's header styling for free —
only the pointer cursor + no-underline reset is this page's to own. */
viewports stack instead of overflowing). The label filter used to
have its own chip row here; folded into the "labels" column's own
`Table` filter (`ui-table-filter-multiselect` in Table.css) instead,
so there's nothing page-specific left to style for it. Sort buttons
live inside the table's own `<th>` cells (Table.tsx's `header` now
accepts real markup for exactly this) so they inherit the table's
header styling for free — only the pointer cursor + no-underline
reset is this page's to own. */
.issue-report-controls {
display: flex;
flex-wrap: wrap;
@ -19,19 +21,6 @@
gap: 0.4em;
cursor: pointer;
}
.issue-report-labels {
display: flex;
flex-wrap: wrap;
gap: 0.6em;
margin-bottom: 1em;
}
.issue-report-label-chip {
display: flex;
align-items: center;
gap: 0.35em;
cursor: pointer;
color: var(--muted);
}
.issue-report-sort-btn {
background: none;
border: none;

64
frontend/packages/swarm-ui/src/pages/IssueReportPage.tsx
View file

@ -9,8 +9,8 @@
// `transitively_blocks_count` all arrive pre-resolved per row, so
// nothing here does its own dependency-graph walk.
//
// Sorting and the label/hide-blocked filters are client-side over
// whatever's currently loaded — only the repo selection re-fetches.
// Sorting and the hide-blocked/label/etc. filters are all client-side
// over whatever's currently loaded — only the repo selection re-fetches.
// Default sort is `depended_on_by_count` descending: mara's own framing
// ("i would also like to rank them by how many issues depend on them")
// reads as the report's headline ordering, not just one more column.
@ -21,11 +21,12 @@
// be instant), so it fetches once per repo-selection change instead of
// polling.
//
// Sort/filter state persists via the shared `useLocalSetting` hook (same
// Sort state persists via the shared `useLocalSetting` hook (same
// plumbing the theme/motion overrides use) — mara: "local storage" over
// URL params. `labelFilter` is `string[]`, not `Set<string>`: a `Set`
// serializes to `"{}"` through `JSON.stringify` and silently loses its
// contents, which is exactly what this hook round-trips through.
// URL params. The label filter used to be this page's own bespoke
// checkbox row — folded into the "labels" column's own `Table` filter
// (`filterMode: "multiselect"`) per mara's "fold filters into table"
// request, one mechanism instead of two.
import { useEffect, useMemo, useState } from "preact/hooks";
import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
@ -71,9 +72,12 @@ const ALL_REPOS = "";
// page — collides with these by accident.
const REPO_FILTER_KEY = "swarm-ui:issue-report:repo-filter";
const HIDE_BLOCKED_KEY = "swarm-ui:issue-report:hide-blocked";
const LABEL_FILTER_KEY = "swarm-ui:issue-report:label-filter";
const SORT_KEY_KEY = "swarm-ui:issue-report:sort-key";
const SORT_DIR_KEY = "swarm-ui:issue-report:sort-dir";
// `Table`'s own filter state (repo/labels/etc. are handled separately
// above/below — this key is just for the generic per-column filters,
// e.g. title/assignees/blocked).
const TABLE_FILTERS_KEY = "swarm-ui:issue-report:table-filters";
function splitRepo(repo: string): { org: string; name: string } | null {
const i = repo.indexOf("/");
@ -145,10 +149,6 @@ export function IssueReportPage() {
HIDE_BLOCKED_KEY,
false,
);
const [labelFilter, setLabelFilter] = useLocalSetting<string[]>(
LABEL_FILTER_KEY,
[],
);
const [sortKey, setSortKey] = useLocalSetting<SortKey>(
SORT_KEY_KEY,
"depended_on_by_count",
@ -180,7 +180,8 @@ export function IssueReportPage() {
}, []);
// The one fetch this page re-runs on state change — everything else
// (sort, hide-blocked, label filter) works over what's already loaded.
// (sort, hide-blocked, the table's own per-column filters) works over
// what's already loaded.
useEffect(() => {
let cancelled = false;
setLoading(true);
@ -210,26 +211,14 @@ export function IssueReportPage() {
};
}, [repoFilter]);
// Label choices are derived from whatever's currently loaded, not a
// separate endpoint — naturally scoped to "all repos" or one repo
// depending on the current selection, and never asks for a label that
// isn't actually present in the report.
const allLabels = useMemo(() => {
const s = new Set<string>();
for (const row of rows ?? []) for (const l of row.labels) s.add(l);
return [...s].sort();
}, [rows]);
const visibleRows = useMemo(() => {
let out = rows ?? [];
if (hideBlocked) out = out.filter((r) => !r.blocked);
if (labelFilter.length > 0)
out = out.filter((r) => r.labels.some((l) => labelFilter.includes(l)));
return [...out].sort((a, b) => {
const c = compareRows(a, b, sortKey);
return sortDir === "asc" ? c : -c;
});
}, [rows, hideBlocked, labelFilter, sortKey, sortDir]);
}, [rows, hideBlocked, sortKey, sortDir]);
function onSort(key: SortKey) {
if (key === sortKey) {
@ -240,14 +229,6 @@ export function IssueReportPage() {
}
}
function toggleLabel(label: string) {
setLabelFilter(
labelFilter.includes(label)
? labelFilter.filter((l) => l !== label)
: [...labelFilter, label],
);
}
// `aria-sort` for a sortable column's `<th>` — 'none' while sortable
// but not the active column, the real direction while it is. Screen
// readers announce this; the ▲/▼ glyph in `SortHeader` is `aria-hidden`
@ -315,6 +296,8 @@ export function IssueReportPage() {
key: "labels",
header: "labels",
render: (r) => (r.labels.length ? r.labels.join(", ") : "—"),
filterValues: (r) => r.labels,
filterMode: "multiselect",
},
{
key: "assignees",
@ -414,20 +397,6 @@ export function IssueReportPage() {
hide blocked (open dependency)
</label>
</div>
{allLabels.length ? (
<div class="issue-report-labels">
{allLabels.map((l) => (
<label key={l} class="issue-report-label-chip">
<input
type="checkbox"
checked={labelFilter.includes(l)}
onChange={() => toggleLabel(l)}
/>
{l}
</label>
))}
</div>
) : null}
{error ? (
<ApiErrorPanel
context="failed to load the issue report"
@ -441,6 +410,7 @@ export function IssueReportPage() {
rows={visibleRows}
rowKey={(r) => `${r.repo}#${r.number}`}
emptyMessage="no issues match the current filters"
storageKey={TABLE_FILTERS_KEY}
/>
) : null}
</Panel>

57
frontend/packages/swarm-ui/src/ui/table/Table.css
View file

@ -141,3 +141,60 @@
font: inherit;
font-size: 0.9em;
}
/* `filterMode: "multiselect"` — a scrollable checkbox list rather than
a `<select multiple>`, which needs a modifier key to pick more than
one option and reads as unfamiliar to most operators; a plain
checkbox list needs neither. `max-height` + scroll keeps a
long option set (many labels) from pushing the popover off-screen. */
.ui-table-filter-multiselect {
display: flex;
flex-direction: column;
gap: 0.3em;
max-height: 12em;
overflow-y: auto;
}
.ui-table-filter-checkbox {
display: flex;
align-items: center;
gap: 0.35em;
cursor: pointer;
font-size: 0.9em;
}
/* The negate toggle sits under every filter mode's own control (mara:
"you should be able to change if the filter is negated or not") —
a hairline rule separates it from the control above so "exclude"
doesn't read as one more option belonging to that control. */
.ui-table-filter-negate {
display: flex;
align-items: center;
gap: 0.35em;
margin-top: 0.5em;
padding-top: 0.5em;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 0.85em;
cursor: pointer;
}
/* One button clears every column's filter on this table at once (mara:
"have a small reset filters btn") — text-button styling matching
`.ui-table-sort-button`'s "no chrome, just a clickable label"
treatment, not a full `Badge`/bordered-button — this is a quiet
secondary action, not a primary one. */
.ui-table-reset-filters {
display: inline-block;
background: none;
border: none;
padding: 0;
margin: 0 0 0.5em;
font: inherit;
font-size: 0.85em;
color: var(--muted);
text-decoration: underline;
cursor: pointer;
}
.ui-table-reset-filters:hover {
color: var(--fg);
}

429
frontend/packages/swarm-ui/src/ui/table/Table.tsx
View file

@ -13,6 +13,7 @@ import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import { createPortal } from "preact/compat";
import type { ComponentChildren } from "preact";
import { FilterIcon } from "@hive/shared/icons.js";
import { useLocalSetting } from "@hive/shared/settings-storage.js";
import "./Table.css";
export interface TableColumn<T> {
@ -65,6 +66,14 @@ export interface TableColumn<T> {
* `.ui-table-filter-icon` for the actual rule.
*/
filterValue?: (row: T) => string;
/**
* Like `filterValue`, but for a column whose row value is a *set*
* rather than one string (e.g. issue labels) — required for and only
* consulted by `filterMode: "multiselect"`. A row matches when it
* shares at least one value with the operator's current selection
* (OR, not AND — "has any of these labels", not "has all of them").
*/
filterValues?: (row: T) => string[];
/**
* `"text"` (default): free substring, case-insensitive `<input>` —
* today's only behavior, unaffected if you don't set this.
@ -78,8 +87,38 @@ export interface TableColumn<T> {
* live rows rather than a hardcoded enum means the list never offers
* a choice that would match zero rows. Ignored unless `filterValue`
* is also set.
* `"multiselect"`: a checkbox list, same live-rows-derived option
* source as `"select"` but over `filterValues` and matching on any
* overlap rather than one exact value — for a column whose row value
* is itself a set (e.g. labels). Ignored unless `filterValues` is set.
*/
filterMode?: "text" | "select";
filterMode?: "text" | "select" | "multiselect";
}
// One filter's full state: `value` for `"text"`/`"select"`, `values` for
// `"multiselect"` (the other is left at its default and ignored), plus a
// `negate` flag consulted regardless of mode (mara: "you should be able
// to change if the filter is negated or not — search for this text vs
// exclude it"). A column with no entry here behaves identically to the
// all-defaults entry below — `getFilter` returns this same shape either
// way, so callers never need an `undefined` branch.
interface ColumnFilterState {
value: string;
values: string[];
negate: boolean;
}
const EMPTY_FILTER: ColumnFilterState = {
value: "",
values: [],
negate: false,
};
function isFilterActive(f: ColumnFilterState | undefined): boolean {
return f !== undefined && (f.value !== "" || f.values.length > 0);
}
function isFilterable<T>(c: TableColumn<T>): boolean {
return c.filterValue !== undefined || c.filterValues !== undefined;
}
type SortDir = "asc" | "desc";
@ -97,6 +136,7 @@ export function Table<T>({
rows,
rowKey,
emptyMessage,
storageKey,
}: {
columns: TableColumn<T>[];
rows: T[];
@ -107,14 +147,27 @@ export function Table<T>({
// table entirely) has nothing useful to add here, so this stays
// opt-in rather than every table growing a mandatory default string.
emptyMessage?: ComponentChildren;
// Namespaces this table's filter state in `localStorage` (mara:
// "tables should remember their filters in general") — required, not
// optional, so every table gets persistence for free and no caller can
// forget it; a stray collision between two tables sharing a key is a
// caller bug worth a distinct, unique string, same as any other
// storage key in this codebase (see `IssueReportPage`'s own
// `swarm-ui:issue-report:…` keys). Sort intentionally stays
// `useState` below, not persisted — only asked for filters.
storageKey: string;
}) {
// One active sort column at a time, same as any spreadsheet — a
// multi-column sort is real complexity (tie-break order, a UI to
// express it) nothing here has asked for yet.
const [sort, setSort] = useState<{ key: string; dir: SortDir } | null>(null);
// Filter text per filterable column key, only populated for a column
// whose input the operator has actually typed into.
const [filters, setFilters] = useState<Record<string, string>>({});
// Filter state per filterable column key, only populated for a column
// the operator has actually touched. Persisted (see `storageKey`
// above), same `useLocalSetting` plumbing `IssueReportPage` already
// used for its own now-folded-in label filter.
const [filters, setFilters] = useLocalSetting<
Record<string, ColumnFilterState>
>(storageKey, {});
// Which column's filter popover is open, if any — at most one at a
// time (opening a second closes the first) so the header row never
// shows more than one panel at once.
@ -173,7 +226,33 @@ export function Table<T>({
};
}, [openFilterKey]);
const activeFilters = Object.entries(filters).filter(([, v]) => v !== "");
const activeFilters = Object.entries(filters).filter(([, f]) =>
isFilterActive(f),
);
function getFilter(key: string): ColumnFilterState {
return filters[key] ?? EMPTY_FILTER;
}
function updateFilter(key: string, patch: Partial<ColumnFilterState>) {
setFilters({
...filters,
[key]: { ...getFilter(key), ...patch },
});
}
function toggleFilterValue(key: string, value: string) {
const current = getFilter(key).values;
updateFilter(key, {
values: current.includes(value)
? current.filter((v) => v !== value)
: [...current, value],
});
}
// mara: "have a small reset filters btn" — one button clears every
// column's filter at once rather than hunting down each popover
// individually.
function resetFilters() {
setFilters({});
}
// Close on outside click or Escape — same contract `Dropdown` gives
// its own popover (../.../shared/src/dropdown/Dropdown.tsx), but
@ -205,11 +284,20 @@ export function Table<T>({
let out = rows;
if (activeFilters.length > 0) {
out = out.filter((row) =>
activeFilters.every(([key, query]) => {
activeFilters.every(([key, f]) => {
const col = columns.find((c) => c.key === key);
const value = col?.filterValue?.(row) ?? "";
if (col?.filterMode === "select") return value === query;
return value.toLowerCase().includes(query.toLowerCase());
let matches: boolean;
if (col?.filterMode === "multiselect") {
const rowValues = col.filterValues?.(row) ?? [];
matches = f.values.some((v) => rowValues.includes(v));
} else if (col?.filterMode === "select") {
const value = col.filterValue?.(row) ?? "";
matches = value === f.value;
} else {
const value = col?.filterValue?.(row) ?? "";
matches = value.toLowerCase().includes(f.value.toLowerCase());
}
return f.negate ? !matches : matches;
}),
);
}
@ -260,6 +348,17 @@ export function Table<T>({
);
}
// Same reasoning as `selectOptionsFor` above, over `filterValues`
// (a row contributes every one of its own values, not just one).
function multiselectOptionsFor(c: TableColumn<T>): string[] {
if (!c.filterValues) return [];
const values = new Set<string>();
for (const row of rows) for (const v of c.filterValues(row)) values.add(v);
return Array.from(values).sort((a, b) =>
a.localeCompare(b, undefined, { sensitivity: "base", numeric: true }),
);
}
// Only one popover is ever open at a time, so one ref (rather than a
// per-column ref map) is enough to focus whichever control just
// mounted — typing immediately after the click that opened it,
@ -282,138 +381,200 @@ export function Table<T>({
return `filter by ${typeof c.header === "string" ? c.header : c.key}`;
}
function renderFilterControl(c: TableColumn<T>) {
if (c.filterMode === "select") {
return (
<select
ref={setPopoverControlRef}
class="ui-table-filter-select"
aria-label={filterLabel(c)}
value={filters[c.key] ?? ""}
onChange={(e) => {
const v = (e.target as HTMLSelectElement).value;
setFilters((prev) => ({ ...prev, [c.key]: v }));
}}
>
<option value="">any</option>
{selectOptionsFor(c).map((v) => (
<option key={v} value={v}>
{v}
</option>
))}
</select>
);
}
// mara: "you should be able to change if the filter is negated or not
// (eg search for this text vs exclude it)" — one toggle, consulted the
// same way regardless of which control above it produced the match.
function renderNegateToggle(c: TableColumn<T>) {
const f = getFilter(c.key);
return (
<input
ref={setPopoverControlRef}
type="text"
class="ui-table-filter-input"
placeholder="filter…"
aria-label={filterLabel(c)}
value={filters[c.key] ?? ""}
onInput={(e) => {
const v = (e.target as HTMLInputElement).value;
setFilters((prev) => ({ ...prev, [c.key]: v }));
}}
/>
<label class="ui-table-filter-negate">
<input
type="checkbox"
checked={f.negate}
onChange={(e) =>
updateFilter(c.key, {
negate: (e.target as HTMLInputElement).checked,
})
}
/>
exclude
</label>
);
}
function renderFilterControl(c: TableColumn<T>) {
if (c.filterMode === "multiselect") {
const f = getFilter(c.key);
return (
<>
<div class="ui-table-filter-multiselect">
{multiselectOptionsFor(c).map((v) => (
<label key={v} class="ui-table-filter-checkbox">
<input
type="checkbox"
checked={f.values.includes(v)}
onChange={() => toggleFilterValue(c.key, v)}
/>
{v}
</label>
))}
</div>
{renderNegateToggle(c)}
</>
);
}
if (c.filterMode === "select") {
return (
<>
<select
ref={setPopoverControlRef}
class="ui-table-filter-select"
aria-label={filterLabel(c)}
value={getFilter(c.key).value}
onChange={(e) => {
const v = (e.target as HTMLSelectElement).value;
updateFilter(c.key, { value: v });
}}
>
<option value="">any</option>
{selectOptionsFor(c).map((v) => (
<option key={v} value={v}>
{v}
</option>
))}
</select>
{renderNegateToggle(c)}
</>
);
}
return (
<>
<input
ref={setPopoverControlRef}
type="text"
class="ui-table-filter-input"
placeholder="filter…"
aria-label={filterLabel(c)}
value={getFilter(c.key).value}
onInput={(e) => {
const v = (e.target as HTMLInputElement).value;
updateFilter(c.key, { value: v });
}}
/>
{renderNegateToggle(c)}
</>
);
}
const anyActiveFilter = activeFilters.length > 0;
return (
<div class="ui-table-scroll">
<table class="ui-table">
<thead>
<tr>
{columns.map((c) => {
const hasFilterValue = (filters[c.key] ?? "") !== "";
const filterOpen = openFilterKey === c.key;
const headerContent = c.sortBy ? (
<button
type="button"
class="ui-table-sort-button"
onClick={() => toggleSort(c.key)}
>
{c.header}
<span class="ui-table-sort-glyph" aria-hidden="true">
{sort?.key === c.key
? sort.dir === "asc"
? "▲"
: "▼"
: "↕"}
</span>
</button>
) : (
c.header
);
return (
<th
key={c.key}
aria-sort={ariaSortFor(c)}
class={c.filterValue ? "ui-table-th-filterable" : undefined}
ref={(el) => {
if (!c.filterValue) return;
if (el) thRefs.current.set(c.key, el);
else thRefs.current.delete(c.key);
}}
>
{headerContent}
{c.filterValue ? (
<button
type="button"
class={
"ui-table-filter-icon" +
(filterOpen || hasFilterValue
? " ui-table-filter-icon-active"
: "")
}
aria-label={filterLabel(c)}
aria-expanded={filterOpen}
onClick={() => {
setOpenFilterKey((k) => {
const next = k === c.key ? null : c.key;
if (next !== null) computePopoverPos(next);
return next;
});
}}
>
<FilterIcon />
</button>
) : null}
</th>
);
})}
</tr>
</thead>
<tbody>
{rows.length === 0 && emptyMessage ? (
<>
{anyActiveFilter ? (
<button
type="button"
class="ui-table-reset-filters"
onClick={resetFilters}
>
reset filters
</button>
) : null}
<div class="ui-table-scroll">
<table class="ui-table">
<thead>
<tr>
<td class="ui-table-empty" colSpan={columns.length}>
{emptyMessage}
</td>
{columns.map((c) => {
const hasFilterValue = isFilterActive(filters[c.key]);
const filterOpen = openFilterKey === c.key;
const headerContent = c.sortBy ? (
<button
type="button"
class="ui-table-sort-button"
onClick={() => toggleSort(c.key)}
>
{c.header}
<span class="ui-table-sort-glyph" aria-hidden="true">
{sort?.key === c.key
? sort.dir === "asc"
? "▲"
: "▼"
: "↕"}
</span>
</button>
) : (
c.header
);
return (
<th
key={c.key}
aria-sort={ariaSortFor(c)}
class={
isFilterable(c) ? "ui-table-th-filterable" : undefined
}
ref={(el) => {
if (!isFilterable(c)) return;
if (el) thRefs.current.set(c.key, el);
else thRefs.current.delete(c.key);
}}
>
{headerContent}
{isFilterable(c) ? (
<button
type="button"
class={
"ui-table-filter-icon" +
(filterOpen || hasFilterValue
? " ui-table-filter-icon-active"
: "")
}
aria-label={filterLabel(c)}
aria-expanded={filterOpen}
onClick={() => {
setOpenFilterKey((k) => {
const next = k === c.key ? null : c.key;
if (next !== null) computePopoverPos(next);
return next;
});
}}
>
<FilterIcon />
</button>
) : null}
</th>
);
})}
</tr>
) : rows.length > 0 && visibleRows.length === 0 ? (
// Distinct from `emptyMessage` — real rows exist, the active
// filter(s) just matched none of them, not "there's nothing
// here at all".
<tr>
<td class="ui-table-empty" colSpan={columns.length}>
no rows match the current filter
</td>
</tr>
) : (
visibleRows.map((row) => (
<tr key={rowKey(row)}>
{columns.map((c) => (
<td key={c.key} class={c.cellClass}>
{c.render(row)}
</td>
))}
</thead>
<tbody>
{rows.length === 0 && emptyMessage ? (
<tr>
<td class="ui-table-empty" colSpan={columns.length}>
{emptyMessage}
</td>
</tr>
))
)}
</tbody>
</table>
) : rows.length > 0 && visibleRows.length === 0 ? (
// Distinct from `emptyMessage` — real rows exist, the active
// filter(s) just matched none of them, not "there's nothing
// here at all".
<tr>
<td class="ui-table-empty" colSpan={columns.length}>
no rows match the current filter
</td>
</tr>
) : (
visibleRows.map((row) => (
<tr key={rowKey(row)}>
{columns.map((c) => (
<td key={c.key} class={c.cellClass}>
{c.render(row)}
</td>
))}
</tr>
))
)}
</tbody>
</table>
</div>
{openFilterKey !== null && popoverPos
? createPortal(
(() => {
@ -437,6 +598,6 @@ export function Table<T>({
document.body,
)
: null}
</div>
</>
);
}