UIPackage
Vue React

Table

React data-display
Edit on GitHub

Plain HTML table primitives — `<Table>`, `<TableHeader>`, `<TableRow>`, `<TableCell>` — with the registry’s borders, padding, and tokens already applied. Use this when Data Table is too heavy.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://react.uipkge.dev/r/react/table.json

Or with the named registry: npx shadcn@latest add @uipkge-react/table

Examples

Props

Name Type / Values Default Required
density

hatches for high-density admin lists and roomy patient-facing views.

 'compact' | 'cozy' | 'comfortable' — optional

Dependencies

@tanstack/react-table

Used by

data-table

Files (3)

  • components/ui/table/table.tsx 4.6 kB 
    import * as React from 'react'
import { cn } from '@/lib/utils'

export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
  // Match DataTable's density enum so consumers can opt into the same
  // runtime feel without wiring DataTable. `cozy` is the canonical default
  // for bare tables (cells: py-2, head: h-10); the other two are escape
  // hatches for high-density admin lists and roomy patient-facing views.
  density?: 'compact' | 'cozy' | 'comfortable'
}

const Table = React.forwardRef<HTMLTableElement, TableProps>(({ className, density, ...props }, ref) => {
  const densityClass =
    density === 'compact'
      ? '[&_td]:py-1.5 [&_td]:text-xs [&_th]:h-8 [&_th]:text-xs'
      : density === 'comfortable'
        ? '[&_td]:py-3 [&_th]:h-12'
        : // cozy is the new TableCell/TableHead baseline (py-2 / h-10) -- no override.
          ''

  return (
    <div data-uipkge="" data-slot="table-container" className="relative w-full overflow-auto">
      <table
        ref={ref}
        data-uipkge=""
        data-slot="table"
        className={cn('w-full caption-bottom text-sm', densityClass, className)}
        {...props}
      />
    </div>
  )
})
Table.displayName = 'Table'

const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <thead ref={ref} data-uipkge="" data-slot="table-header" className={cn('bg-muted/50 [&_tr]:border-b', className)} {...props} />
  ),
)
TableHeader.displayName = 'TableHeader'

const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tbody ref={ref} data-uipkge="" data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />
  ),
)
TableBody.displayName = 'TableBody'

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot
      ref={ref}
      data-uipkge=""
      data-slot="table-footer"
      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
      {...props}
    />
  ),
)
TableFooter.displayName = 'TableFooter'

const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
  ({ className, ...props }, ref) => (
    <tr
      ref={ref}
      data-uipkge=""
      data-slot="table-row"
      className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors duration-150', className)}
      {...props}
    />
  ),
)
TableRow.displayName = 'TableRow'

const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <th
      ref={ref}
      data-uipkge=""
      data-slot="table-head"
      className={cn(
        'text-foreground h-10 px-3 text-left align-middle text-sm font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  ),
)
TableHead.displayName = 'TableHead'

const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <td
      ref={ref}
      data-uipkge=""
      data-slot="table-cell"
      className={cn(
        'px-3 py-2 align-middle text-sm whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  ),
)
TableCell.displayName = 'TableCell'

const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
  ({ className, ...props }, ref) => (
    <caption
      ref={ref}
      data-uipkge=""
      data-slot="table-caption"
      className={cn('text-muted-foreground mt-4 text-sm', className)}
      {...props}
    />
  ),
)
TableCaption.displayName = 'TableCaption'

export interface TableEmptyProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
  colSpan?: number
}

const TableEmpty = React.forwardRef<HTMLTableCellElement, TableEmptyProps>(
  ({ className, colSpan = 1, children, ...props }, ref) => (
    <TableRow>
      <TableCell
        ref={ref}
        colSpan={colSpan}
        className={cn('text-foreground p-4 align-middle text-sm whitespace-nowrap', className)}
        {...props}
      >
        <div className="flex items-center justify-center py-10">{children}</div>
      </TableCell>
    </TableRow>
  ),
)
TableEmpty.displayName = 'TableEmpty'

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
  TableEmpty,
}
  • components/ui/table/utils.ts 0.3 kB 
    import type { Updater } from '@tanstack/react-table'
import type { Dispatch, SetStateAction } from 'react'

export function valueUpdater<T>(updaterOrValue: Updater<T>, setValue: Dispatch<SetStateAction<T>>) {
  setValue((old) => (typeof updaterOrValue === 'function' ? (updaterOrValue as (old: T) => T)(old) : updaterOrValue))
}
  • components/ui/table/index.ts 0.2 kB 
    export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
  TableEmpty,
  type TableProps,
  type TableEmptyProps,
} from './table'

Raw manifest: https://react.uipkge.dev/r/react/table.json