Table

Expressive table component with consumer-defined headers and cell rendering logic.

table/01-table-basic-table
import { Table } from 'ui-lab-components/table';

export const metadata = {
  title: 'Basic Table',
  description: 'A simple data table displaying structured information with columns and rows. Use this for displaying tabular data in your application.'
};

export default function Example() {
  const data = [
    { id: 1, name: 'Alice Johnson', email: 'alice@example.com', status: 'Active' },
    { id: 2, name: 'Bob Smith', email: 'bob@example.com', status: 'Inactive' },
    { id: 3, name: 'Carol White', email: 'carol@example.com', status: 'Active' }
  ];

  return (
    <Table
      data={data}
      columns={[
        { key: 'id', label: 'ID' },
        { key: 'name', label: 'Name' },
        { key: 'email', label: 'Email' },
        { key: 'status', label: 'Status' }
      ]}
    />
  );
}
UI Lab