Table

A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.

Name	Type	Date Modified
Games	File folder	6/7/2020
Program Files	File folder	4/7/2021
bootmgr	System file	11/20/2010
log.txt	Text Document	1/18/2016

selectionMode

Example

Table.tsx

Table.css

theme.css

Example

Table.tsx

Table.css

theme.css

import {Table, TableHeader, Column, Row} from './Table';
import {TableBody, Cell} from 'react-aria-components';

<Table
  aria-label="Files"
  selectionMode="multiple">
  <TableHeader>
    <Column isRowHeader>Name</Column>
    <Column>Type</Column>
    <Column>Date Modified</Column>
  </TableHeader>
  <TableBody>
    <Row>
      <Cell>Games</Cell>
      <Cell>File folder</Cell>
      <Cell>6/7/2020</Cell>
    </Row>
    <Row>
      <Cell>Program Files</Cell>
      <Cell>File folder</Cell>
      <Cell>4/7/2021</Cell>
    </Row>
    <Row>
      <Cell>bootmgr</Cell>
      <Cell>System file</Cell>
      <Cell>11/20/2010</Cell>
    </Row>
    <Row>
      <Cell>log.txt</Cell>
      <Cell>Text Document</Cell>
      <Cell>1/18/2016</Cell>
    </Row>
  </TableBody>
</Table>

Table

Anatomy