Table

Tables are used to render tabular data in a basic grid, making it easier for people to scan it. Tables are comprised of cells, columns, and rows.

Properties

Table

Name	Type	Default
rowStyle	lines \| zebra \| blank Row style (background colors, borders, etc.) for the table
rowSize	large \| normal \| small \| <string> (any valid CSS <td> height value) The height of the table rows. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/height	normal
columnSpace	normal \| small \| <string> (any valid CSS <td> padding value) The space between columns of the table (any CSS value will be divided by 2 using `calc`).	normal

The Table supports margin, width and height styled-system props.

TableRow

Name	Type	Default
active	boolean Triggers the active (click, press, tap, etc.) state styling on the table row	false
hover	boolean Triggers the hover state styling on the table row	false

TableHeaderCell

The TableHeaderCell supports textAlign and layout styled-system props.

TableCell

The TableCell supports textAlign and layout styled-system props.

TableRowSkeleton

Name	Type	Default
columns	number (integer) The number of columns to simulate.	0
animated	boolean Controls wether the Skeleton animation should play.	undefined

Examples

rowStyle

columnSpace

rowSize

<Table rowStyle="zebra" />

The wonderful Wave list
Creation Date / Activity	Name	City	Phone	E-Mail
5 July 2019 - 11:14 No activity yet	Leander Klein	New	+4915127182377	leander.klein@free-now.com
31 January 2020 - 02:48 No activity yet	Marc Berg	Active	+4915139912828	m.berg@free-now.com
27 February 2020 - 16:02 17 Tours	Ecki Diepenhorst	Active	+4915139912828	e.diepenhorst@free-now.com
30 March 2020 - 18:19 17 Tours	John Doe	Fraud	+491672182732	j.doe@free-now.com

<Table rowStyle="zebra">
    <caption style={{ captionSide: 'bottom', padding: '1rem' }}>The wonderful Wave list</caption>
    <thead>
        <TableRow>
            <TableHeaderCell scope="col">Name</TableHeaderCell>
            <TableHeaderCell scope="col">E-Mail</TableHeaderCell>
        </TableRow>
    </thead>
    <tbody>
        <TableRow>
            <TableCell scope="row">Luka Hartwig</TableCell>
            <TableCell>l.hartwig@mytaxi.com</TableCell>
        </TableRow>
        <TableRow>
            <TableCell scope="row">Alba Gonzales</TableCell>
            <TableCell>alba.gonzales@free-now.com</TableCell>
        </TableRow>
        <TableRow>
            <TableCell scope="row">Alexis Duran</TableCell>
            <TableCell>alexis.duran@free-now.com</TableCell>
        </TableRow>
    </tbody>
</Table>

Tables are not width 100% by default, if required, you must set width: 100% to the Table Component. To better understand some of the props in the above table, an in-depth guide of accessible tables can be found at https://a11y-101.com/development/tables

Active Row

To highlight an active (or selected) row, you can add set active to true on the TableRow component. This will mark the row as active and change the background color.

Name	E-Mail	Role	Cost Center
Alex Ponomarenko	a.ponomarenko@mytaxi.com	Booker	Product
Britta Rothenhäuser	b.rothenhaeuser@mytaxi.com	Passenger	-
Luka Hartwig	luka.hartwig@free-now.com	Admin	Design System
Jonah Möller	j.moeller@mytaxi.com	Admin	Design System

<TableRow active={true}>
    <TableCell><Checkbox checked={true} /></TableCell>
    <TableCell>Alex Ponomarenko</TableCell>
    <TableCell>a.ponomarenko@mytaxi.com</TableCell>
    <TableCell>Booker</TableCell>
    <TableCell>Product</TableCell>
</TableRow>

Complex Data

When dealing with complex data, it is possible to use up to two lines of text in one row. Keep in mind, that the smallest row size will not work when you have multiple lines in one cells.

Type	ID	State	Pickup	Destination	Driver Name	Request / Pickup	Fare
AdHoc	6189N	Accomplished	Große Elbstraße 273 22767 Hamburg	Holsteiner Chaussee 191 22457 Hamburg	DE Hans DE Taximann	13 Mar 2020 - 02:25 PM 13 Mar 2020 - 02:25 PM	2.52 EUR
Advanced	5V1GM	Canceled (SER)	Große Elbstraße 273 22767 Hamburg			13 Feb 2020 - 11:26 AM
Hop On	5FUET	Accomplished	Große Elbstraße 273 22767 Hamburg	Große Elbstraße 273 22767 Hamburg	Hans Taximann	12 Dec 2019 - 03:14 PM 12 Dec 2019 - 03:14 PM	18.40 EUR

Loading State

Show loading state

Creation Date / Activity	Name	Status	Phone	E-Mail	Actions

<Table rowStyle="zebra">
    <thead>
        <TableRow>
            <TableHeaderCell style={{ width: '10rem', whiteSpace: 'normal' }}>Creation Date / Activity</TableHeaderCell>
            <TableHeaderCell style={{ width: '6.5rem' }}>Name</TableHeaderCell>
            <TableHeaderCell style={{ width: '3rem' }}>Status</TableHeaderCell>
            <TableHeaderCell style={{ width: '7.5rem' }}>Phone</TableHeaderCell>
            <TableHeaderCell style={{ width: '13rem' }}>E-Mail</TableHeaderCell>
            <TableHeaderCell style={{ width: '6.5rem' }}>Actions</TableHeaderCell>
        </TableRow>
    </thead>
    <tbody>
        {loading && [0, 1, 2, 3, 4].map(key => <TableRowSkeleton key={key} columns={6} />)}
    </tbody>
</Table>

By default cells has whiteSpace set to nowrap which will make cells expand depending on the content instead the given width. If you really want to fix a width make sure to override whiteSpace property too. On top of that make sure to check your table a11y. An in-depth guide of accessible tables can be found at https://a11y-101.com/development/tables