Data table
Live demo
Data table
Simple Data table| Company name | Display name | Contact email | Phone number |
|---|
| Paddy's Irish Pub | Paddy's | sunny@phili.com | +1-555-555-5555 |
| Martian Congressional Republic Navy | MCRN | bobbie@rocinante.com | +1-555-555-1234 |
| Cyberdyne Systems Corporation | Cyberdyne Systems | jconnor@skynet.com | +1-555-555-3577 |
| Sirius Cybernetics Corporation | Sirius Corp. | complaints@sirius.com | +1-555-555-3346 |
| Paper Street Soap Company | Paper Street | tdurden@soap.com | +1-555-555-6864 |
| Combine Honnete Ober Mercantiles | CHOAM | melange@dune.com | +1-555-555-4723 |
| Weasleys' Wizard Wheezes | Weasleys | pygmypuffs@weasleys.com | +1-555-555-8932 |
Variant options of text in columns
The optional `variant` prop on a `ColItem` sets the text variant on all the data cells for that column. It is `caption150` by default
Simple Data table| Company name | Display name | Contact email | Phone number | Actions |
|---|
| Paddy's Irish Pub | Paddy's | sunny@phili.com | +1-555-555-5555 | |
| Martian Congressional Republic Navy | MCRN | bobbie@rocinante.com | +1-555-555-1234 | |
| Cyberdyne Systems Corporation | Cyberdyne Systems | jconnor@skynet.com | +1-555-555-3577 | |
| Sirius Cybernetics Corporation | Sirius Corp. | complaints@sirius.com | +1-555-555-3346 | |
| Paper Street Soap Company | Paper Street | tdurden@soap.com | +1-555-555-6864 | |
| Combine Honnete Ober Mercantiles | CHOAM | melange@dune.com | +1-555-555-4723 | |
| Weasleys' Wizard Wheezes | Weasleys | pygmypuffs@weasleys.com | +1-555-555-8932 | |
Special column types
The `tight` prop on a `ColItem` minimizes the width of the column and this allows other columns to expand for visual priority. The `nowrap` prop on a `ColItem` prevents the text from wrapping. There is a custom type of 'actions' which is designed be used for the far column with actions. By default this wraps the header in ScreenReaderOnly component.
Simple Data table| User name | Email | Actions |
|---|
| Paddy's Irish Pub | sunny@phili.com | |
| Martian Congressional Republic Navy | bobbie@rocinante.com | |
| Cyberdyne Systems Corporation | jconnor@skynet.com | |
| Sirius Cybernetics Corporation | complaints@sirius.com | |
| Paper Street Soap Company | tdurden@soap.com | |
| Combine Honnete Ober Mercantiles | melange@dune.com | |
| Weasleys' Wizard Wheezes | pygmypuffs@weasleys.com | |
Code
Standard data table
import { DataTable } from '@shieldpay/bumblebee/data-table';
<DataTable caption="Simple Data table" rows={rows} columns={columns} />;
Data table with interactive rows
import { DataTable } from '@shieldpay/bumblebee/data-table';
const columnsWithLink = [
{ headerName: 'Company Name', field: 'name' },
{ headerName: 'Display Name', field: 'displayName' },
{ headerName: 'Contact email', field: 'email' },
{ headerName: 'Phone number', field: 'number', type: 'number' },
];
const rows = [
{
id: 1,
name: 'Sample name 1',
displayName: 'sample1',
email: 'sampleemail@spg.com',
number: '+1-555-555-5555',
},
{
id: 2,
name: 'Sample name 2',
displayName: 'sample2',
email: 'sampleemaill2@spg.com',
number: '+1-555-555-1234',
},
];
Data table with variants of text in columns
import { DataTable } from '@shieldpay/bumblebee/data-table';
const columnsWithLVariant = [
{ headerName: 'Company Name', field: 'name', variant: 'captionMedium150' },
{
headerName: 'Display Name',
field: 'displayName',
variant: 'captionMedium150',
},
{ headerName: 'Contact email', field: 'email', variant: 'captionMedium150' },
{
headerName: 'Phone number',
field: 'number',
type: 'number',
variant: 'captionMedium150',
},
];
const rows = [
{
id: 1,
name: 'Sample name 1',
displayName: 'sample1',
email: 'sampleemail@spg.com',
number: '+1-555-555-5555',
},
{
id: 2,
name: 'Sample name 2',
displayName: 'sample2',
email: 'sampleemaill2@spg.com',
number: '+1-555-555-1234',
},
];