Rate this page:
This component presents data and components in a grid format. It cannot contain another Table
component within itself.
1
import ForgeUI, { Table, Head, Row, Cell } from '@forge/ui';
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. |
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 />} />);
Rate this page: