Table

A responsive table component for displaying data in rows and columns.

CMSPayload CMS Integration

Tables can display CMS-managed data collections with sortable columns, pagination, and localized headers managed by content editors.

CMS Demo

See how content editors configure tables in a CMS:

Recent orders
Order	Customer	Status	Amount
#1001	John Doe	Delivered	$120.00
#1002	Jane Smith	Processing	$85.00
#1003	Bob Johnson	Shipped	$200.00

CMS FieldsEN

Caption

Rows (3)

Show Caption

This simulates how a content editor manages table data in Payload CMS. Headers and captions can be localized.

CMS ConfigurationSimulates Payload CMS table configuration with data management

Payload Block Example

// In your Payload CMS blocks config
export const TableBlock = {
  slug: "table",
  fields: [
    { name: "caption", type: "text", localized: true },
    {
      name: "columns",
      type: "array",
      fields: [
        { name: "header", type: "text", localized: true, required: true },
        { name: "accessor", type: "text", required: true },
      ],
    },
    {
      name: "rows",
      type: "array",
      fields: [
        { name: "data", type: "json" },
      ],
    },
  ],
}

Rendering the Table

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from "@mordecai-design-system/ui"

export function DataTable({ caption, columns, rows }) {
  return (
    <Table>
      {caption && <TableCaption>{caption}</TableCaption>}
      <TableHeader>
        <TableRow>
          {columns.map((col) => (
            <TableHead key={col.accessor}>{col.header}</TableHead>
          ))}
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row, i) => (
          <TableRow key={i}>
            {columns.map((col) => (
              <TableCell key={col.accessor}>
                {row.data[col.accessor]}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Basic Usage

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
Total			$1,750.00

TableData table with styled rows

Installation

pnpm add @corew500/ui

Usage

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
} from "@mordecai-design-system/ui"

<Table>
  <TableCaption>A list of recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

With Footer

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Product</TableHead>
      <TableHead>Quantity</TableHead>
      <TableHead>Price</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {items.map((item) => (
      <TableRow key={item.id}>
        <TableCell>{item.name}</TableCell>
        <TableCell>{item.quantity}</TableCell>
        <TableCell>{item.price}</TableCell>
      </TableRow>
    ))}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Total</TableCell>
      <TableCell>{total}</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Sub-components

| Component | Description | |-----------|-------------| | Table | Root container with scroll | | TableHeader | Header row container | | TableBody | Body rows container | | TableFooter | Footer row container | | TableHead | Header cell | | TableRow | Table row with hover states | | TableCell | Table data cell | | TableCaption | Table description |

Props

All Table components extend their native HTML element props (table, thead, tbody, tr, th, td).

TableRow

Use data-state="selected" to highlight a row:

<TableRow data-state="selected">
  <TableCell>Selected row content</TableCell>
</TableRow>