Table

<Table size="extra-small">
  <TableHeader>
    <TableRow>
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Meeting notes</TableCell>
    </TableRow>
  </TableBody>
</Table>

<script>
  let sortColumn = $state('file');
  let sortDirection = $state('ascending');

  const sorted = $derived(
    [...items].sort((a, b) =>
      (sortDirection === 'ascending' ? 1 : -1) * a[sortColumn].localeCompare(b[sortColumn])
    )
  );

  const toggleSort = (column) => {
    if (sortColumn === column) {
      sortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
    } else {
      sortColumn = column;
      sortDirection = 'ascending';
    }
  };
</script>

<Table sortable aria-label="Table with sort">
  <TableHeader>
    <TableRow>
      <TableHeaderCell
        sortDirection={sortColumn === 'file' ? sortDirection : undefined}
        onclick={() => toggleSort('file')}
      >
        File
      </TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {#each sorted as item (item.file)}
      <TableRow>
        <TableCell>{item.file}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

<script>
  let selected = $state([items[0].file]);

  const allSelected = $derived(selected.length === items.length);
  const someSelected = $derived(selected.length > 0 && !allSelected);

  const toggleRow = (file) => {
    selected = selected.includes(file) ? selected.filter((f) => f !== file) : [...selected, file];
  };
</script>

<Table aria-label="Table with multiselect">
  <TableHeader>
    <TableRow>
      <TableSelectionCell
        checked={allSelected ? true : someSelected ? 'mixed' : false}
        checkboxProps={{ 'aria-label': 'Select all rows' }}
        onclick={() => (selected = allSelected ? [] : items.map((item) => item.file))}
      />
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {#each items as item (item.file)}
      {@const isSelected = selected.includes(item.file)}
      <TableRow
        aria-selected={isSelected}
        appearance={isSelected ? 'brand' : 'none'}
        onclick={() => toggleRow(item.file)}
      >
        <TableSelectionCell checked={isSelected} checkboxProps={{ 'aria-label': 'Select row' }} />
        <TableCell>{item.file}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

<script>
  let picked = $state(items[0].file);
</script>

<Table aria-label="Table with single select">
  <TableHeader>
    <TableRow>
      <TableSelectionCell type="radio" invisible />
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {#each items as item (item.file)}
      {@const isPicked = picked === item.file}
      <TableRow
        aria-selected={isPicked}
        appearance={isPicked ? 'brand' : 'none'}
        onclick={() => (picked = item.file)}
      >
        <TableSelectionCell
          type="radio"
          checked={isPicked}
          radioProps={{ name: 'file', 'aria-label': 'Select row' }}
        />
        <TableCell>{item.file}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

<TableRow aria-selected={isSelected} appearance={isSelected ? 'brand' : 'none'} onclick={() => toggleSubtle(item.file)}>
  <TableSelectionCell subtle checked={isSelected} checkboxProps={{ 'aria-label': 'Select row' }} />
  <TableCell>{item.file}</TableCell>
</TableRow>

<TableCell>
  <TableCellLayout media={DocumentRegular} description="7h ago" appearance="primary" truncate>
    Meeting notes
  </TableCellLayout>
</TableCell>

<TableCell>
  <TableCellLayout media={item.icon}>{item.file}</TableCellLayout>
  <TableCellActions>
    <Button appearance="subtle" shape="circular" aria-label="Edit">
      <EditRegular />
    </Button>
    <Button appearance="subtle" shape="circular" aria-label="More actions">
      <MoreHorizontalRegular />
    </Button>
  </TableCellActions>
</TableCell>

<Table enableTabspot aria-label="Table with keyboard navigation">
  <TableHeader>
    <TableRow>
      <TableHeaderCell>File</TableHeaderCell>
      <TableHeaderCell>Actions</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {#each items as item (item.file)}
      <TableRow>
        <TableCell>{item.file}</TableCell>

        <!-- Enter steps into the cell to reach the buttons, Escape steps back out. -->
        <TableCell focusMode="group">
          <TableCellActions visible>
            <Button appearance="subtle" shape="circular" aria-label="Edit {item.file}">
              <EditRegular />
            </Button>
          </TableCellActions>
        </TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

<script>
  // Bind only if you want to read the widths back, or restore them later.
  let columnWidths = $state([200, 180, 160]);
</script>

<Table
  resizableColumns
  bind:columnWidths
  columnSizing={[{ minWidth: 120 }, { minWidth: 100 }, { minWidth: 100 }]}
  onColumnResize={(e, { index, width }) => console.log(index, width)}
  aria-label="Table with resizable columns"
>
  <TableHeader>
    <TableRow>
      <TableHeaderCell>File</TableHeaderCell>
      <TableHeaderCell>Author</TableHeaderCell>
      <TableHeaderCell>Last updated</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {#each items as item (item.file)}
      <TableRow>
        <TableCell>{item.file}</TableCell>
        <TableCell>{item.author}</TableCell>
        <TableCell>{item.lastUpdated}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

<Table noRowBorders aria-label="Table without row borders">
  <TableHeader>
    <TableRow>
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Meeting notes</TableCell>
    </TableRow>
  </TableBody>
</Table>

<Table noNativeElements aria-label="Table rendered with divs">
  <TableHeader>
    <TableRow>
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Meeting notes</TableCell>
    </TableRow>
  </TableBody>
</Table>

<script>
  import SvelteVirtualList from '@humanspeak/svelte-virtual-list';
  import { SvelteSet } from 'svelte/reactivity';

  const rows = Array.from({ length: 2000 }, (_, i) => ({ id: i, file: `Document ${i + 1}` }));

  // A Set, because a windowed list asks "is this row selected?" on every render.
  let selected = $state(new SvelteSet([0]));
  let listRef = $state(null);

  const toggleRow = (id) => (selected.has(id) ? selected.delete(id) : selected.add(id));

  // The virtualizer names its viewport a region, which a rowgroup cannot hold between itself and its rows.
  const presentational = (node) => {
    const region = node.querySelector('[role="region"]');
    region?.setAttribute('role', 'none');
    // A name or a tab stop would keep the role. The rows are reached with the arrow keys of the table.
    region?.removeAttribute('aria-label');
    region?.removeAttribute('tabindex');
  };
</script>

<!--
  A semantic table is laid out by the browser in one pass, so virtualization needs the div layout.
  Only a window of rows exists, so nothing inside can size the columns: give the table a min-width.
  The virtualizer is what lets the arrow keys reach a row the list has not rendered yet.
-->
<Table
  noNativeElements
  enableTabspot
  style="min-width: 520px;"
  aria-label="Virtualized table"
  aria-rowcount={rows.length + 1}
  virtualizer={{
    size: rows.length,
    scrollToIndex: (index) => listRef?.scroll({ index, align: 'auto', smoothScroll: false })
  }}
>
  <TableHeader>
    <TableRow aria-rowindex={1}>
      <TableSelectionCell invisible />
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody style="height: 320px;" {@attach presentational}>
    <SvelteVirtualList items={rows} bind:this={listRef} defaultEstimatedItemHeight={44}>
      {#snippet renderItem(row, index)}
        {@const isSelected = selected.has(row.id)}
        <TableRow
          aria-rowindex={index + 2}
          aria-selected={isSelected}
          appearance={isSelected ? 'brand' : 'none'}
          onclick={() => toggleRow(row.id)}
        >
          <TableSelectionCell checked={isSelected} checkboxProps={{ 'aria-label': `Select ${row.file}` }} />
          <TableCell>{row.file}</TableCell>
        </TableRow>
      {/snippet}
    </SvelteVirtualList>
  </TableBody>
</Table>