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" />
Creation Date / Activity | Name | City | Phone | Actions | |
---|---|---|---|---|---|
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 theTable
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 | Role | Cost Center | Custom Value | ||
---|---|---|---|---|---|
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
Creation Date / Activity | Name | Status | Phone | 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 tonowrap
which will make cells expand depending on the content instead the givenwidth
. If you really want to fix a width make sure to overridewhiteSpace
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