Tabelle
So fügen Sie Ihrer App die Table
Komponente hinzu:
import {Table, TableBody, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow} from '@stripe/ui-extension-sdk/ui';
Nachfolgend sehen Sie eine Vorschau einer Table
-Komponente mit einer Kopfzeile, mehreren Datenzeilen und einer Fußzeile:
<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>
Unter-Komponenten
TableBody
Die Komponente TableBody
enthält die Zeilen und Zellen einer Tabelle.
TableCell
Die Komponente TableCell
enthält eine Informationseinheit in einer Tabelle, die einer Zeile und Spalte entspricht.
TableFooter
Die Komponente TableFooter
fasst die in einer Tabelle enthaltenen Informationsspalten zusammen oder aggregiert sie.
TableHead
Die Komponente TableHead
beschreibt die Informationsspalten, die in einer Tabelle enthalten sind.
TableHeaderCell
Die Komponente TableHeaderCell
beschreibt eine Spalte mit Informationen in einer Tabelle enthalten.
TableRow
Die Komponente TableRow
ist ein Eintrag in einer Tabelle, die aus Zellen besteht, welche Informationen für jede Spalte enthalten.