Docs
Table

Table

Displays sets of data across rows and columns.

A list of recent contributions.
NameTeamRoleContributions
Heike HonterBeentoo Inc.Admin$250.00
Rediwald RiedelRobbyHobbyMember$150.00
Parzival PfeifferLanghals GmbHMember$350.00
Ruprecht BaderBeentoo Inc.Paid$450.00
Josefine BuraltiRobbyHobbyPaid$550.00
Billy BeutelLanghals GmbHPending$200.00
Yvanka YildizBeentoo Inc.Unpaid$300.00

Installation

npm install @brudi/react-table

Usage

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@brudi/react-table"
<Table>
  <TableCaption>A list of recent contributions.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[140px]">Name</TableHead>
      <TableHead>Team</TableHead>
      <TableHead>Role</TableHead>
      <TableHead className="text-right">Contributions</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">Rendolin Burger</TableCell>
      <TableCell>Beentoo Inc.</TableCell>
      <TableCell>Member</TableCell>
      <TableCell className="text-right">$225.35</TableCell>
    </TableRow>
  </TableBody>
</Table>

Data Table

You can use the <Table /> component to build more complex data tables. Combine it with @tanstack/react-table to create tables with sorting, filtering and pagination.

See the Data Table documentation for more information.

List and Virtual List

You can use the <List /> component to build more complex data tables. Combine it with @tanstack/react-virtual to virtualize only the visible DOM nodes within massive scrollable elements.

See the List and Virtual List documentation for more information.

Customization

npx @brudi/ui extend table

SwitchTabs