Table
The Table component lets you display a table of data. Like the list components, you can pass data (an array of objects) to the table to iterate over.
How to use
Like the list components, you can pass data (an array of objects) to the table to iterate over, but there's no Triggers. It has several Config props to help customize things like padding and border.
Inside the Table, you can nest Table Row components. These have some of their own Config props to further customize padding and border. You can also set a Table Row to be the header for the Table.
And finally inside the Table Row you can nest the Table Cells. These components have most of the same style props as a View in addition to some Config props for the border.
Some prop values are passed down the child tree. For example, when you set the "Border Width" prop on the Table, that will be applied to all Table Rows and Cells. This value can then be overridden at the Row level or the Cell level. The props that have this effect are described as such in the prop descriptions.
Configuration Properties
| Property | Description |
|---|---|
| Component name | The name of the component as it appears in the Screen's component tree |
| Border width | Specifies the width of the border. Passed down to child Table(Row/Cell) components unless overridden |
| Show vertical scroll indicator | When true, shows a vertical scroll indicator. The default value is true. |
| Draw top border | Whether to draw the top border at this layer of the Table tree or not |
| Draw bottom border | Whether to draw the bottom border at this layer of the Table tree or not |
| Draw start border | Whether to draw the start border at this layer of the Table tree or not |
| Cell vertical padding | Specifies the vertical padding of the cell. Passed down to TableCell components unless overridden |
| Cell horizontal padding | Specifies the horizontal padding of the cell. Passed down to TableCell components unless overridden |
| Draw border | Whether to draw the end border at this layer of the Table tree or not |
| Border color | Specifies the color of the border. Passed down to child Table(Row/Cell) components unless overridden |
| Border style | Specifies the style of the border. Passed down to child Table(Row/Cell) components unless overridden |
Data Properties
| Property | Description |
|---|---|
| Data | The data to render in the table as an array of objects |
Updated 2 months ago