Data display

Table

Data tables with uppercase column labels; scrolls horizontally on narrow screens.

import { Table, Th, Td } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Basic

A few schema fields
Field	Type	Status
`basics.name`	string	Stable
`work[].highlights`	string[]	Stable
`publications[].authors`	string[]	New

Show code

table/basic.tsx

import { Badge, Table, Td, Th } from '@jsonresume/ui';

const fields = [
  { name: 'basics.name', type: 'string', status: 'Stable' },
  { name: 'work[].highlights', type: 'string[]', status: 'Stable' },
  { name: 'publications[].authors', type: 'string[]', status: 'New' },
];

export default function TableBasic() {
  return (
    <Table caption="A few schema fields">
      <thead>
        <tr>
          <Th>Field</Th>
          <Th>Type</Th>
          <Th>Status</Th>
        </tr>
      </thead>
      <tbody>
        {fields.map((f) => (
          <tr key={f.name}>
            <Td>
              <code>{f.name}</code>
            </Td>
            <Td>{f.type}</Td>
            <Td>
              <Badge tone={f.status === 'New' ? 'brand' : 'neutral'}>
                {f.status}
              </Badge>
            </Td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

Accessibility

Th sets scope="col" by default.
Use caption to name the table.

Props

<Table>

Also accepts the attributes of the element Table renders.
Prop	Type	Default	Description
caption	ReactNode	–

<Th>

No props of its own; accepts the attributes of the element it renders.

<Td>

No props of its own; accepts the attributes of the element it renders.