Tabellenkomponente für Stripe-Apps

<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>