Table

Data table with headers and rows

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

pnpm add @corew500/ui

import { Table } from "@corew500/ui/table"

<Table>Content</Table>

Full-featured data table with sorting, filtering, and pagination.

Rows per page

Page 1 of 3

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

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.

Prop	Type	Default	Description
`containerProps`	DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>	—	Props forwarded to the wrapper `<div>` that provides scrolling and the `region` landmark. Use this to override the default `role`, `aria-label`, `tabIndex`, or `className` on the container. @example Override the accessible label ```tsx <Table containerProps={{ "aria-label": "Invoice history" }}>…</Table> ```