Table component for Stripe Apps
Display a table using the Table component.
To add the Table component to your app:
import {Table, TableBody, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow} from '@stripe/ui-extension-sdk/ui';
The following shows a preview of a Table component with a header, several rows of data, and a footer:
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} > <Table> <TableHead> <TableRow> <TableHeaderCell>Charge type</TableHeaderCell> <TableHeaderCell>Amount</TableHeaderCell> </TableRow> </TableHead> <TableBody> <TableRow> <TableCell>Setup fee</TableCell> <TableCell>$95.00</TableCell> </TableRow> <TableRow> <TableCell>Maintenance fee</TableCell> <TableCell>$50.45</TableCell> </TableRow> <TableRow> <TableCell>Extra storage space (per GB)</TableCell> <TableCell>$5.95</TableCell> </TableRow> <TableRow> <TableCell>Premium features</TableCell> <TableCell>$109.00</TableCell> </TableRow> </TableBody> <TableFooter> <TableRow> <TableCell> <Inline css={{font: 'heading'}}>Total</Inline> </TableCell> <TableCell> <Inline css={{font: 'heading'}}>$260.40</Inline> </TableCell> </TableRow> </TableFooter> </Table> </Box>
Table props
| Property | Type |
|---|---|
| Required
The contents of the component. |
Sub-components
TableBody
The TableBody component contains the rows and cells in a table.
TableBody props
| Property | Type |
|---|---|
| Required
The contents of the component. |
TableCell
The TableCell component contains one unit of information in a table corresponding to a row and column.
TableCell props
| Property | Type |
|---|---|
| Required
The contents of the component. |
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
TableFooter
The TableFooter component summarizes or aggregates the columns of information contained in a table.
TableFooter props
| Property | Type |
|---|---|
| Required
The contents of the component. |
TableHead
The TableHead component describes the columns of information contained in a table.
TableHead props
| Property | Type |
|---|---|
| Required
The contents of the component. |
TableHeaderCell
The TableHeaderCell component describes one column of information in a table.
TableHeaderCell props
| Property | Type |
|---|---|
| Required
The contents of the component. |
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
TableRow
The TableRow component is an entry in a table composed of cells containing information for each column.
TableRow props
| Property | Type |
|---|---|
| Required
The contents of the component. |