Fanvue API Documentation

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

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)

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

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

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 />;
}

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.

"default" | "md" | "lg" | "condensed"

default:"48"

Row density applied to TableCell descendants.

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.

"default" | "chip" | "pillProgress"

default:"default"

Padding preset for the cell. v2 uses identical padding across variants; values are kept for back-compat.

"checkbox" | "default" | "stacked" | "multiline" | "sideLabel"

default:"default"

Alignment and typography preset for common cell types.

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.

ReactNode

required

Primary line (semibold body-sm).

string

Class for the outer wrapper.

ReactNode

Inline node rendered next to the primary line (icon, chip).

ReactNode

Optional secondary line (regular body-sm, secondary color).

ReactNode

Inline node rendered next to the secondary line.

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".

"sort" | "checkbox" | "default" | "leading"

default:"default"

Layout preset for common column types.

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.

1 | 2 | 3

default:"2"

Number of lines before ellipsis.

TableMediaThumbnail

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

string

required

Image URL.

"center" | "start"

default:"start"

center uses the fixed media column width from the lg spec.

string

Alt text for the image.

boolean

default:"false"

Applies the table’s blurred-media treatment.

"32" | "48"

default:"48"

Pixel size of the square thumbnail; "32" matches the current Figma V2 Media Thumbnail Item.

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.

ReactNode

required

Summary text or node (e.g. current range and total).

"mobile" | "desktop"

default:"desktop"

Layout preset.

ReactNode

Left (desktop) or top row (mobile) content, e.g. rows-per-page Select.

ReactNode

Center (desktop) or bottom row (mobile) content, e.g. Pagination.

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".

number

default:"0"

Fill width from 0–100.

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.

string

default:"Progress"

Accessible name for the trigger when no visible label.

string

Passed to the trigger for forms and labels.

TableScrollArea

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

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.

boolean

default:"false"

Shows a slim horizontal scrollbar beneath the table when the content overflows (Figma V2 Scroll Bar).

TableSortLabel

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

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.

TableStackedText

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

ReactNode

required

Secondary line (caption, muted).

ReactNode

required

Primary line (semibold body).

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 · Theming

​Examples

​Default

​Variant — lg (80px rows)

​With scroll indicator

​Sortable header

​With toolbar (bulk select)

​Props

​Table

​TableBody

​TableCard

​TableCell

​TableCellContent

​TableCellGroup

​TableFooter

​TableHead

​TableHeader

​TableLineClamp

​TableMediaThumbnail

​TablePagination

​TablePillProgressLayout

​TableProgressTrack

​TableRow

​TableRowsPerPageSelect

​TableScrollArea

​TableSortLabel

​TableStackedText

​TableStatusDot

​TableToolbar

​Exported types

Examples

Default

Variant — lg (80px rows)

With scroll indicator

Sortable header

With toolbar (bulk select)

Props

Table

TableBody

TableCard

TableCell

TableCellContent

TableCellGroup

TableFooter

TableHead

TableHeader

TableLineClamp

TableMediaThumbnail

TablePagination

TablePillProgressLayout

TableProgressTrack

TableRow

TableRowsPerPageSelect

TableScrollArea

TableSortLabel

TableStackedText

TableStatusDot

TableToolbar

Exported types