## Import

```jsx
import { UNSTABLE_Table as Table } from "@cfa/react-core";
```

## Live Editor

```jsx
<Table.Root aria-label="Menu items">
  <Table.Header>
    <Table.Column isRowHeader>Item</Table.Column>
    <Table.Column>Category</Table.Column>
    <Table.Column>Quantity</Table.Column>
  </Table.Header>
  <Table.Body>
    <Table.Row id="1">
      <Table.Cell>Chick-fil-A® Chicken Sandwich</Table.Cell>
      <Table.Cell>Entrées</Table.Cell>
      <Table.Cell>24</Table.Cell>
    </Table.Row>
    <Table.Row id="2">
      <Table.Cell>Waffle Potato Fries</Table.Cell>
      <Table.Cell>Sides</Table.Cell>
      <Table.Cell>48</Table.Cell>
    </Table.Row>
    <Table.Row id="3">
      <Table.Cell>Chick-fil-A® Lemonade</Table.Cell>
      <Table.Cell>Beverages</Table.Cell>
      <Table.Cell>36</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>
```

## Examples

### Dynamic Collections

Use the `items` prop to pass an array of objects to `Table.Body` with a render function. This works like `.map()` but is more performant because it only re-renders rows that have changed, rather than the entire list.

```jsx
function DynamicCollectionExample() {
  const items = [
    { id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
    { id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
    { id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 95 },
  ];

  return (
    <Table.Root aria-label="Sauce inventory">
      <Table.Header>
        <Table.Column isRowHeader>Name</Table.Column>
        <Table.Column>Flavor</Table.Column>
        <Table.Column>Quantity</Table.Column>
      </Table.Header>
      <Table.Body items={items}>
        {(item) => (
          <Table.Row id={item.id}>
            <Table.Cell>{item.name}</Table.Cell>
            <Table.Cell>{item.flavor}</Table.Cell>
            <Table.Cell>{item.quantity}</Table.Cell>
          </Table.Row>
        )}
      </Table.Body>
    </Table.Root>
  );
}
```

### Striped Variant

Use the `variant="striped"` prop to alternate row background colors for better readability.

```jsx
function StripedExample() {
  const items = [
    { id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
    { id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
    { id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 95 },
    { id: 4, name: "Garden Herb Ranch Sauce", flavor: "Creamy", quantity: 70 },
  ];

  return (
    <Table.Root variant="striped" aria-label="Sauce inventory">
      <Table.Header>
        <Table.Column isRowHeader>Name</Table.Column>
        <Table.Column>Flavor</Table.Column>
        <Table.Column>Quantity</Table.Column>
      </Table.Header>
      <Table.Body items={items}>
        {(item) => (
          <Table.Row id={item.id}>
            <Table.Cell>{item.name}</Table.Cell>
            <Table.Cell>{item.flavor}</Table.Cell>
            <Table.Cell>{item.quantity}</Table.Cell>
          </Table.Row>
        )}
      </Table.Body>
    </Table.Root>
  );
}
```

### Compact

Use the `compact` prop to reduce row height and cell padding.

```jsx
function CompactExample() {
  const items = [
    { id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
    { id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
    { id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 95 },
    { id: 4, name: "Garden Herb Ranch Sauce", flavor: "Creamy", quantity: 70 },
  ];

  return (
    <Table.Root compact aria-label="Sauce inventory">
      <Table.Header>
        <Table.Column isRowHeader>Name</Table.Column>
        <Table.Column>Flavor</Table.Column>
        <Table.Column>Quantity</Table.Column>
      </Table.Header>
      <Table.Body items={items}>
        {(item) => (
          <Table.Row id={item.id}>
            <Table.Cell>{item.name}</Table.Cell>
            <Table.Cell>{item.flavor}</Table.Cell>
            <Table.Cell>{item.quantity}</Table.Cell>
          </Table.Row>
        )}
      </Table.Body>
    </Table.Root>
  );
}
```

### Text Alignment

