Table

render: () => {
  const sort = signal<TableSort | undefined>({ columnId: "name", direction: "asc" });
  const selected = signal<readonly string[]>(["alpha"]);
  const rows = mapSignal(sort, rowsFor);
  return (
    <Stack>
      <Table
        label="Workspace files"
        selectable
        columns={[
          { id: "name", header: "Name", sortable: true, width: 180 },
          { id: "kind", header: "Kind", sortable: true, width: 140 },
          { id: "size", header: "Size", sortable: true, align: "end", width: 88 },
        ]}
        rows={rows}
        sort={sort}
        onSortChange={(next) => {
          sort.value = next;
        }}
        selected={selected}
        onSelectedChange={(ids) => {
          selected.value = ids;
        }}
      />
      <Note role="status">
        {mapSignal(selected, (ids) =>
          ids.length === 0 ? "No files selected." : `Selected: ${ids.join(", ")}.`,
        )}
      </Note>
    </Stack>
  );
}