Skip to Content
FrontendBundlesComponentsUI PrimitivesTable

Table

Semantic HTML table components with Tailwind styling. Use for structured data display.

Import

import {
  Table, TableHeader, TableBody, TableFooter,
  TableRow, TableHead, TableCell, TableCaption,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Table";

Sub-components

ComponentHTML ElementDescription
Table<table>Root — also accepts parentClassName for wrapper div
TableHeader<thead>Header section
TableBody<tbody>Body section
TableFooter<tfoot>Footer section
TableRow<tr>Table row
TableHead<th>Header cell
TableCell<td>Data cell
TableCaption<caption>Accessible table caption

Usage

import {
  Table, TableHeader, TableBody, TableRow,
  TableHead, TableCell, TableCaption,
} from "...";
 
<Table>
  <TableCaption>Recent Invoices</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice #</TableHead>
      <TableHead>Client</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((inv) => (
      <TableRow key={inv.id}>
        <TableCell>{inv.number}</TableCell>
        <TableCell>{inv.client}</TableCell>
        <TableCell className="text-right">${inv.total}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>
Last updated on
CardSeparator