Table

import { Table } from '@froglet/ui'
import type { TableColumn } from '@froglet/ui'
 
type Row = { name: string; role: string; status: string }
 
const columns: TableColumn<Row>[] = [
  { key: 'name', label: 'Name' },
  { key: 'role', label: 'Role' },
  { key: 'status', label: 'Status' },
]
 
const data: Row[] = [
  { name: 'Alice Martin', role: 'Engineer', status: 'Active' },
  { name: 'Bob Chen', role: 'Designer', status: 'Active' },
]
 
<Table columns={columns} data={data} caption="Team members" />
 
// Themed
<Table className="table--froglet" columns={columns} data={data} caption="Team members" />
 
// Custom cell render
const columns: TableColumn<Row>[] = [
  { key: 'name', label: 'Name' },
  {
    key: 'status',
    label: 'Status',
    render: (value) => <strong>{String(value)}</strong>,
  },
]