Table examples React-only

This page shows examples of George’s Table component.

Standalone

Tables do not have a drop-shadow on their own – put them inside a card without a padding to achieve the effect.

Inside a Card with padding

If we have enough space inside a card, we might want to add padding. Now the table gets a surrounding border to separate it from the white card background.

Inside a Card without padding

With document upload

As File Export Preview

This one showcases the niche use case of Table layout FIXED, where the responsive behaviour is undermined on purpose, and horizontal scrolling will happen instead.

Selectable Tables BETA

Tables can be combined with Selectable to create a table with selectable cells.

Selectable Table Rows WIP

Technically it is possible to create a table with selectable rows. (In fact Transaction components do just that.)

However such tables have not been specified yet and they also pose some accessibility concerns.

WIP The example below is a technical demo of what is possible. Please don’t use it. Contact us instead.