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.

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