Use the `textAlign` prop on `Table.Cell` to align cell content. Supported values are `"start"` (default), `"center"`, and `"end"`.

```jsx
function TextAlignmentExample() {
  const items = [
    { id: 1, name: "Chick-fil-A® Sauce", price: 0.25, quantity: 120 },
    { id: 2, name: "Polynesian Sauce", price: 0.25, quantity: 85 },
    { id: 3, name: "Honey Mustard Sauce", price: 0.25, quantity: 95 },
    { id: 4, name: "Garden Herb Ranch Sauce", price: 0.5, quantity: 70 },
  ];

  return (
    <Table.Root aria-label="Sauce inventory">
      <Table.Header>
        <Table.Column isRowHeader>Name</Table.Column>
        <Table.Column>Price</Table.Column>
        <Table.Column>Quantity</Table.Column>
      </Table.Header>
      <Table.Body items={items}>
        {(item) => (
          <Table.Row id={item.id}>
            <Table.Cell>{item.name}</Table.Cell>
            <Table.Cell textAlign="end">${item.price.toFixed(2)}</Table.Cell>
            <Table.Cell textAlign="end">{item.quantity}</Table.Cell>
          </Table.Row>
        )}
      </Table.Body>
    </Table.Root>
  );
}
```

### Row Links

Use the `href` prop on `Table.Row` to make entire rows navigable. This is useful for tables where each row represents a resource the user can navigate to.

```jsx
function RowLinksExample() {
  const resources = [
    {
      id: 1,
      name: "Menu",
      url: "https://www.chick-fil-a.com/menu",
      category: "Food & Beverages",
    },
    {
      id: 2,
      name: "Locations",
      url: "https://www.chick-fil-a.com/locations",
      category: "Restaurant Finder",
    },
    {
      id: 3,
      name: "Chick-fil-A One",
      url: "https://www.chick-fil-a.com/one",
      category: "Rewards Program",
    },
  ];

  return (
    <Table.Root aria-label="Chick-fil-A Resources">
      <Table.Header>
        <Table.Column isRowHeader>Name</Table.Column>
        <Table.Column>URL</Table.Column>
        <Table.Column>Category</Table.Column>
      </Table.Header>
      <Table.Body items={resources}>
        {(resource) => (
          <Table.Row id={resource.id} href={resource.url} target="_blank">
            <Table.Cell>{resource.name}</Table.Cell>
            <Table.Cell>{resource.url}</Table.Cell>
            <Table.Cell>{resource.category}</Table.Cell>
          </Table.Row>
        )}
      </Table.Body>
    </Table.Root>
  );
}
```

### Single Selection

Enable single row selection by setting `selectionMode="single"`.

```jsx
function SingleSelectionExample() {
  const [selectedKeys, setSelectedKeys] = React.useState(new Set());

  const items = [
    { id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
    { id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
    { id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 95 },
  ];

  return (
    <>
      <Table.Root
        selectionMode="single"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        aria-label="Sauce inventory"
      >
        <Table.Header>
          <Table.Column isRowHeader>Name</Table.Column>
          <Table.Column>Flavor</Table.Column>
          <Table.Column>Quantity</Table.Column>
        </Table.Header>
        <Table.Body items={items}>
          {(item) => (
            <Table.Row id={item.id}>
              <Table.Cell>{item.name}</Table.Cell>
              <Table.Cell>{item.flavor}</Table.Cell>
              <Table.Cell>{item.quantity}</Table.Cell>
            </Table.Row>
          )}
        </Table.Body>
      </Table.Root>
      <div style={{ marginTop: "16px" }}>
        Selected: {[...selectedKeys].join(", ")}
      </div>
    </>
  );
}
```

### Multiple Selection

Enable multiple row selection by setting `selectionMode="multiple"`.

