Data table

const needle = query.trim().toLowerCase();
const matches = rows
  .filter((row) => `${row.id} ${row.customer}`.toLowerCase().includes(needle))
  .sort((a, b) => (sorted.direction === 'ascending' ? 1 : -1) * compare(a, b, sorted.column));
const pagesOf = (count: number) => Math.max(1, Math.ceil(count / PAGE_SIZE));
const pageCount = pagesOf(matches.length);
const current = Math.min(page, pageCount);
const pageRows = matches.slice((current - 1) * PAGE_SIZE, current * PAGE_SIZE);

const sortOf = (column: Column): TableSort => (sorted.column === column ? sorted.direction : 'none');

<Table.HeaderCell scope="col" sort={sortOf('customer')}>
  <Table.SortButton onClick={() => sortBy('customer')}>Customer</Table.SortButton>
</Table.HeaderCell>

const selection = useSelection({ keys: pageRows.map((row) => row.id) });

<Checkbox.Root ref={selectAll} {...selection.getSelectAllProps()}>
  <VisuallyHidden.Root>Select all invoices on this page</VisuallyHidden.Root>
</Checkbox.Root>

const announce = useAnnouncer();
const search = useRef<HTMLInputElement>(null);
const selectAll = useRef<HTMLInputElement>(null);
const restoreFocus = useRef<HTMLElement>(null);
const deleteButton = useRef<HTMLButtonElement>(null);
const [confirming, setConfirming] = useState(false);
const [asked, setAsked] = useState(0);
const invoices = (count: number) => `${count} ${count === 1 ? 'invoice' : 'invoices'}`;

const confirmDelete = () => {
  restoreFocus.current = deleteButton.current;
  setAsked(selection.value.length);
  setConfirming(true);
};

const remove = () => {
  const ids = new Set(selection.value);
  if (ids.size === 0) return;
  const shown = matches.filter((row) => !ids.has(row.id)).length;
  const pages = pagesOf(shown);
  const to = Math.min(current, pages);
  restoreFocus.current = shown > 0 ? selectAll.current : search.current;
  setRows(rows.filter((row) => !ids.has(row.id)));
  setPage(to);
  selection.clear();
  setConfirming(false);
  const after = shown === 0 ? (needle ? 'No invoices found' : 'No invoices left') : to !== current ? `Page ${to} of ${pages}` : '';
  announce([`${invoices(ids.size)} deleted`, after].filter(Boolean).join('. '));
};

<Toolbar.Root aria-label="Selected invoices">
  <Button.Root variant="secondary" disabled={selection.value.length === 0} onClick={markPaid}>
    Mark paid
  </Button.Root>
  <Button.Root
    ref={deleteButton}
    variant="secondary"
    disabled={selection.value.length === 0}
    onClick={confirmDelete}
  >
    Delete
  </Button.Root>
</Toolbar.Root>
<Dialog.Root role="alertdialog" open={confirming} onOpenChange={setConfirming} restoreFocusRef={restoreFocus}>
  <Dialog.Title>{`Delete ${invoices(asked)}?`}</Dialog.Title>
  <Dialog.Description>Deleted invoices can't be restored.</Dialog.Description>
  <Dialog.Footer>
    <Dialog.Close>Cancel</Dialog.Close>
    <Button.Root onClick={remove}>Delete</Button.Root>
  </Dialog.Footer>
</Dialog.Root>

import { SearchX } from 'lucide-react';

const searched = useRef(needle);

useEffect(() => {
  const timer = setTimeout(() => {
    if (searched.current === needle) return;
    searched.current = needle;
    announce(matches.length === 0 ? (needle ? 'No invoices found' : 'No invoices left') : `${invoices(matches.length)} found`);
  }, 500);
  return () => clearTimeout(timer);
}, [needle, matches.length, announce]);

const clearSearch = () => {
  changeQuery('');
  search.current?.focus();
};

<Table.Row>
  <Table.Cell colSpan={5}>
    <EmptyState.Root>
      {needle && (
        <EmptyState.Icon>
          <SearchX />
        </EmptyState.Icon>
      )}
      <EmptyState.Title as="h3">{needle ? 'No invoices found' : 'No invoices'}</EmptyState.Title>
      <EmptyState.Description>{needle ? `Nothing matches “${query}”. Check the spelling or try a shorter search.` : 'There are no invoices left.'}</EmptyState.Description>
      {needle && (
        <EmptyState.Actions>
          <Button.Root variant="secondary" onClick={clearSearch}>
            Clear search
          </Button.Root>
        </EmptyState.Actions>
      )}
    </EmptyState.Root>
  </Table.Cell>
</Table.Row>

import { paginationRange } from '@tounsoo/todae';

const goTo = (to: number) => {
  if (to === current) return;
  setPage(to);
  announce(`Page ${to} of ${pageCount}`);
};

const step = (to: number, label: string) => (
  <Pagination.Item>
    <button
      type="button"
      aria-disabled={to < 1 || to > pageCount ? true : undefined}
      onClick={() => to >= 1 && to <= pageCount && goTo(to)}
    >
      {label}
    </button>
  </Pagination.Item>
);

<ScrollArea.Root axis="inline" focusable aria-label="Invoices table">
  <Table.Root>…</Table.Root>
</ScrollArea.Root>
{pageCount > 1 && (
  <Pagination.Root aria-label="Invoice pages">
    {step(current - 1, 'Previous')}
    {paginationRange({ page: current, count: pageCount }).map((item) =>
      typeof item === 'number' ? (
        <Pagination.Item key={item}>
          <button type="button" aria-current={item === current ? 'page' : undefined} onClick={() => goTo(item)}>
            {item}
          </button>
        </Pagination.Item>
      ) : (
        <Pagination.Ellipsis key={item} />
      ),
    )}
    {step(current + 1, 'Next')}
  </Pagination.Root>
)}