Table

Data table with custom headers and cells.

import { Table } from 'ui-lab-components/table';
Rows3
import { Table } from 'ui-lab-components/table';
 
const people = [
  { 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' },
];
 
export default function Example() {
  return (
    <Table
      data={people}
      columns={[
        { key: 'id', header: 'ID' },
        { key: 'name', header: 'Name' },
        { key: 'email', header: 'Email' },
        { key: 'status', header: 'Status' },
      ]}
    />
  );
}

table/01-basic-table

A simple data table displaying structured information with columns and rows. Use this for displaying tabular data in your application.

Loading interactive preview
import { Table } from 'ui-lab-components/table';
 
 
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' }
      ]}
    />
  );
}