```jsx
function MultipleSelectionExample() {
  const [selectedKeys, setSelectedKeys] = React.useState(new Set());

  const items = [
    { id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
    { id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
    { id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 95 },
    { id: 4, name: "Garden Herb Ranch Sauce", flavor: "Creamy", quantity: 70 },
  ];

  return (
    <>
      <Table.Root
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        aria-label="Sauce inventory"
      >
        <Table.Header>
          <Table.Column isRowHeader>Name</Table.Column>
          <Table.Column>Flavor</Table.Column>
          <Table.Column>Quantity</Table.Column>
        </Table.Header>
        <Table.Body items={items}>
          {(item) => (
            <Table.Row id={item.id}>
              <Table.Cell>{item.name}</Table.Cell>
              <Table.Cell>{item.flavor}</Table.Cell>
              <Table.Cell>{item.quantity}</Table.Cell>
            </Table.Row>
          )}
        </Table.Body>
      </Table.Root>
      <div style={{ marginTop: "16px" }}>
        Selected: {[...selectedKeys].join(", ")}
      </div>
    </>
  );
}
```

### Replace Selection Behavior

By default, selection uses `selectionBehavior="toggle"` which renders checkboxes and allows additive selection. Set `selectionBehavior="replace"` to select rows on click. Clicking a new row deselects the previous one.

```jsx
function ReplaceSelectionExample() {
  const [selectedKeys, setSelectedKeys] = React.useState(new Set());

  const items = [
    { id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
    { id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
    { id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 95 },
    { id: 4, name: "Garden Herb Ranch Sauce", flavor: "Creamy", quantity: 70 },
  ];

  return (
    <>
      <Table.Root
        selectionMode="multiple"
        selectionBehavior="replace"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        aria-label="Sauce inventory"
      >
        <Table.Header>
          <Table.Column isRowHeader>Name</Table.Column>
          <Table.Column>Flavor</Table.Column>
          <Table.Column>Quantity</Table.Column>
        </Table.Header>
        <Table.Body items={items}>
          {(item) => (
            <Table.Row id={item.id}>
              <Table.Cell>{item.name}</Table.Cell>
              <Table.Cell>{item.flavor}</Table.Cell>
              <Table.Cell>{item.quantity}</Table.Cell>
            </Table.Row>
          )}
        </Table.Body>
      </Table.Root>
      <div style={{ marginTop: "16px" }}>
        Selected: {[...selectedKeys].join(", ")}
      </div>
    </>
  );
}
```

### Disabled Rows

Use the `disabledKeys` prop to prevent interaction with specific rows. Disabled rows are excluded from selection.

```jsx
function DisabledRowsExample() {
  const [selectedKeys, setSelectedKeys] = React.useState(new Set());

  const items = [
    { id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
    { id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
    { id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 0 },
    { id: 4, name: "Garden Herb Ranch Sauce", flavor: "Creamy", quantity: 70 },
  ];

  return (
    <Table.Root
      selectionMode="multiple"
      selectedKeys={selectedKeys}
      onSelectionChange={setSelectedKeys}
      disabledKeys={[3]}
      aria-label="Sauce inventory"
    >
      <Table.Header>
        <Table.Column isRowHeader>Name</Table.Column>
        <Table.Column>Flavor</Table.Column>
        <Table.Column>Quantity</Table.Column>
      </Table.Header>
      <Table.Body items={items}>
        {(item) => (
          <Table.Row id={item.id}>
            <Table.Cell>{item.name}</Table.Cell>
            <Table.Cell>{item.flavor}</Table.Cell>
            <Table.Cell>{item.quantity}</Table.Cell>
          </Table.Row>
        )}
      </Table.Body>
    </Table.Root>
  );
}
```

### Sortable Columns

Use `sortDescriptor` and `onSortChange` to control sorting. Mark sortable columns with `allowsSorting` and add sort indicator icons to show direction.

