Table

This component organises and displays data efficiently, and is customisable as necessary.

Basic Usage


import { Table } from '@krakentech/coral';
 
const columns = [
    { title: 'Name', key: 'name' },
    { title: 'Age', key: 'age', align: 'center' },
    { title: 'Address', key: 'address', },
    { title: 'Email', key: 'email', align: 'right' },
];
 
const data = [
    {
        key: '1',
        name: 'Name 1',
        address: '1 Street Road, Town, City, Postcode',
        age: 32,
        email: 'name1.483@testmail.com',
    },
    {
        key: '2',
        name: 'Name 2',
        address: '2 Street Road, Town, City, Postcode',
        age: 42,
        email: 'name2.927@example.com',
    },
    {
        key: '3',
        name: 'Name 3',
        address: '3 Street Road, Town, City, Postcode',
        age: 42,
        email: 'name3.152@myemail.org',
    },
    {
        key: '4',
        name: 'Name 4',
        address: '4 Street Road, Town, City, Postcode',
        age: 42,
        email: 'name4.834@webmail.net',
    },
    {
        key: '5',
        name: 'Name 5',
        address: '5 Street Road, Town, City, Postcode',
        age: 42,
        email: 'name5.611@example.com',
    },
    {
        key: '6',
        name: 'Name 6',
        address: '6 Street Road, Town, City, Postcode',
        age: 42,
        email: 'name6.299@testmail.com',
    },
];
 
<Table columns={columns} data={data} />

Name	Age	Address	Email address
Name 1	32	1 Street Road, Town, City, Postcode	name1.483@testmail.com
Name 2	42	2 Street Road, Town, City, Postcode	name2.927@example.com
Name 3	42	3 Street Road, Town, City, Postcode	name3.152@myemail.org
Name 4	42	4 Street Road, Town, City, Postcode	name4.834@webmail.net
Name 5	42	5 Street Road, Town, City, Postcode	name5.611@example.com
Name 6	42	6 Street Road, Town, City, Postcode	name6.299@testmail.com

Advanced Usage


const columns = [
    {
        title: (
            <Stack display="inline-flex" alignItems="center" gap="xs">
                <Visibility hidden md={{ hidden: false }}>
                    <Stack alignItems="center">
                        <IconCircleUser size={20} />
                    </Stack>
                </Visibility>
                Name
            </Stack>
        ),
        key: 'name',
    },
    {
        title: (
            <Stack display="inline-flex" alignItems="center" gap="xs">
                <Visibility hidden md={{ hidden: false }}>
                    <Stack alignItems="center">
                        <IconCalendar size={20} />
                    </Stack>
                </Visibility>
                Age
            </Stack>
        ),
        key: 'age',
        align: 'center',
    },
    {
        title: (
            <Stack display="inline-flex" alignItems="center" gap="xs">
                <Visibility hidden md={{ hidden: false }}>
                    <Stack alignItems="center">
                        <IconHome size={20} />
                    </Stack>
                </Visibility>
                Address
            </Stack>
        ),
        key: 'address',
        align: 'right',
    },
];
 
const data = [
    {
        key: '1',
        name: 'Name 1',
        address: '1 Street Road, Town, City, Postcode',
        age: 32,
    },
    {
        key: '2',
        name: 'Name 2',
        address: '2 Street Road, Town, City, Postcode',
        age: 42,
    },
    {
        key: '3',
        name: 'Name 3',
        address: '3 Street Road, Town, City, Postcode',
        age: 42,
    },
    {
        key: '4',
        name: 'Name 4',
        address: '4 Street Road, Town, City, Postcode',
        age: 42,
    },
    {
        key: '5',
        name: 'Name 5',
        address: '5 Street Road, Town, City, Postcode',
        age: 42,
    },
    {
        key: '6',
        name: 'Name 6',
        address: '6 Street Road, Town, City, Postcode',
        age: 42,
    },
];
 
<Table columns={columns} data={data} />;

Name	Age	Address
Name 1	32	1 Street Road, Town, City, Postcode
Name 2	42	2 Street Road, Town, City, Postcode
Name 3	42	3 Street Road, Town, City, Postcode
Name 4	42	4 Street Road, Town, City, Postcode
Name 5	42	5 Street Road, Town, City, Postcode
Name 6	42	6 Street Road, Town, City, Postcode

Properties

hasSummaryRow


<Table columns={columns} data={data} hasSummaryRow />

