BrutalLab UI
en
EnglishEspañol
PatternAvailable

Table

A semantic table with caption, headers, rows, and summary footer.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/table.json

Usage

Import the component into your project and keep the source code under your control.

tsx
'use client';

import {
  Table,
  TableCaption,
  TableHeader,
  TableHead,
  TableRow,
  TableBody,
  TableCell,
  TableFooter,
} from '@/components/ui/table';

export default function Demo() {
  return (
    <Table>
      <TableCaption>Component usage this month</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Component</TableHead>
          <TableHead>Status</TableHead>
          <TableHead className="text-right">Projects</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Button</TableCell>
          <TableCell>Available</TableCell>
          <TableCell className="text-right">12</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Card</TableCell>
          <TableCell>Available</TableCell>
          <TableCell className="text-right">8</TableCell>
        </TableRow>
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={2}>Total</TableCell>
          <TableCell className="text-right">20</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

  • The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
  • Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
  • Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

PropTypeDefaultDescription
classNamestring?Extends the root visual styles without changing its semantics.
childrenReactNode?Compose the exported subcomponents as shown in the runnable example.

Accessibility

Rules that should remain intact when adapting the component to a product.

Use a caption and header cells. Keep tables for tabular data rather than page layout.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.