```jsx
function SortableExample() {
  const [sortDescriptor, setSortDescriptor] = React.useState({
    column: "name",
    direction: "ascending",
  });

  const items = [
    { id: 1, name: "Chick-fil-A® Sauce", quantity: 145, popularity: 95 },
    { id: 2, name: "Polynesian Sauce", quantity: 78, popularity: 88 },
    { id: 3, name: "Barbeque Sauce", quantity: 92, popularity: 72 },
    { id: 4, name: "Garden Herb Ranch Sauce", quantity: 64, popularity: 81 },
    { id: 5, name: "Honey Mustard Sauce", quantity: 55, popularity: 79 },
    {
      id: 6,
      name: "Sweet & Spicy Sriracha Sauce",
      quantity: 31,
      popularity: 85,
    },
  ];

  const sortedItems = [...items].sort((a, b) => {
    const first = sortDescriptor.direction === "ascending" ? a : b;
    const second = sortDescriptor.direction === "ascending" ? b : a;
    const column = sortDescriptor.column;

    if (column === "name") {
      return first.name.localeCompare(second.name);
    } else if (column === "quantity") {
      return first.quantity - second.quantity;
    } else {
      return first.popularity - second.popularity;
    }
  });

  return (
    <Table.Root
      sortDescriptor={sortDescriptor}
      onSortChange={setSortDescriptor}
      aria-label="Sauce inventory"
    >
      <Table.Header>
        <Table.Column id="name" isRowHeader allowsSorting>
          <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
            <span>Sauce Name</span>
            {sortDescriptor.column === "name" ? (
              sortDescriptor.direction === "ascending" ? (
                <ArrowNarrowUp />
              ) : (
                <ArrowNarrowDown />
              )
            ) : (
              <Sort />
            )}
          </div>
        </Table.Column>
        <Table.Column id="quantity" allowsSorting>
          <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
            <span>In Stock</span>
            {sortDescriptor.column === "quantity" ? (
              sortDescriptor.direction === "ascending" ? (
                <ArrowNarrowUp />
              ) : (
                <ArrowNarrowDown />
              )
            ) : (
              <Sort />
            )}
          </div>
        </Table.Column>
        <Table.Column id="popularity" allowsSorting>
          <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
            <span>Popularity %</span>
            {sortDescriptor.column === "popularity" ? (
              sortDescriptor.direction === "ascending" ? (
                <ArrowNarrowUp />
              ) : (
                <ArrowNarrowDown />
              )
            ) : (
              <Sort />
            )}
          </div>
        </Table.Column>
      </Table.Header>
      <Table.Body items={sortedItems}>
        {(item) => (
          <Table.Row id={item.id}>
            <Table.Cell>{item.name}</Table.Cell>
            <Table.Cell textAlign="end">{item.quantity}</Table.Cell>
            <Table.Cell textAlign="end">{item.popularity}%</Table.Cell>
          </Table.Row>
        )}
      </Table.Body>
    </Table.Root>
  );
}
```

### Empty State

Use the `renderEmptyState` prop to display a message when there are no items to display.

```jsx
function EmptyStateExample() {
  const items = [];

  return (
    <Table.Root aria-label="Sauce inventory">
      <Table.Header>
        <Table.Column isRowHeader>Name</Table.Column>
        <Table.Column>Flavor</Table.Column>
        <Table.Column>Quantity</Table.Column>
      </Table.Header>
      <Table.Body items={items} renderEmptyState={() => "No items found."}>
        {(item) => (
          <Table.Row id={item.id}>
            <Table.Cell>{item.name}</Table.Cell>
            <Table.Cell>{item.flavor}</Table.Cell>
            <Table.Cell>{item.quantity}</Table.Cell>
          </Table.Row>
        )}
      </Table.Body>
    </Table.Root>
  );
}
```

### Async Loading

Use `renderEmptyState` to show a loading indicator while fetching data. Once the data resolves, the table automatically renders the rows.

