Last updated Nov 4, 2020

Table

A table that displays data and other components.

Screenshot of a rendered table

Usage notes

This component can't contain another Table component within itself.

Import statement

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

Props

NameTypeRequiredDescription
TableHead | Array<Row>YesTop-level component of a table.
HeadArray<Cell>YesContainer of cells for the heading row of the table. A table can only contain one Head.
RowArray<Cell>YesContainer of cells for a row of the table.
rowsPerPagenumberNoMaximum number of rows shown in the table before pagination is automatically enabled. Defaults to 25. Set to 0 to disable automatic pagination.
CellForgeComponentYesCell can contain any value or component, except a Table component.

Example

1
2
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 />} />);

Rate this page: