Tabellenkomponente für Stripe-Apps
Zeigen Sie eine mithilfe der Table-Komponente eine Tabelle an.
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:
<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>
Tabelleneigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
Unter-Komponenten
TableBody
Die Komponente TableBody enthält die Zeilen und Zellen einer Tabelle.
TableBody-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
TableCell
Die Komponente TableCell enthält eine Informationseinheit in einer Tabelle, die einer Zeile und Spalte entspricht.
TableCell-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
TableFooter
Die Komponente TableFooter fasst die in einer Tabelle enthaltenen Informationsspalten zusammen oder aggregiert sie.
TableFooter-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
TableHead
Die Komponente TableHead beschreibt die Informationsspalten, die in einer Tabelle enthalten sind.
TableHead-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
TableHeaderCell
Die Komponente TableHeaderCell beschreibt eine Spalte mit Informationen in einer Tabelle enthalten.
TableHeaderCell-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
TableRow
Die Komponente TableRow ist ein Eintrag in einer Tabelle, die aus Zellen besteht, welche Informationen für jede Spalte enthalten.
TableRow-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |