Table Cell
The Table Cell component is nested inside the Table Row to render the columnar data.
How to use
Inside the Table Row you can nest the Table Cells. Table Cell most of the same style props as a View in addition to some Config props for the border. Inside it you can add other child components such as a Text, Button, or Icon to fill out your Table.
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.
Style Properties
Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.
Component Specific Styles
| Property | Description |
|---|---|
| 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 start border | Whether to draw the start border at this layer of the Table tree or not |
| Draw end border | Whether to draw the end border at this layer of the Table tree or not |
| Border width | Specifies the width 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 |
| 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 |
| Border color | Specifies the color of the border. Passed down to child Table(Row/Cell) components unless overridden |
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 |
Data Properties
Conditional Display
You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.
Triggers
| Trigger | Description |
|---|---|
| On Press | Runs the Actions when the element is pressed |
Updated 6 months ago