```jsx
function AsyncLoadingExample() {
  const [items, setItems] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {
    // Simulate API call
    setTimeout(() => {
      setItems([
        { id: 1, name: "Sarah Johnson", city: "Atlanta", yearsOfService: 8 },
        { id: 2, name: "Michael Chen", city: "Charlotte", yearsOfService: 5 },
        {
          id: 3,
          name: "Emily Rodriguez",
          city: "Houston",
          yearsOfService: 12,
        },
      ]);
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <Table.Root aria-label="Employee list">
      <Table.Header>
        <Table.Column isRowHeader>Employee Name</Table.Column>
        <Table.Column>City</Table.Column>
        <Table.Column>Years of Service</Table.Column>
      </Table.Header>
      <Table.Body
        items={items}
        renderEmptyState={() =>
          isLoading ? "Loading employees..." : "No employees available."
        }
      >
        {(item) => (
          <Table.Row id={item.id}>
            <Table.Cell>{item.name}</Table.Cell>
            <Table.Cell>{item.city}</Table.Cell>
            <Table.Cell>{item.yearsOfService}</Table.Cell>
          </Table.Row>
        )}
      </Table.Body>
    </Table.Root>
  );
}
```

## Props

### Table.Root

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| compact | `boolean` | `false` | Whether the table uses compact sizing |
| variant | `"default" \ | "striped"` | `"default"` | Visual style variant of the table |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| children | `ReactNode` | - | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. |
| className | `ClassNameOrFunction<TableRenderProps>` | `'react-aria-Table'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| defaultSelectedKeys | `"all" \ | Iterable<Key>` | - | The initial selected keys in the collection (uncontrolled). |
| dir | `string` | - | - |
| disabledBehavior | `DisabledBehavior` | `"all"` | Whether \`disabledKeys\` applies to all interactions, or only selection. |
| disabledKeys | `Iterable<Key>` | - | A list of row keys to disable. |
| disallowEmptySelection | `boolean` | - | Whether the collection allows empty selection. |
| dragAndDropHooks | `DragAndDropHooks<object>` | - | The drag and drop hooks returned by \`useDragAndDrop\` used to enable drag and drop behavior for the Table. |
| escapeKeyBehavior | `"clearSelection" \ | "none"` | `'clearSelection'` | Whether pressing the escape key should clear selection in the table or not.&#xA;&#xA;Most experiences should not modify this option as it eliminates a keyboard user's ability to&#xA;easily clear selection. Only use if the escape key is being handled externally or should not&#xA;trigger selection clearing contextually. |
| hidden | `boolean` | - | - |
| inert | `boolean` | - | - |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLTableElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onClick | `MouseEventHandler<HTMLTableElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLTableElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLTableElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onRowAction | `(key: Key) => void` | - | Handler that is called when a user performs an action on the row. |
| onScroll | `UIEventHandler<HTMLTableElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLTableElement>` | - | - |
| onSelectionChange | `(keys: Selection) => void` | - | Handler that is called when the selection changes. |
| onSortChange | `(descriptor: SortDescriptor) => any` | - | Handler that is called when the sorted column or direction changes. |
| onTouchCancel | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLTableElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLTableElement>` | - | - |
| render | `DOMRenderFunction<"table" \ | "div", TableRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| selectedKeys | `"all" \ | Iterable<Key>` | - | The currently selected keys in the collection (controlled). |
| selectionBehavior | `SelectionBehavior` | `"toggle"` | How multiple selection should behave in the collection. |
| selectionMode | `SelectionMode` | - | The type of selection that is allowed in the collection. |
| shouldSelectOnPressUp | `boolean` | - | Whether selection should occur on press up instead of press down. |
| slot | `string` | - | A slot name for the component. Slots allow the component to receive props from a parent component.&#xA;An explicit \`null\` value indicates that the local props completely override all props received from a parent. |
| sortDescriptor | `SortDescriptor` | - | The current sorted column and direction. |
| style | `StyleOrFunction<TableRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |

### Table.Header

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children | `ReactNode \ | ((item: T) => ReactElement<unknown, string \ | JSXElementConstructor<any>>)` | - | A list of \`Column(s)\` or a function. If the latter, a list of columns must be provided using the \`columns\` prop. |
| className | `ClassNameOrFunction<TableHeaderRenderProps>` | `'react-aria-TableHeader'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| columns | `Iterable<T>` | - | A list of table columns. |
| dependencies | `readonly any[]` | - | Values that should invalidate the column cache when using dynamic collections. |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| inert | `boolean` | - | - |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onClick | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onHoverChange | `(isHovering: boolean) => void` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction starts. |
| onLostPointerCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onScroll | `UIEventHandler<HTMLTableSectionElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLTableSectionElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLTableSectionElement>` | - | - |
| render | `DOMRenderFunction<"div" \ | "thead", TableHeaderRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| style | `StyleOrFunction<TableHeaderRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |

