Table

Table provides low-level primitives (TableHeader, TableBody, TableRow, TableHead, TableCell, and TableCaption) for building consistent, accessible data tables.

Use these primitives when you need full control over table markup and styling, or use DataGrid for richer behaviors like filtering, pagination, and view switching.

Preview

Usage

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from './table';

export function TableDemo() {
  return (
    <Table>
      <TableCaption>Current plan usage by workspace</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Workspace</TableHead>
          <TableHead>Plan</TableHead>
          <TableHead>Seats</TableHead>
          <TableHead className='text-right'>Monthly cost</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className='font-medium'>Brandit Core</TableCell>
          <TableCell>Growth</TableCell>
          <TableCell>18</TableCell>
          <TableCell className='text-right'>$249</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className='font-medium'>Support Ops</TableCell>
          <TableCell>Starter</TableCell>
          <TableCell>6</TableCell>
          <TableCell className='text-right'>$79</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className='font-medium'>Design System</TableCell>
          <TableCell>Pro</TableCell>
          <TableCell>11</TableCell>
          <TableCell className='text-right'>$159</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

API

Table(props): Element

Defined in: components/table/table.tsx:20

Table primitives for consistent, accessible tabular layouts.

Parameters

Returns

Element

A responsive table container and table element.

Source

import * as React from 'react';

import { cn } from '@branditdev/ui';

export type TableProps = React.ComponentProps<'table'>;
export type TableHeaderProps = React.ComponentProps<'thead'>;
export type TableBodyProps = React.ComponentProps<'tbody'>;
export type TableFooterProps = React.ComponentProps<'tfoot'>;
export type TableRowProps = React.ComponentProps<'tr'>;
export type TableHeadProps = React.ComponentProps<'th'>;
export type TableCellProps = React.ComponentProps<'td'>;
export type TableCaptionProps = React.ComponentProps<'caption'>;

function Table({ className, ...props }: TableProps) {
  return (
    <div
      data-slot='table-container'
      className='relative w-full overflow-x-auto'
    >
      <table
        data-slot='table'
        className={cn('w-full caption-bottom text-sm', className)}
        {...props}
      />
    </div>
  );
}

function TableHeader({ className, ...props }: TableHeaderProps) {
  return (
    <thead
      data-slot='table-header'
      className={cn('[&_tr]:border-b', className)}
      {...props}
    />
  );
}

function TableBody({ className, ...props }: TableBodyProps) {
  return (
    <tbody
      data-slot='table-body'
      className={cn('[&_tr:last-child]:border-0', className)}
      {...props}
    />
  );
}

function TableFooter({ className, ...props }: TableFooterProps) {
  return (
    <tfoot
      data-slot='table-footer'
      className={cn(
        'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
        className
      )}
      {...props}
    />
  );
}

function TableRow({ className, ...props }: TableRowProps) {
  return (
    <tr
      data-slot='table-row'
      className={cn(
        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
        className
      )}
      {...props}
    />
  );
}

function TableHead({ className, ...props }: TableHeadProps) {
  return (
    <th
      data-slot='table-head'
      className={cn(
        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
        className
      )}
      {...props}
    />
  );
}

function TableCell({ className, ...props }: TableCellProps) {
  return (
    <td
      data-slot='table-cell'
      className={cn(
        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
        className
      )}
      {...props}
    />
  );
}

function TableCaption({ className, ...props }: TableCaptionProps) {
  return (
    <caption
      data-slot='table-caption'
      className={cn('mt-4 text-sm text-muted-foreground', className)}
      {...props}
    />
  );
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
};