Table (Experimental)

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.

<Table rowStyle="zebra" />
The wonderful Wave list
Creation Date / ActivityNameCityPhoneE-MailActions
5 July 2019 - 11:14
No activity yet
Leander KleinNew
 +4915127182377
 leander.klein@free-now.com
31 January 2020 - 02:48
No activity yet
Marc BergActive
 +4915139912828
 m.berg@free-now.com
27 February 2020 - 16:02
17 Tours
Ecki DiepenhorstActive
 +4915139912828
 e.diepenhorst@free-now.com
30 March 2020 - 18:19
17 Tours
John DoeFraud
 +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.

NameE-MailRoleCost CenterCustom Value
Alex Ponomarenkoa.ponomarenko@mytaxi.comBookerProduct
Britta Rothenhäuserb.rothenhaeuser@mytaxi.comPassenger-
Luka Hartwigluka.hartwig@free-now.comAdminDesign System
Jonah Möller j.moeller@mytaxi.comAdminDesign System
<TableRow active={true}>
<TableCell><Checkbox checked={true} />
<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.

TypeIDStatePickupDestinationDriver NameRequest / PickupFare
AdHoc6189NAccomplishedGroße Elbstraße 273
22767 Hamburg
Holsteiner Chaussee 191
22457 Hamburg
DE Hans DE Taximann13 Mar 2020 - 02:25 PM
13 Mar 2020 - 02:25 PM
2.52 EUR  
Advanced5V1GMCanceled (SER)Große Elbstraße 273
22767 Hamburg
13 Feb 2020 - 11:26 AM
Hop On5FUETAccomplishedGroße Elbstraße 273
22767 Hamburg
Große Elbstraße 273
22767 Hamburg
Hans Taximann12 Dec 2019 - 03:14 PM
12 Dec 2019 - 03:14 PM
18.40 EUR  

Loading State

Creation Date / ActivityNameStatusPhoneE-MailActions
<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={2} />)}
</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