Forge Developer

Forge Developer

Rate this page:

Table

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

Usage

1
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

A table app displaying issue keys and status.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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

Rate this page: