Table

Table renders the <table> HTML element and inherits props from the Box component.
Import component
import { Table } from 'rimble-ui';

Example

Transaction hashValueRecipientTime
0xeb...cc00.10 ETH0x4fe...581March 28 2019 08:47:17 AM +UTC
0xsb...2300.11 ETH0x4gj...1e1March 28 2019 08:52:17 AM +UTC
0xed...c400.12 ETH0x3fd...781March 28 2019 08:55:17 AM +UTC

Accessibility

  • All tables should use <th> and <td> – this helps those using assistive technologies understand which data relates to each table header

Props

Prop NameTypeIs RequiredDefault ValueDescription
themeobjectoptionalnone
widthoptional
1
borderoptional
1
borderColoroptional
'grey'
fontSizeoptional
1
fontWeightoptional
2
fontFamilyoptional
'sansSerif'
coloroptional
'dark-gray'
boxShadowoptional
1
Styled System Props
Table uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styed System props.

Design guidelines

Use a table component so your users can easily scan and compare data in your product. They are not for layout.
Design and content
Some best practice for using Table
Only use tables for data
Data tables are more screen reader-friendly. Screen readers will identify the number of columns and rows, plus they'll read column and row headers. Layout tables are just read in source code order, which can create serious confusion for those using screen readers. For more explanation,
read about accessible tables.
Consider more responsive options
Tables are hard to read and navigate on mobile devices, especially if there are lots of columns. Consider whether your information really needs to be presented in a table before committing to one.
Wrap, don't truncate
Truncation prevents users from comparing data accurately. For example, if all data in a particular column starts with the same word, they'll all appear the same unless wrapped.
More rows than columns is easier to read
Do
12
1strow
2ndrow
3rdrow
Don't
1234
1strow
2ndrow
Headings should summarise the data within each column
Make sure your headings are clear and give the user enough information about what to expect in the data that follows.
Do
CurrencyValue change
ETHUp 10%
BTCUp 8%
DAIUp 2%
Don't
$%
ETHUp 10%
BTCUp 8%
DAIUp 2%
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute