Rate this page:
A table that displays data and other components.
This component can't contain another Table
component within itself.
1 2import 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. |
1 2import 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: