> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Table

> A data table built from TableCard, TableScrollArea, TableToolbar, TableHeader, TableRow, TableCell and TablePagination, plus a dozen cell-level parts.

```tsx theme={null}
import {
  Table,
  TableBody,
  TableCard,
  TableCell,
  TableCellContent,
  TableCellGroup,
  TableFooter,
  TableHead,
  TableHeader,
  TableLineClamp,
  TableMediaThumbnail,
  TablePagination,
  TablePillProgressLayout,
  TableProgressTrack,
  TableRow,
  TableRowsPerPageSelect,
  TableScrollArea,
  TableSortLabel,
  TableStackedText,
  TableStatusDot,
  TableToolbar,
} from "@fanvue/ui";
import type {
  TableBodyProps,
  TableCardProps,
  TableCellContentProps,
  TableCellGroupProps,
  TableCellIntent,
  TableCellProps,
  TableCellVariant,
  TableFooterProps,
  TableHeaderProps,
  TableHeadIntent,
  TableHeadProps,
  TableLineClampProps,
  TableMediaThumbnailProps,
  TableMediaThumbnailSize,
  TablePaginationLayout,
  TablePaginationProps,
  TablePillProgressLayoutProps,
  TableProgressTrackProps,
  TableProps,
  TableRowProps,
  TableRowsPerPageSelectProps,
  TableScrollAreaProps,
  TableSize,
  TableSortDirection,
  TableSortLabelProps,
  TableStackedTextProps,
  TableStatusDotProps,
  TableToolbarProps,
} from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-table--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="520" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Table — Default" />
</Frame>

```tsx theme={null}
import {
  ChevronDownIcon,
  Pill,
  Table,
  TableBody,
  TableCard,
  TableCell,
  TableCellGroup,
  TableHead,
  TableHeader,
  TableMediaThumbnail,
  TableRow,
  TableScrollArea,
} from "@fanvue/ui";

const TABLE_MEDIA_SRC =
  "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=112&h=160&fit=crop";

type ProductRow = {
  name: string;
  created: string;
  price: string;
  purchases: string;
  status: { label: "Active" | "Inactive" | "Warning"; variant: "green" | "red" | "gold" };
};

const PRODUCT_ROWS: ProductRow[] = [
  {
    name: "Product Name",
    created: "16 May, 01:15 AM",
    price: "$5.99 / month",
    purchases: "$0.00",
    status: { label: "Active", variant: "green" },
  },
  {
    name: "Product Name",
    created: "16 May, 01:15 AM",
    price: "$5.99 / month",
    purchases: "$0.00",
    status: { label: "Active", variant: "green" },
  },
  {
    name: "Product Name",
    created: "16 May, 01:15 AM",
    price: "$5.99 / month",
    purchases: "$156.25",
    status: { label: "Inactive", variant: "red" },
  },
  {
    name: "Product Name",
    created: "16 May, 01:15 AM",
    price: "$5.99 / month",
    purchases: "$0.00",
    status: { label: "Warning", variant: "gold" },
  },
];

