Table
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:
<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: 'bodyEmphasized'}}>Total</Inline> </TableCell> <TableCell> <Inline css={{font: 'bodyEmphasized'}}>$260.40</Inline> </TableCell> </TableRow> </TableFooter> </Table>
Sub-components
TableBody
The TableBody
component contains the rows and cells in a table.
TableCell
The TableCell
component contains one unit of information in a table corresponding to a row and column.
TableFooter
The TableFooter
component summarizes or aggregates the columns of information contained in a table.
TableHead
The TableHead
component describes the columns of information contained in a table.
TableHeaderCell
The TableHeaderCell
component describes one column of information in a table.
TableRow
The TableRow
component is an entry in a table composed of cells containing information for each column.