Tableau
Affichez un tableau en utilisant le composant Table.
Pour ajouter le composant Table
à votre application :
import {Table, TableBody, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow} from '@stripe/ui-extension-sdk/ui';
Voici un aperçu d’un composant Table
avec un en-tête, plusieurs lignes de données et un bas de page :
<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>
Sous-composants
TableBody
Le composant TableBody
contient les lignes et les cellules d’un tableau.
TableCell
Le composant TableCell
correspond aux données affichées dans l’une des cellules du tableau (à l’intersection entre une ligne et une colonne).
TableFooter
Le composant TableFooter
résume ou agrège les colonnes de données contenues dans un tableau.
TableHead
Le composant TableHead
décrit les colonnes de données contenues dans un tableau.
TableHeaderCell
Le composant TableHeaderCell
décrit une colonne de données au sein d’un tableau.
TableRow
Le composant TableRow
correspond à une entrée d’un tableau composé de cellules contenant des données pour chaque colonne.