Last updated Nov 23, 2022

This section describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

Table

To add the Table component to your app:

1
2
import { Table, Head, Row, Cell } from '@forge/react';

Description

A table that displays data and other components.

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

1
2
import { Table, Head, Cell, Text, Row } from '@forge/react';
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>
);

Output

Example image of rendered table