### Table.Body

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children | `ReactNode \ | ((item: T) => ReactNode)` | - | The contents of the collection. |
| className | `ClassNameOrFunction<TableBodyRenderProps>` | `'react-aria-TableBody'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dependencies | `readonly any[]` | - | Values that should invalidate the item cache when using dynamic collections. |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| inert | `boolean` | - | - |
| items | `Iterable<T>` | - | Item objects in the collection. |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLTableSectionElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onClick | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLTableSectionElement>` | - | - |
| onScroll | `UIEventHandler<HTMLTableSectionElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLTableSectionElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLTableSectionElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLTableSectionElement>` | - | - |
| render | `DOMRenderFunction<"div" \ | "tbody", TableBodyRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| renderEmptyState | `(props: TableBodyRenderProps) => ReactNode` | - | Provides content to display when there are no rows in the table. |
| style | `StyleOrFunction<TableBodyRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |

### Table.Row

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children | `ReactNode \ | ((item: T) => ReactElement<unknown, string \ | JSXElementConstructor<any>>)` | - | The cells within the row. Supports static items or a function for dynamic rendering. |
| className | `ClassNameOrFunction<RowRenderProps>` | `'react-aria-Row'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| columns | `Iterable<T>` | - | A list of columns used when dynamically rendering cells. |
| dependencies | `readonly any[]` | - | Values that should invalidate the cell cache when using dynamic collections. |
| dir | `string` | - | - |
| download | `string \ | boolean` | - | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). |
| hidden | `boolean` | - | - |
| href | `string` | - | A URL to link to. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| hrefLang | `string` | - | Hints at the human language of the linked URL. See\[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). |
| id | `Key` | - | The unique id of the row. |
| inert | `boolean` | - | - |
| isDisabled | `boolean` | - | Whether the row is disabled. |
| lang | `string` | - | - |
| onAction | `() => void` | - | Handler that is called when a user performs an action on the row. The exact user event depends on&#xA;the collection's \`selectionBehavior\` prop and the interaction modality. |
| onAnimationEnd | `AnimationEventHandler<HTMLTableRowElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLTableRowElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLTableRowElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLTableRowElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLTableRowElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLTableRowElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onClick | `(e: MouseEvent<FocusableElement, MouseEvent>) => void` | - | \*\*Not recommended – use \`onPress\` instead.\*\* \`onClick\` is an alias for \`onPress\`&#xA;provided for compatibility with other libraries. \`onPress\` provides &#xA;additional event details for non-mouse interactions. |
| onClickCapture | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onHoverChange | `(isHovering: boolean) => void` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction starts. |
| onLostPointerCapture | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLTableRowElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLTableRowElement>` | - | - |
| onPress | `(e: PressEvent) => void` | - | Handler that is called when the press is released over the target. |
| onPressChange | `(isPressed: boolean) => void` | - | Handler that is called when the press state changes. |
| onPressEnd | `(e: PressEvent) => void` | - | Handler that is called when a press interaction ends, either&#xA;over the target or when the pointer leaves the target. |
| onPressStart | `(e: PressEvent) => void` | - | Handler that is called when a press interaction starts. |
| onPressUp | `(e: PressEvent) => void` | - | Handler that is called when a press is released over the target, regardless of&#xA;whether it started on the target or not. |
| onScroll | `UIEventHandler<HTMLTableRowElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLTableRowElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLTableRowElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLTableRowElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLTableRowElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLTableRowElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLTableRowElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLTableRowElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLTableRowElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLTableRowElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLTableRowElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLTableRowElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLTableRowElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLTableRowElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLTableRowElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLTableRowElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLTableRowElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLTableRowElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLTableRowElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLTableRowElement>` | - | - |
| ping | `string` | - | A space-separated list of URLs to ping when the link is followed. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping). |
| referrerPolicy | `HTMLAttributeReferrerPolicy` | - | How much of the referrer to send when following the link. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). |
| rel | `string` | - | The relationship between the linked resource and the current page. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| render | `DOMRenderFunction<"div" \ | "tr", RowRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| routerOptions | `never` | - | Options for the configured client side router. |
| style | `StyleOrFunction<RowRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| target | `HTMLAttributeAnchorTarget` | - | The target window for the link. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| textValue | `string` | - | A string representation of the row's contents, used for features like typeahead. |
| translate | `"yes" \ | "no"` | - | - |
| value | `object` | - | The object value that this row represents. When using dynamic collections, this is set automatically. |

