Table

Tables are one of the most basic things in web development and are used since the dawn of HTML. They are the most simple and elegant way of displaying structured data on a website.

A table naturally consists of rows and columns. In the HTML case, columns live inside of rows. So we don't want to speak of table columns anymore, but use the term cell.

How to use it

Import the Table wrapper from the design system like so:

import Table from "@finanzchef24gmbh/design-system/Table";

This object is a container for three renderable components, which you can use to build a table.

Table

The first of those is the main wrapper for every table. It rendered a table-tag in your html output. All rows have to live inside this wrapper.

<Table.Table>{/* rows of the table come here */}</Table.Table>

Row

This component renderes a tr HTML element and shall be used as wrapper for a row inside the table.

<Table.Table>
  <Table.Row>{/* first row */}</Table.Row>
  <Table.Row>{/* second row */}</Table.Row>
  <Table.Row>{/* third row */}</Table.Row>
</Table.Table>

Cell

This component renders a td HTML element—a single cell inside a row of the table. One could also call Table.Cell a single cell inside your table. Inside it you can basically render whatever you want (for example text, icons, buttons, etc.).

<Table.Table>
  <Table.Row>
    <Table.Cell>Hello World!</Table.Cell>
    <Table.Cell>
      <button>Click me!</button>
    </Table.Cell>
  </Table.Row>
</Table.Table>

This component also accepts props textAlign and verticalAlign. You can use those to align the content of the table cell in different orientations. The properties translate directly to the respective css-properties. For possible values take a look here for textAlign and here for verticalAlign.

We should also mention accessibility here. Screen readers should be able to differentiate between standard table cells and column or row headers. It is not enough to simply rely on different styling here! To achieve this within the design system there is an optional prop called isHeaderFor which accepts "row" or "column" as values. It should always be set on table cells that are headers for a row or column.

Divider

If you want to divide your table in two sections with a horizontal line you can use Table.Divider. This component expects a property called columns which specify the number of columns in your table.

<Table.Table>
  <Table.Row>{/* first row */}</Table.Row>
  <Table.Divider columns={3} />
  <Table.Row>{/* second row */}</Table.Row>
</Table.Table>

Example

<Spacings.Inset scale="big">
  <Table.Table>
    <Table.Row>
      <Table.Cell textAlign="start" verticalAlign="bottom" isHeaderFor="column">
        <Spacings.Inset>Column 1</Spacings.Inset>
      </Table.Cell>
      <Table.Cell
        textAlign="center"
        verticalAlign="middle"
        isHeaderFor="column"
      >
        <Spacings.Inset>Column 2</Spacings.Inset>
      </Table.Cell>
      <Table.Cell textAlign="end" isHeaderFor="column">
        <Spacings.Inset>Column 3</Spacings.Inset>
        <Spacings.Inset>Column 3 again!</Spacings.Inset>
        <Spacings.Inset>Column 3 yet another time...</Spacings.Inset>
      </Table.Cell>
    </Table.Row>
    <Table.Row textAlign="center">
      <Table.Cell isHeaderFor="row">
        <Spacings.Inset>Row 1 Column 1</Spacings.Inset>
      </Table.Cell>
      <Table.Cell>
        <Spacings.Inset>Row 1 Column 2</Spacings.Inset>
      </Table.Cell>
      <Table.Cell>
        <Spacings.Inset>Row 1 Column 3</Spacings.Inset>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell isHeaderFor="row">
        <Spacings.Inset>Row 2 Column 1</Spacings.Inset>
      </Table.Cell>
      <Table.Cell>
        <Spacings.Inset>Row 2 Column 2</Spacings.Inset>
      </Table.Cell>
      <Table.Cell>
        <Spacings.Inset>Row 2 Column 3</Spacings.Inset>
      </Table.Cell>
    </Table.Row>
    <Table.Divider columns={3} />
    <Table.Row>
      <Table.Cell isHeaderFor="row">
        <Spacings.Inset>Row 3 Column 1</Spacings.Inset>
      </Table.Cell>
      <Table.Cell>
        <Spacings.Inset>Row 3 Column 2</Spacings.Inset>
      </Table.Cell>
      <Table.Cell>
        <Spacings.Inset>Row 3 Column 3</Spacings.Inset>
      </Table.Cell>
    </Table.Row>
  </Table.Table>
</Spacings.Inset>