SERP UI logo
SERPUI
Docs
Table

Table

The Table component provides a foundational structure for displaying data in a tabular format, designed to be responsive and adaptable across various screen sizes.

Loading...

Setting Up the Table Component

npx shadcn@latest add table

Implementing the Table Component

  Table, // The main container for the table
  TableBody, // Contains the rows of data
  TableCaption, // A descriptive caption for the table
  TableCell, // Represents a single cell in a table row
  TableHead, // Represents a header cell in the table header
  TableHeader, // Contains the header row(s) of the table
  TableRow, // Represents a single row in the table
} from "@/components/ui/table";
<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Building Advanced Data Tables

The <Table /> component serves as an excellent foundation for constructing more sophisticated data tables. By integrating it with a powerful library like @tanstack/react-table, you can easily add advanced features such as sorting, filtering, and pagination to your tables.

For detailed guidance on building data tables, please refer to the dedicated Data Table documentation.

Additionally, you can explore a practical implementation of a data table in the Tasks demo example.

SwitchTabs
    Table