TableView

import {TableView, TableHeader, Column, TableBody, Row, Cell, CheckboxGroup, Checkbox, ActionButton} from '@react-spectrum/s2';
import {useState} from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

  = [];
  = [];
function FileTable() {
  let [showColumns, setShowColumns] = useState(['name', 'type', 'date']);
  let visibleColumns = columns.filter(column => showColumns.includes(column.id));

  let [rows, setRows] = useState(initialRows);
  let addRow = () => {
    let date = new Date().toLocaleDateString();
    setRows(rows => [
      ...rows,
      {id: rows.length + 1, name: 'file.txt', date, type: 'Text Document'}
    ]);
  };

  return (
    <div className={style({display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'start', width: 'full'})}>
      <CheckboxGroup aria-label="Show columns" value={showColumns} onChange={setShowColumns} orientation="horizontal">
        <Checkbox value="type">Type</Checkbox>
        <Checkbox value="date">Date Modified</Checkbox>
      </CheckboxGroup>
      <TableView aria-label="Files" styles={style({width: 'full'})}>
        <TableHeader columns={visibleColumns}>
          {column => (
            <Column isRowHeader={column.isRowHeader}>
              {column.name}
            </Column>
          )}
        </TableHeader>
        <TableBody items={rows} dependencies={[visibleColumns]}>
          {item => (
            <Row columns={visibleColumns}>
              {column => <Cell>{item[column.id]}</Cell>}
            </Row>
          )}
        </TableBody>
      </TableView>
      <ActionButton onPress={addRow}>Add row</ActionButton>
    </div>
  );
}

import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useAsyncList} from 'react-stately';

interface Character {
  name: string;
  height: number;
  mass: number;
  birth_year: number;
}