function ProductTable({ showScrollbar = false }: { showScrollbar?: boolean }) {
  return (
    <TableCard size="condensed" className="max-w-[1050px]">
      <TableScrollArea showScrollbar={showScrollbar}>
        <Table className={showScrollbar ? "min-w-[1026px]" : undefined}>
          <TableHeader>
            <TableRow>
              <TableHead>Product</TableHead>
              <TableHead>Thumbnail</TableHead>
              <TableHead>Created</TableHead>
              <TableHead>Price</TableHead>
              <TableHead>Purchases</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {PRODUCT_ROWS.map((row, index) => (
              <TableRow key={`${row.name}-${index}`}>
                <TableCell intent="sideLabel">{row.name}</TableCell>
                <TableCell>
                  <TableCellGroup>
                    <TableMediaThumbnail size="32" src={TABLE_MEDIA_SRC} alt="" />
                    <ChevronDownIcon className="size-4 shrink-0 text-content-primary" aria-hidden />
                  </TableCellGroup>
                </TableCell>
                <TableCell>{row.created}</TableCell>
                <TableCell>{row.price}</TableCell>
                <TableCell>{row.purchases}</TableCell>
                <TableCell>
                  <Pill variant={row.status.variant}>{row.status.label}</Pill>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableScrollArea>
    </TableCard>
  );
}

<ProductTable />
```

## Variant — lg (80px rows)

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-table--large-rows&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="520" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Variant — lg (80px rows)" />
</Frame>

```tsx theme={null}
import * as React from "react";
import {
  Badge,
  Checkbox,
  Pagination,
  Table,
  TableBody,
  TableCard,
  TableCell,
  TableCellContent,
  TableHead,
  TableHeader,
  TableMediaThumbnail,
  TablePagination,
  TableRow,
  TableRowsPerPageSelect,
  TableScrollArea,
} from "@fanvue/ui";

const TABLE_MEDIA_SRC =
  "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=112&h=160&fit=crop";

function Example() {
  const [page, setPage] = React.useState(1);
  return (
    <TableCard size="lg" className="max-w-3xl">
      <TableScrollArea>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead intent="checkbox">
                <Checkbox size="16" aria-label="Select all" />
              </TableHead>
              <TableHead>Title</TableHead>
              <TableHead>Media</TableHead>
              <TableHead>Label</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableCell intent="checkbox">
                <Checkbox size="16" aria-label="Select row" />
              </TableCell>
              <TableCell>
                <TableCellContent primary="Sample label" secondary="Created today" />
              </TableCell>
              <TableCell>
                <TableMediaThumbnail src={TABLE_MEDIA_SRC} alt="" align="center" />
              </TableCell>
              <TableCell>
                <Badge variant="info">Badge</Badge>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableScrollArea>
      <TablePagination
        leadingSlot={<TableRowsPerPageSelect id="lg-rows" />}
        paginationSlot={
          <Pagination className="pb-0" totalPages={5} currentPage={page} onPageChange={setPage} />
        }
        summary="1–10 of 48 rows"
      />
    </TableCard>
  );
}
```

## With scroll indicator

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-table--with-scroll-indicator&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="520" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Table — With scroll indicator" />
</Frame>

```tsx theme={null}
import {
  ChevronDownIcon,
  Pill,
  Table,
  TableBody,
  TableCard,
  TableCell,
  TableCellGroup,
  TableHead,
  TableHeader,
  TableMediaThumbnail,
  TableRow,
  TableScrollArea,
} from "@fanvue/ui";

const TABLE_MEDIA_SRC =
  "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=112&h=160&fit=crop";

type ProductRow = {
  name: string;
  created: string;
  price: string;
  purchases: string;
  status: { label: "Active" | "Inactive" | "Warning"; variant: "green" | "red" | "gold" };
};

const PRODUCT_ROWS: ProductRow[] = [
  {
    name: "Product Name",
    created: "16 May, 01:15 AM",
    price: "$5.99 / month",
    purchases: "$0.00",
    status: { label: "Active", variant: "green" },
  },
  {
    name: "Product Name",
    created: "16 May, 01:15 AM",
    price: "$5.99 / month",
    purchases: "$0.00",
    status: { label: "Active", variant: "green" },
  },
  {
    name: "Product Name",
    created: "16 May, 01:15 AM",
    price: "$5.99 / month",
    purchases: "$156.25",
    status: { label: "Inactive", variant: "red" },
  },
  {
    name: "Product Name",
    created: "16 May, 01:15 AM",
    price: "$5.99 / month",
    purchases: "$0.00",
    status: { label: "Warning", variant: "gold" },
  },
];

function ProductTable({ showScrollbar = false }: { showScrollbar?: boolean }) {
  return (
    <TableCard size="condensed" className="max-w-[1050px]">
      <TableScrollArea showScrollbar={showScrollbar}>
        <Table className={showScrollbar ? "min-w-[1026px]" : undefined}>
          <TableHeader>
            <TableRow>
              <TableHead>Product</TableHead>
              <TableHead>Thumbnail</TableHead>
              <TableHead>Created</TableHead>
              <TableHead>Price</TableHead>
              <TableHead>Purchases</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {PRODUCT_ROWS.map((row, index) => (
              <TableRow key={`${row.name}-${index}`}>
                <TableCell intent="sideLabel">{row.name}</TableCell>
                <TableCell>
                  <TableCellGroup>
                    <TableMediaThumbnail size="32" src={TABLE_MEDIA_SRC} alt="" />
                    <ChevronDownIcon className="size-4 shrink-0 text-content-primary" aria-hidden />
                  </TableCellGroup>
                </TableCell>
                <TableCell>{row.created}</TableCell>
                <TableCell>{row.price}</TableCell>
                <TableCell>{row.purchases}</TableCell>
                <TableCell>
                  <Pill variant={row.status.variant}>{row.status.label}</Pill>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableScrollArea>
    </TableCard>
  );
}

<div className="max-w-2xl">
  <ProductTable showScrollbar />
</div>
```

## Sortable header

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-table--sortable&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="520" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Table — Sortable header" />
</Frame>

```tsx theme={null}
import * as React from "react";
import {
  Pill,
  Table,
  TableBody,
  TableCard,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  TableScrollArea,
  TableSortLabel,
} from "@fanvue/ui";

function Example() {
  type Direction = "asc" | "desc" | null;
  const Demo = () => {
    const [direction, setDirection] = React.useState<Direction>("asc");
    const next: Record<NonNullable<Direction>, Direction> = { asc: "desc", desc: null };
    const cycle = () => setDirection((d) => (d == null ? "asc" : next[d]));
    return (
      <TableCard className="max-w-2xl">
        <TableScrollArea>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>
                  <button type="button" onClick={cycle} className="cursor-pointer">
                    <TableSortLabel direction={direction}>Title</TableSortLabel>
                  </button>
                </TableHead>
                <TableHead>Owner</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell>Quarterly review</TableCell>
                <TableCell>Jane Doe</TableCell>
                <TableCell>
                  <Pill variant="green">Active</Pill>
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell>Roadmap planning</TableCell>
                <TableCell>John Doe</TableCell>
                <TableCell>
                  <Pill variant="gold">Warning</Pill>
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </TableScrollArea>
      </TableCard>
    );
  };
  return <Demo />;
}
```

## With toolbar (bulk select)

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-table--with-toolbar&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="520" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Table — With toolbar (bulk select)" />
</Frame>

```tsx theme={null}
import * as React from "react";
import {
  Button,
  Checkbox,
  ChevronDownIcon,
  Pagination,
  Table,
  TableBody,
  TableCard,
  TableCell,
  TableCellGroup,
  TableHead,
  TableHeader,
  TableLineClamp,
  TableMediaThumbnail,
  TablePagination,
  TableRow,
  TableRowsPerPageSelect,
  TableScrollArea,
  TableStatusDot,
  TableToolbar,
  TrashBinIcon,
  UsersIcon,
} from "@fanvue/ui";

const TABLE_MEDIA_SRC =
  "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=112&h=160&fit=crop";

function Example() {
  const [page, setPage] = React.useState(2);
  return (
    <TableCard className="max-w-4xl">
      <TableToolbar>
        <span className="typography-description-12px-regular text-content-primary">
          2 selected
        </span>
        <div className="flex flex-wrap gap-1">
          <Button variant="tertiary" size="32" leftIcon={<UsersIcon className="size-3.5" />}>
            Assign to creators
          </Button>
          <Button
            variant="tertiaryDestructive"
            size="32"
            leftIcon={<TrashBinIcon className="size-3.5" />}
          >
            Delete
          </Button>
        </div>
      </TableToolbar>
      <TableScrollArea>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead intent="checkbox">
                <Checkbox size="16" aria-label="Select all rows" />
              </TableHead>
              <TableHead>Date</TableHead>
              <TableHead>Title</TableHead>
              <TableHead>Preview</TableHead>
              <TableHead>Channel</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {["Feb 18, 2025, 4:19 PM", "Feb 17, 2025, 2:00 PM", "Feb 16, 2025, 9:30 AM"].map(
              (date) => (
                <TableRow key={date}>
                  <TableCell intent="checkbox">
                    <Checkbox size="16" aria-label={`Select row ${date}`} />
                  </TableCell>
                  <TableCell>{date}</TableCell>
                  <TableCell intent="multiline">
                    <TableLineClamp>
                      Placeholder description text for this row.{" "}
                      <button type="button" className="typography-description-12px-semibold">
                        Read more
                      </button>
                    </TableLineClamp>
                  </TableCell>
                  <TableCell>
                    <TableCellGroup>
                      <TableMediaThumbnail src={TABLE_MEDIA_SRC} alt="" />
                      <span>5</span>
                      <ChevronDownIcon
                        className="size-4 shrink-0 text-content-primary"
                        aria-hidden
                      />
                    </TableCellGroup>
                  </TableCell>
                  <TableCell>
                    <TableCellGroup>
                      <span
                        className="inline-block size-5 shrink-0 rounded bg-gradient-to-br from-pink-500 via-purple-500 to-orange-400"
                        aria-hidden
                      />
                      <span>5</span>
                      <ChevronDownIcon
                        className="size-4 shrink-0 text-content-primary"
                        aria-hidden
                      />
                    </TableCellGroup>
                  </TableCell>
                  <TableCell>
                    <TableStatusDot aria-hidden />
                  </TableCell>
                </TableRow>
              ),
            )}
          </TableBody>
        </Table>
      </TableScrollArea>
      <TablePagination
        leadingSlot={<TableRowsPerPageSelect />}
        paginationSlot={
          <Pagination className="pb-0" totalPages={5} currentPage={page} onPageChange={setPage} />
        }
        summary="20–30 of 100 rows"
      />
    </TableCard>
  );
}
```

## Props

## Table

Semantic `<table>` element. Place inside `TableScrollArea`.

Takes no props of its own. Accepts all standard `table` attributes, including `className`.

## TableBody

`<tbody>` wrapper. Removes the bottom border on cells in the final row to match the Figma `V2 Table Final Row` treatment.

Takes no props of its own. Accepts all standard `thead/tbody/tfoot` attributes, including `className`.

## TableCard

Surface wrapper for data tables: rounded 24px container with a strong outer border, inner spacing, and size context for `TableCell` descendants. Compose with `TableScrollArea`, `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, and `TableCell`.

<ParamField path="size" type="&#x22;default&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;condensed&#x22;" default="48">
  Row density applied to `TableCell` descendants.
</ParamField>

## TableCell

Body cell. v2: `h-16` (or `h-20` when the parent `TableCard` uses `size="lg"`), `px-4 py-3` padding, body-sm typography, and a single `border-border-primary` rule that is zeroed by `TableBody` for the final row.

<ParamField path="cellVariant" type="&#x22;default&#x22; | &#x22;chip&#x22; | &#x22;pillProgress&#x22;" default="default">
  Padding preset for the cell. v2 uses identical padding across variants; values are kept for back-compat.
</ParamField>

<ParamField path="intent" type="&#x22;checkbox&#x22; | &#x22;default&#x22; | &#x22;stacked&#x22; | &#x22;multiline&#x22; | &#x22;sideLabel&#x22;" default="default">
  Alignment and typography preset for common cell types.
</ParamField>

## TableCellContent

Two-line content slot matching Figma `V2 Table Content` — primary line (semibold) over an optional secondary line (regular, muted) with a 2px gap. Use inside `TableCell` for the common stacked-text pattern.

<ParamField path="primary" type="ReactNode" required>
  Primary line (semibold body-sm).
</ParamField>

<ParamField path="className" type="string">
  Class for the outer wrapper.
</ParamField>

<ParamField path="primaryAdornment" type="ReactNode">
  Inline node rendered next to the primary line (icon, chip).
</ParamField>

<ParamField path="secondary" type="ReactNode">
  Optional secondary line (regular body-sm, secondary color).
</ParamField>

<ParamField path="secondaryAdornment" type="ReactNode">
  Inline node rendered next to the secondary line.
</ParamField>

## TableCellGroup

Horizontal group for icons, chips, and metadata inside a `TableCell` (Figma `gap-[4px]`).

Takes no props of its own. Accepts all standard `div` attributes, including `className`.

## TableFooter

Takes no props of its own. Accepts all standard `thead/tbody/tfoot` attributes, including `className`.

## TableHead

Header cell. v2: transparent background, 48px min height, tertiary text, `border-border-primary` bottom rule. Uses 16px semibold type, or 14px when the parent `TableCard` is `size="condensed"`.

<ParamField path="intent" type="&#x22;sort&#x22; | &#x22;checkbox&#x22; | &#x22;default&#x22; | &#x22;leading&#x22;" default="default">
  Layout preset for common column types.
</ParamField>

## TableHeader

Takes no props of its own. Accepts all standard `thead/tbody/tfoot` attributes, including `className`.

## TableLineClamp

Clamps child text to a fixed number of lines inside a `TableCell`.

<ParamField path="lines" type="1 | 2 | 3" default="2">
  Number of lines before ellipsis.
</ParamField>

## TableMediaThumbnail

Square thumbnail used inside `TableCell` for media columns (Figma `V2 Media Thumbnail Item`).

<ParamField path="src" type="string" required>
  Image URL.
</ParamField>

<ParamField path="align" type="&#x22;center&#x22; | &#x22;start&#x22;" default="start">
  `center` uses the fixed media column width from the lg spec.
</ParamField>

<ParamField path="alt" type="string">
  Alt text for the image.
</ParamField>

<ParamField path="blurred" type="boolean" default="false">
  Applies the table's blurred-media treatment.
</ParamField>

<ParamField path="size" type="&#x22;32&#x22; | &#x22;48&#x22;" default="48">
  Pixel size of the square thumbnail; `"32"` matches the current Figma `V2 Media Thumbnail Item`.
</ParamField>

## TablePagination

Footer bar for data tables: rows-per-page control, page navigation, and range summary. Pair `paginationSlot` with `Pagination` for numbered controls.

v2 sits flush inside `TableCard` (`px-3` matches the card's inner gutter); the chip styling now lives on the `TableRowsPerPageSelect` trigger itself.

<ParamField path="summary" type="ReactNode" required>
  Summary text or node (e.g. current range and total).
</ParamField>

<ParamField path="layout" type="&#x22;mobile&#x22; | &#x22;desktop&#x22;" default="desktop">
  Layout preset.
</ParamField>

<ParamField path="leadingSlot" type="ReactNode">
  Left (desktop) or top row (mobile) content, e.g. rows-per-page `Select`.
</ParamField>

<ParamField path="paginationSlot" type="ReactNode">
  Center (desktop) or bottom row (mobile) content, e.g. `Pagination`.
</ParamField>

## TablePillProgressLayout

Vertical layout for pill label + `TableProgressTrack` in a cell.

Takes no props of its own. Accepts all standard `div` attributes, including `className`.

## TableProgressTrack

Thin progress track used with badges in table cells (Figma pill + progress). Renders with `role="progressbar"` and a default `aria-label` of `"Progress"`.

<ParamField path="value" type="number" default="0">
  Fill width from 0–100.
</ParamField>

## TableRow

Takes no props of its own. Accepts all standard `tr` attributes, including `className`.

## TableRowsPerPageSelect

Rows-per-page `Select` styled for `TablePagination`. v2 uses a subtle pill trigger with the table's secondary-surface background.

<ParamField path="aria-label" type="string" default="Progress">
  Accessible name for the trigger when no visible label.
</ParamField>

<ParamField path="id" type="string">
  Passed to the trigger for forms and labels.
</ParamField>

## TableScrollArea

Horizontal scroll container for wide tables. The inner scrollport keeps `border-collapse` styles intact when the table wraps.

<ParamField path="roundTop" type="boolean" deprecated>
  No longer needed in v2 — `TableCard` handles corner rounding via its own `overflow-hidden rounded-3xl`. Accepted for back-compat.

  **Deprecated.** v2 ignores this prop; safe to remove.
</ParamField>

<ParamField path="showScrollbar" type="boolean" default="false">
  Shows a slim horizontal scrollbar beneath the table when the content overflows (Figma `V2 Scroll Bar`).
</ParamField>

## TableSortLabel

Sortable column label. v2 expresses the sort state with a 1px underline beneath the label plus a directional arrow when sorted.

<ParamField path="direction" type="TableSortDirection">
  Visual indicator of the column's sort state. When set to `"asc"` or `"desc"`, a 1px underline accent appears beneath the label and a small directional arrow is shown next to it.
</ParamField>

## TableStackedText

Two-line primary + secondary text block for "cell + info" patterns.

<ParamField path="subtitle" type="ReactNode" required>
  Secondary line (caption, muted).
</ParamField>

<ParamField path="title" type="ReactNode" required>
  Primary line (semibold body).
</ParamField>

## TableStatusDot

Small status indicator dot for table cells (Figma status column).

Takes no props of its own. Accepts all standard `div` attributes, including `className`.

## TableToolbar

Optional toolbar row above the table (e.g. bulk selection actions).

Takes no props of its own. Accepts all standard `div` attributes, including `className`.

## Exported types

Also exported from `@fanvue/ui`: `TableBodyProps`, `TableCardProps`, `TableCellContentProps`, `TableCellGroupProps`, `TableCellIntent`, `TableCellProps`, `TableCellVariant`, `TableFooterProps`, `TableHeaderProps`, `TableHeadIntent`, `TableHeadProps`, `TableLineClampProps`, `TableMediaThumbnailProps`, `TableMediaThumbnailSize`, `TablePaginationLayout`, `TablePaginationProps`, `TablePillProgressLayoutProps`, `TableProgressTrackProps`, `TableProps`, `TableRowProps`, `TableRowsPerPageSelectProps`, `TableScrollAreaProps`, `TableSize`, `TableSortDirection`, `TableSortLabelProps`, `TableStackedTextProps`, `TableStatusDotProps`, `TableToolbarProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)