Table renders the <table> HTML element and inherits props from the Box component.

Import component

import { Table } from 'rimble-ui';

Example

Transaction hash
Value
Recipient
Time
0xeb...cc0
0.10 ETH
0x4fe...581
March 28 2019 08:47:17 AM +UTC
0xsb...230
0.11 ETH
0x4gj...1e1
March 28 2019 08:52:17 AM +UTC
0xed...c40
0.12 ETH
0x3fd...781
March 28 2019 08:55:17 AM +UTC
<Table>
  <thead>
    <tr>
      <th>Transaction hash</th>
      <th>Value</th>
      <th>Recipient</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0xeb...cc0</td>
      <td>0.10 ETH</td>
      <td>0x4fe...581</td>
      <td>March 28 2019 08:47:17 AM +UTC</td>
    </tr>
    <tr>
      <td>0xsb...230</td>
      <td>0.11 ETH</td>
      <td>0x4gj...1e1</td>
      <td>March 28 2019 08:52:17 AM +UTC</td>
    </tr>
    <tr>
      <td>0xed...c40</td>
      <td>0.12 ETH</td>
      <td>0x3fd...781</td>
      <td>March 28 2019 08:55:17 AM +UTC</td>
    </tr>
  </tbody>
</Table>
<Table>
  <thead>
    <tr>
      <th>Transaction hash</th>
      <th>Value</th>
      <th>Recipient</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0xeb...cc0</td>
      <td>0.10 ETH</td>
      <td>0x4fe...581</td>
      <td>March 28 2019 08:47:17 AM +UTC</td>
    </tr>
    <tr>
      <td>0xsb...230</td>
      <td>0.11 ETH</td>
      <td>0x4gj...1e1</td>
      <td>March 28 2019 08:52:17 AM +UTC</td>
    </tr>
    <tr>
      <td>0xed...c40</td>
      <td>0.12 ETH</td>
      <td>0x3fd...781</td>
      <td>March 28 2019 08:55:17 AM +UTC</td>
    </tr>
  </tbody>
</Table>
Copy code

Accessibility

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

Props

1

'grey'

1

'dark-gray'

'sansSerif'

1

2

1

Styled System Props

Table uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled 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

Headings should summarise the data within each column