function AsyncSortTable() {
  let list = useAsyncList<Character>({
    async load({ signal, cursor }) {
      if (cursor) {
        cursor = cursor.replace(/^http:\/\//i, 'https://');
      }

      let res = await fetch(
        cursor || 'https://swapi.py4e.com/api/people/?search=',
        { signal }
      );
      let json = await res.json();

      return {
        items: json.results,
        cursor: json.next
      };
    }
  });

  return (
    <TableView
      aria-label="Star Wars characters"
      loadingState={list.loadingState}
      onLoadMore={list.loadMore}
      styles={style({width: 'full', height: 320})}>
      <TableHeader>
        <Column id="name" isRowHeader>Name</Column>
        <Column id="height">Height</Column>
        <Column id="mass">Mass</Column>
        <Column id="birth_year">Birth Year</Column>
      </TableHeader>
      <TableBody items={list.items}>
        {(item) => (
          <Row id={item.name}>
            <Cell>{item.name}</Cell>
            <Cell>{item.height}</Cell>
            <Cell>{item.mass}</Cell>
            <Cell>{item.birth_year}</Cell>
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}

import {TableView, TableHeader, Column, TableBody, IllustratedMessage, Heading, Content, Link} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import FolderOpen from '@react-spectrum/s2/illustrations/linear/FolderOpen';

<TableView aria-label="Search results" styles={style({width: 'full', height: 320})}>
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>Type</Column>
    <Column>Date Modified</Column>
  </TableHeader>
    renderEmptyState={() => (
      <IllustratedMessage>
        <FolderOpen />
        <Heading>No results</Heading>
        <Content>Press <Link href="https://adobe.com">here</Link> for more info.</Content>
      </IllustratedMessage>
    )}>
    {[]}
  </TableBody>
</TableView>

import {TableView, TableHeader, Column, TableBody, Row, Cell, Collection} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

  = [];
const columns = [
  {id: 'name', name: 'Name', isRowHeader: true, showDivider: true},
  {id: 'type', name: 'Type', align: 'center', showDivider: true},
  {id: 'level', name: 'Level', align: 'end'}
];

function TableWithDividers() {
  return (
    <TableView
      aria-label="Favorite pokemon"
      styles={style({width: 400})}>
      <TableHeader columns={columns}>
        {(column) => (
          <Column
            showDivider={column.showDivider}
            align={column.align}
            isRowHeader={column.isRowHeader}>
            {column.name}
          </Column>
        )}
      </TableHeader>
      <TableBody>
        <Collection items={rows}>
          {item => (
            <Row id={item.id} columns={columns}>
              {(column) => (
                <Cell
                  showDivider={column.showDivider}
                  align={column.align}>
                  {item[column.id]}
                </Cell>
              )}
            </Row>
          )}
        </Collection>
        <Row>
          <Cell colSpan={2} align="end" showDivider>Total:</Cell>
          <Cell align="end">{rows.reduce((p, v) => p + v.level, 0)}</Cell>
        </Row>
      </TableBody>
    </TableView>
  );
}

import {TableView, TableHeader, Column, TableBody, Row, Cell, MenuSection, MenuItem} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

  = [];
  = [];
function CustomMenusTable() {
  return (
    <TableView aria-label="Favorite pokemon" styles={style({width: 400})}>
      <TableHeader columns={columns}>
        {(column) => (
          <Column
            menuItems={
              <>
                <MenuSection>
                  <MenuItem onAction={() => alert(`Filtering "${column.name}" column`)}>Filter</MenuItem>
                </MenuSection>
                <MenuSection>
                  <MenuItem onAction={() => alert(`Hiding "${column.name}" column`)}>Hide column</MenuItem>
                  <MenuItem onAction={() => alert(`Managing the "${column.name}" column`)}>Manage columns</MenuItem>
                </MenuSection>
              </>
            }
            isRowHeader={column.isRowHeader}>
            {column.name}
          </Column>
        )}
      </TableHeader>
      <TableBody items={rows}>
        {item => (
          <Row id={item.id} columns={columns}>
            {(column) => {
              return <Cell>{item[column.id]}</Cell>;
            }}
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}

import {TableView, TableHeader, Column, TableBody, Row, Cell, type SortDescriptor} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

  = [];
function SortableTable() {
  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | null>(null);
  let sortedRows = rows;
  if (sortDescriptor) {
    sortedRows = rows.toSorted((a, b) => {
      let first = a[sortDescriptor.column];
      let second = b[sortDescriptor.column];
      let cmp = first < second ? -1 : 1;
      if (sortDescriptor.direction === 'descending') {
        cmp = -cmp;
      }
      return cmp;
    });
  }

  return (
    <TableView
      aria-label="Favorite pokemon"
      styles={style({width: 400})}
      sortDescriptor={sortDescriptor}
      onSortChange={setSortDescriptor}
    >
      <TableHeader>
        <Column id="name" isRowHeader allowsSorting>Name</Column>
        <Column id="type" allowsSorting>Type</Column>
        <Column id="level" allowsSorting>Level</Column>
      </TableHeader>
      <TableBody items={sortedRows}>
        {item => (
          <Row>
            <Cell>{item.name}</Cell>
            <Cell>{item.type}</Cell>
            <Cell>{item.level}</Cell>
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}

import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

  = [];
<TableView aria-label="Table with resizable columns" styles={style({width: 400})}>
  <TableHeader>
    <Column id="file" isRowHeader maxWidth={500} allowsResizing>
      File Name
    </Column>
    <Column id="size" width={80}>Size</Column>
    <Column id="date" minWidth={100} allowsResizing>
      Date Modified
    </Column>
  </TableHeader>
  <TableBody items={rows}>
    {item => (
      <Row>
        <Cell>{item.name}</Cell>
        <Cell>{item.size}</Cell>
        <Cell>{item.date}</Cell>
      </Row>
    )}
  </TableBody>
</TableView>

import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useSyncExternalStore} from 'react';

  = [];
  = [];
const initialWidths = new Map([
  ['file', '1fr'],
  ['size', 80],
  ['date', 100]
]);

export default function ResizableTable() {
  let columnWidths = useSyncExternalStore(subscribe, getColumnWidths, getInitialWidths);

  return (
    <TableView
      aria-label="Table with resizable columns"
      onResize={setColumnWidths}
      styles={style({width: 400})}>
      <TableHeader columns={columns} dependencies={[columnWidths]}>
        {column => (
          <Column
            isRowHeader={column.id === 'file'}
            allowsResizing
            width={columnWidths.get(column.id)}
          >
            {column.name}
          </Column>
        )}
      </TableHeader>
      <TableBody items={rows}>
        {item => (
          <Row>
            <Cell>{item.name}</Cell>
            <Cell>{item.size}</Cell>
            <Cell>{item.date}</Cell>
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}

let parsedWidths;
function getColumnWidths() {
  // Parse column widths from localStorage.
  if (!parsedWidths) {
    let data = localStorage.getItem('table-widths');
    if (data) {
      parsedWidths = new Map(JSON.parse(data));
    }
  }
  return parsedWidths || initialWidths;
}

function setColumnWidths(widths) {
  // Store new widths in localStorage, and trigger subscriptions.
  localStorage.setItem('table-widths', JSON.stringify(Array.from(widths)));
  window.dispatchEvent(new Event('storage'));
}

function getInitialWidths() {
  return initialWidths;
}

function subscribe(fn) {
  let onStorage = () => {
    // Invalidate cache.
    parsedWidths = null;
    fn();
  };

  window.addEventListener('storage', onStorage);
  return () => window.removeEventListener('storage', onStorage);
}

import {TableView, TableHeader, Column, TableBody, Row, Cell, EditableCell, TextField, ActionButton, Picker, PickerItem, Text, type Key} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import User from '@react-spectrum/s2/icons/User';
import Edit from '@react-spectrum/s2/icons/Edit';
import {useCallback,useRef, useState} from 'react';

  = [];
 : Array<Omit<ColumnProps, > & {: string}> = [];
export default function EditableTable(props) {
  let columns = editableColumns;
  let [editableItems, setEditableItems] = useState(defaultItems);
  let intermediateValue = useRef<any>(null);

  let onChange = useCallback((id: Key, columnId: Key) => {
    let value = intermediateValue.current;
    if (value === null) {
      return;
    }
    intermediateValue.current = null;
    setEditableItems(prev => {
      let newItems = prev.map(i => i.id === id && i[columnId] !== value ? {...i, [columnId]: value} : i);
      return newItems;
    });
  }, []);

  let onIntermediateChange = useCallback((value: any) => {
    intermediateValue.current = value;
  }, []);

  return (
    <TableView aria-label="Dynamic table" {...props} styles={style({height: 208})}>
      <TableHeader columns={columns}>
        {(column) => (
          <Column {...column}>{column.name}</Column>
        )}
      </TableHeader>
      <TableBody items={editableItems}>
        {item => (
          <Row id={item.id} columns={columns}>
            {(column) => {
              if (column.id === 'fruits') {
                return (
                  <EditableCell
                    align={column.align}
                    showDivider={column.showDivider}
                    onSubmit={() => onChange(item.id, column.id!)}
                    renderEditing={() => (
                      <TextField
                        aria-label="Edit fruit"
                        autoFocus
                        validate={value => value.length > 0 ? null : 'Fruit name is required'}
                        styles={style({flexGrow: 1, flexShrink: 1, minWidth: 0})}
                        defaultValue={item[column.id!]}
                        onChange={value => onIntermediateChange(value)} />
                    )}>
                    <div className={style({display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between'})}>
                      {item[column.id]}
                      <ActionButton slot="edit" aria-label="Edit fruit">
                        <Edit />
                      </ActionButton></div>
                  </EditableCell>
                );
              }
              if (column.id === 'farmer') {
                return (
                  <EditableCell
                    align={column.align}
                    showDivider={column.showDivider}
                    onSubmit={() => onChange(item.id, column.id!)}
                    renderEditing={() => (
                      <Picker
                        aria-label="Edit farmer"
                        autoFocus
                        styles={style({flexGrow: 1, flexShrink: 1, minWidth: 0})}
                        defaultValue={item[column.id!]}
                        onChange={value => onIntermediateChange(value)}>
                        <PickerItem textValue="Eva" id="Eva">
                          <User />
                          <Text>Eva</Text>
                        </PickerItem>
                        <PickerItem textValue="Steven" id="Steven">
                          <User />
                          <Text>Steven</Text>
                        </PickerItem>
                        <PickerItem textValue="Michael" id="Michael">
                          <User />
                          <Text>Michael</Text>
                        </PickerItem>
                        <PickerItem textValue="Sara" id="Sara">
                          <User />
                          <Text>Sara</Text>
                        </PickerItem>
                        <PickerItem textValue="Karina" id="Karina">
                          <User />
                          <Text>Karina</Text>
                        </PickerItem>
                        <PickerItem textValue="Otto" id="Otto">
                          <User />
                          <Text>Otto</Text>
                        </PickerItem>
                        <PickerItem textValue="Matt" id="Matt">
                          <User />
                          <Text>Matt</Text>
                        </PickerItem>
                        <PickerItem textValue="Emily" id="Emily">
                          <User />
                          <Text>Emily</Text>
                        </PickerItem>
                        <PickerItem textValue="Amelia" id="Amelia">
                          <User />
                          <Text>Amelia</Text>
                        </PickerItem>
                        <PickerItem textValue="Isla" id="Isla">
                          <User />
                          <Text>Isla</Text>
                        </PickerItem>
                      </Picker>
                    )}>
                    <div className={style({display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between'})}>
                      {item[column.id]}
                      <ActionButton slot="edit" aria-label="Edit fruit"><Edit /></ActionButton>
                    </div>
                  </EditableCell>
                );
              }
              return <Cell align={column.align} showDivider={column.showDivider}>{item[column.id!]}</Cell>;
            }}
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}