### Table.Cell

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| alignment | `"start" \ | "center" \ | "end"` | `"start"` | The text alignment of the cell's content |
| children | `ChildrenOrFunction<CellRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<CellRenderProps>` | `'react-aria-Cell'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| colSpan | `number` | - | Indicates how many columns the data cell spans. |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| id | `Key` | - | The unique id of the cell. |
| inert | `boolean` | - | - |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onClick | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onScroll | `UIEventHandler<HTMLTableCellElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLTableCellElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLTableCellElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLTableCellElement>` | - | - |
| render | `DOMRenderFunction<"div" \ | "td", CellRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| style | `StyleOrFunction<CellRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| textValue | `string` | - | A string representation of the cell's contents, used for features like typeahead. |
| translate | `"yes" \ | "no"` | - | - |

### Table.Column

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| alignment | `"start" \ | "center" \ | "end"` | `"start"` | The text alignment of the columns's text content |
| allowsSorting | `boolean` | - | Whether the column allows sorting. |
| children | `ChildrenOrFunction<ColumnRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<ColumnRenderProps>` | `'react-aria-Column'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| defaultWidth | `ColumnSize` | - | The default width of the column. This prop only applies when the \`\<Table>\` is wrapped in a \`\<ResizableTableContainer>\`. |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| id | `Key` | - | The unique id of the column. |
| inert | `boolean` | - | - |
| isRowHeader | `boolean` | - | Whether a column is a \[row header]\(https\://www\.w3.org/TR/wai-aria-1.1/#rowheader) and should be announced by assistive technology during row navigation. |
| lang | `string` | - | - |
| maxWidth | `ColumnStaticSize` | - | The maximum width of the column. This prop only applies when the \`\<Table>\` is wrapped in a \`\<ResizableTableContainer>\`. |
| minWidth | `ColumnStaticSize` | - | The minimum width of the column. This prop only applies when the \`\<Table>\` is wrapped in a \`\<ResizableTableContainer>\`. |
| onAnimationEnd | `AnimationEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onClick | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onScroll | `UIEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLTableHeaderCellElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLTableHeaderCellElement>` | - | - |
| render | `DOMRenderFunction<"div" \ | "th", ColumnRenderProps>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| style | `StyleOrFunction<ColumnRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| textValue | `string` | - | A string representation of the column's contents, used for accessibility announcements. |
| translate | `"yes" \ | "no"` | - | - |
| width | `ColumnSize` | - | The width of the column. This prop only applies when the \`\<Table>\` is wrapped in a \`\<ResizableTableContainer>\`. |