Table

This component presents data and components in a grid format. It cannot contain another Table component within itself.

Usage

import ForgeUI, { Table, Head, Row, Cell } from '@forge/ui';

Props

Name	Type	Required	Description
`Table`	`Head \| Array<Row>`	Yes	Top-level component of a table.
`Head`	`Array<Cell>`	Yes	Container of cells for the heading row of the table. A table can only contain one `Head`.
`Row`	`Array<Cell>`	Yes	Container of cells for a row of the table.
`rowsPerPage`	`number`	No	Maximum number of rows shown in the table before pagination is automatically enabled. Defaults to 25. Set to 0 to disable automatic pagination.
`Cell`	`ForgeComponent`	Yes	`Cell` can contain any value or component, except a `Table` component.

Example

A table app displaying issue keys and status.

import ForgeUI, { render, Macro, Table, Head, Cell, Text, Row } from '@forge/ui';

const issues = [
  {
    key: 'XEN-1',
    status: 'In Progress',
  },
  {
    key: 'XEN-2',
    status: 'To Do',
  },
];

const App = () => (
  <Table>
    <Head>
      <Cell>
        <Text>Issue Key</Text>
      </Cell>
      <Cell>
        <Text>Status</Text>
      </Cell>
    </Head>
    {issues.map(issue => (
      <Row>
        <Cell>
          <Text>{issue.key}</Text>
        </Cell>
        <Cell>
          <Text>{issue.status}</Text>
        </Cell>
      </Row>
    ))}
  </Table>
);

export const run = render(<Macro app={<App />} />);

Preview

Screenshot of the rendered table