Table

Live demo

Standard table with one Header

Books
Name	Author	Genre	Published
A Wizard of Earthsea	Ursula K. Le Guin	Fantasy	1968
Pandora’s Star	Peter F. Hamilton	Science fiction	2004
Good Omens	Terry Pratchett - Neil Gaiman	Fantasy	1990
The Diary of a Madman	Gogol	Short stories	1835

Standard table with bold text in last column

Books
Name	Author	Genre	Published
A Wizard of Earthsea	Ursula K. Le Guin	Fantasy	1968
Pandora’s Star	Peter F. Hamilton	Science fiction	2004
Good Omens	Terry Pratchett - Neil Gaiman	Fantasy	1990
The Diary of a Madman	Gogol	Short stories	1835

Table with two Headers

Delivery slots
Time	Monday	Tuesday	Wednesday	Thursday	Friday
09.00 - 11.00	Open	Closed	Closed	Open	Open
09.00 - 11.00	Open	Closed	Closed	Open	Open
09.00 - 11.00	Open	Closed	Closed	Open	Open

Table with irregular Headers

Delivery slots
	Mars		Venus
	Produced	Sold	Produced	Sold
Teddy Bears	60,000	30,000	100,000	80,000
Board Games	10,000	5,000	12,000	9,000

Table with no borders

Delivery slots
	Mars		Venus
	Produced	Sold	Produced	Sold
Teddy Bears	60,000	30,000	100,000	80,000
Board Games	10,000	5,000	12,000	9,000

Design

Usage

The table is used to show multiple items in a list.

This applies to large lists of info that requires multiple columns like financial information such as transactions, lists of users etc

It will be clarified in the page whether each line item is to be clickable or not.

There will be 2 types of tables:

Payment tables

To be used for when there needs to be a table within a card, for example an account details card. This type has a 32px padding on the left and right to give it room in the card.

Display tables

To be used for as a free standing table to go along with content on a webpage, for example on a component page in Bumblebee for showing states and when they get used. This type does not have any padding on the left and right so it can sit fully justified with other content.

Specs

The table will consist of line titles, line items and pagination.

Line titles

Line titles have a slightly heavier text style to differentiate them from the items.

Some line titles will be clickable in the future to help the user filter.

Line items

Depending on the context and usage, line items can have hover, focus and disabled states.

They can alternate between left aligned and right aligned.

Standard

These are regular items and titles that are used to show most of the information within a table.

Bold

These are items and titles that have been given a heavier text style because they classify as the most important information within the table for the user. Not every table will have use for this type of items, but on the ones that do, we should make sure we are not hiding this bold column at smaller viewports. They can alternate between left aligned and right aligned.

Behaviour

The table can be interacted with in multiple ways.

If a line item can be opened, the user can hover and click.

Focus states will also be outlined so that users can tab through interactive options.

If some of the columns in the table will be hidden on smaller viewports, guidelines around these rules should be outlined at Organism level.

Transition to display a state change with a 0.25 ease.

Please refer to Behaviour and Prototype for examples

Placement

Please refer to Placement in page designs for examples

Accessibility

Use the appropriate ARIA attributes for screen readers where applicable.

Code

import { Table } from '@shieldpay/bumblebee/table';

<Table caption="Books">
  <Table.Head>
    <Table.Row>
      <Table.HeaderCell align="right">Published</Table.HeaderCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.DataCell>A Wizard of Earthsea</Table.DataCell>
      <Table.DataCell>Ursula K. Le Guin</Table.DataCell>
      <Table.DataCell>Fantasy</Table.DataCell>
      <Table.DataCell variant="captionMedium150" align="right">
        1968
      </Table.DataCell>
    </Table.Row>
  </Table.Body>
</Table>;