Name	Age	Address	Email address
Name 1	32	1 Street Road, Town, City, Postcode	name1.483@testmail.com
Name 2	42	2 Street Road, Town, City, Postcode	name2.927@example.com
Name 3	42	3 Street Road, Town, City, Postcode	name3.152@myemail.org
Name 4	42	4 Street Road, Town, City, Postcode	name4.834@webmail.net
Name 5	42	5 Street Road, Town, City, Postcode	name5.611@example.com
Name 6	42	6 Street Road, Town, City, Postcode	name6.299@testmail.com

noDataLabel


<Table columns={columns} noDataLabel="This table has no data" />

Name	Age	Address	Email address
This table has no data

highlightedHeader


<Table columns={columns} data={data} highlightedHeader />

Name	Age	Address	Email address
Name 1	32	1 Street Road, Town, City, Postcode	name1.483@testmail.com
Name 2	42	2 Street Road, Town, City, Postcode	name2.927@example.com
Name 3	42	3 Street Road, Town, City, Postcode	name3.152@myemail.org
Name 4	42	4 Street Road, Town, City, Postcode	name4.834@webmail.net
Name 5	42	5 Street Road, Town, City, Postcode	name5.611@example.com
Name 6	42	6 Street Road, Town, City, Postcode	name6.299@testmail.com

spacingXOffset

In pixels, how much spacing to the left and right of the Table is there? This might be page or parent element margin / padding. This will make sure the Table is fully scrollable to each edge of the page on mobile, for example:

Page has 16px left and right padding
Set this value to spacingXOffset={16}

You can view the results of this prop on at a smaller screen width.


<Table columns={columns} data={data} spacingXOffset={16} />

Name	Age	Address	Email address
Name 1	32	1 Street Road, Town, City, Postcode	name1.483@testmail.com
Name 2	42	2 Street Road, Town, City, Postcode	name2.927@example.com
Name 3	42	3 Street Road, Town, City, Postcode	name3.152@myemail.org
Name 4	42	4 Street Road, Town, City, Postcode	name4.834@webmail.net
Name 5	42	5 Street Road, Town, City, Postcode	name5.611@example.com
Name 6	42	6 Street Road, Town, City, Postcode	name6.299@testmail.com

Full API

Name	Type	Default
`columns`	`TableColumn[]` An array of columns you would like to display.	`[]`
`data`	`TableColumnData[]` An array of objects with the fields key matching the key in the column data.	`[]`
`noDataLabel`	`ReactNode` The message which is displayed when there is no data, i.e., data is either of length zero or undefined.	`'No data'`
`hasSummaryRow`	`boolean` Prevent the last row from showing the table column titles when collapsing onto mobile.	`false`
`handleSortChange`	`(columnKey: any) => void` Callback fired when a column header is clicked to sort the table. `columnKey` The key of the column that was clicked.
`sortValue`	`SortValueStateType`
`rowsSelectable`	`boolean` Should each row be selectable by the user. This will add a checkbox to the first column of each row.	`false`
`rowsSelected`	`TableColumnData[]` An array of row keys that are currently selected.
`allRowsSelected`	`boolean` If `true`, all rows in the Table will be selected.
`handleRowSelected`	`(rowIndex: string \| number, isChecked: boolean) => void` Callback fired when a row is selected. `rowIndex` The index of the row that was selected. `isChecked` The checked state of the row.
`handleAllRowsSelected`	`((event: ChangeEvent<HTMLInputElement>, isChecked: boolean) => void) \| undefined` Callback fired when the “Select All” checkbox is clicked. `event` The event source of the callback. `isChecked` The checked state of the “Select All” checkbox.
`highlightedHeader`	`boolean` If `true`, the header will be highlighted with a different background color.
`spacingXOffset`	`number` In pixels, how much spacing to the left and right of the Table is there? This might be page or parent element margin / padding. This will make sure the Table is fully scrollable to each edge of the page on mobile. Eg: Page has 24px left and right padding Set this value to `spacingXOffset={24}`
`hasRowHeader`	`boolean` If true, the first column cells will be rendered as th elements, making them row headers.	`false`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`

Design

Good to know

Choose a table if you need to present lots of data, a table should make it easy for the user to scan big amounts of data. Tables can be embedded in other components like cards and accordions.

What if I need more rows?

Just select one, copy and paste and it will automatically at below for you. Same goes for removing a row, just select and delete and it will adjust for you.

Component breakdown

Corner radius: 12px
Outline: 2px
Outline colour: Ink
Title: Heading 5
Data: Body 1
Mobile title and data: Caption text