components

Table (code)

A table is used to organise and display tabular data in a way that's easy to scan.

Title	Amount of page views
A very interesting article about fishes	7,654,964
Look at this!	13,223,568
How you can save the planet	420

import { Table } from '@mediahuis/chameleon-react'

<Table
  columns={[
    { title: 'Title', field: 'title' },
    { title: 'Amount of page views', field: 'pageViews', textAlign: 'right' },
  ]}
  data={[
    {
      title: 'A very interesting article about fishes',
      pageViews: '7,654,964',
    },
    {
      title: 'Look at this!',
      pageViews: '13,223,568',
    },
    {
      title: 'How you can save the planet',
      pageViews: '420',
    },
  ]}
  emptyDescription="No articles have been published"
/>

<Table
  columns={[
    { title: 'Title', field: 'title' },
    { title: 'Amount of page views', field: 'pageViews', textAlign: 'right' },
  ]}
  data={[
    {
      title: 'A very interesting article about fishes',
      pageViews: '7,654,964',
    },
    {
      title: 'Look at this!',
      pageViews: '13,223,568',
    },
    {
      title: 'How you can save the planet',
      pageViews: '420',
    },
  ]}
  emptyDescription="No articles have been published"
/>

Props

Name	Type	Default	Required	Description
columns	Array<{ "title": "String" "field": "String" "textAlign": "'left''center''right'" "width": "String01234567891011'auto''full'" "colSpan": "Number" "ellipsis": "Boolean" }>	-	-	-
data	Array<Object>	-	-	-
emptyDescription	String	-	true	-
emptyIcon	FunctionStringNodeObject	Search	-	-
loading	Boolean	-	-	Show a loading state (e.g. while fetching data).
sorting	Boolean	-	-	-
tableLayout	'auto''fixed''inherit'	'auto'	-	-

System Props

m, mb, ml, mr, mt, mx, my

float

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Columns

default: undefined

columns defines the upper row of the table and tells the table rows where to find the necessary data.

This is an array of objects, one for each column. The structure of that object is as follows:

title (required): The text that will be used in the table's header.
field (required): The key that corresponds to a key in the data array's objects.
textAlign (optional): How the column's text should be aligned.

Title	Amount of page views
No articles have been published

<Table
  columns={[
    { title: 'Title', field: 'title' },
    { title: 'Amount of page views', field: 'pageViews', textAlign: 'right' },
  ]}
  emptyDescription="No articles have been published"
/>

<Table
  columns={[
    { title: 'Title', field: 'title' },
    { title: 'Amount of page views', field: 'pageViews', textAlign: 'right' },
  ]}
  emptyDescription="No articles have been published"
/>

Data

default: undefined

Based on the fields defined in the columbs prop, the data object should be an array that has objects with keys corresponing to the keys you defined.

If a key would not exist on a row, a - character will be shown.

Title	Amount of page views
A very interesting article about fishes	7,654,964
Look at this!	13,223,568
No one likes me	-

<Table
  columns={[
    { title: 'Title', field: 'title' },
    { title: 'Amount of page views', field: 'pageViews', textAlign: 'right' },
  ]}
  data={[
    {
      title: 'A very interesting article about fishes',
      pageViews: '7,654,964',
    },
    {
      title: 'Look at this!',
      pageViews: '13,223,568',
    },
    {
      title: 'No one likes me',
    },
  ]}
  emptyDescription="No articles have been published"
/>

<Table
  columns={[
    { title: 'Title', field: 'title' },
    { title: 'Amount of page views', field: 'pageViews', textAlign: 'right' },
  ]}
  data={[
    {
      title: 'A very interesting article about fishes',
      pageViews: '7,654,964',
    },
    {
      title: 'Look at this!',
      pageViews: '13,223,568',
    },
    {
      title: 'No one likes me',
    },
  ]}
  emptyDescription="No articles have been published"
/>

Empty table

emptyIcon default: Search

emptyDesciption default: undefined

If the data property is either not defined or an empty array, the table will show as empty. You can customize the empty display by using emptyDescription and emptyIcon.

Title	Amount of page views
No articles have been published

<Table
  columns={[
    { title: 'Title', field: 'title' },
    { title: 'Amount of page views', field: 'pageViews', textAlign: 'right' },
  ]}
  emptyIcon={Conditions}
  emptyDescription="No articles have been published"
/>

<Table
  columns={[
    { title: 'Title', field: 'title' },
    { title: 'Amount of page views', field: 'pageViews', textAlign: 'right' },
  ]}
  emptyIcon={Conditions}
  emptyDescription="No articles have been published"
/>

TableLayout

default: auto

Defines the algorithm used to lay out table cells, rows, and columns.

Col 1	Col 2	Col 3	Col 4
A much longer piece of content for demo purposes. More goes here.	Example text	Example text	Example text
Example text	Example text	Example text	Example text

Col 1	Col 2	Col 3	Col 4
A much longer piece of content for demo purposes. More goes here.	Example text	Example text	Example text
Example text	Example text	Example text	Example text

<Table
  mb={5}
  columns={[
    { title: 'Col 1', field: 'col1' },
    { title: 'Col 2', field: 'col2' },
    { title: 'Col 3', field: 'col3' },
    { title: 'Col 4', field: 'col4' },
  ]}
  data={[
    {
      col1: 'A much longer piece of content for demo purposes. More goes here.',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
    {
      col1: 'Example text',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="auto"
/>

<Table
  columns={[
    { title: 'Col 1', field: 'col1' },
    { title: 'Col 2', field: 'col2' },
    { title: 'Col 3', field: 'col3' },
    { title: 'Col 4', field: 'col4' },
  ]}
  data={[
    {
      col1: 'A much longer piece of content for demo purposes. More goes here.',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
    {
      col1: 'Example text',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
/>

<Table
  mb={5}
  columns={[
    { title: 'Col 1', field: 'col1' },
    { title: 'Col 2', field: 'col2' },
    { title: 'Col 3', field: 'col3' },
    { title: 'Col 4', field: 'col4' },
  ]}
  data={[
    {
      col1: 'A much longer piece of content for demo purposes. More goes here.',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
    {
      col1: 'Example text',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="auto"
/>
<Table
  columns={[
    { title: 'Col 1', field: 'col1' },
    { title: 'Col 2', field: 'col2' },
    { title: 'Col 3', field: 'col3' },
    { title: 'Col 4', field: 'col4' },
  ]}
  data={[
    {
      col1: 'A much longer piece of content for demo purposes. More goes here.',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
    {
      col1: 'Example text',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
/>

Column width

default: auto

Sets the width of the column. If you want to be sure to have a fixed width, use tableLayout fixed.

Col 1	Col 2	Col 3	Col 4
This cell tries to be 700px	Example text	Example text	Example text
Example text	Example text	Example text	Example text

Col 1	Col 2	Col 3	Col 4
This is really 700px	Example text	Example text	Example text
Example text	Example text	Example text	Example text

<Table
  mb={5}
  columns={[
    { title: 'Col 1', field: 'col1', width: '700px' },
    { title: 'Col 2', field: 'col2' },
    { title: 'Col 3', field: 'col3' },
    { title: 'Col 4', field: 'col4' },
  ]}
  data={[
    {
      col1: 'This cell tries to be 700px',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
    {
      col1: 'Example text',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="auto"
/>

<Table
  columns={[
    { title: 'Col 1', field: 'col1', width: '700px' },
    { title: 'Col 2', field: 'col2' },
    { title: 'Col 3', field: 'col3' },
    { title: 'Col 4', field: 'col4' },
  ]}
  data={[
    {
      col1: 'This is really 700px',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
    {
      col1: 'Example text',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
/>

<Table
  mb={5}
  columns={[
    { title: 'Col 1', field: 'col1', width: '700px' },
    { title: 'Col 2', field: 'col2' },
    { title: 'Col 3', field: 'col3' },
    { title: 'Col 4', field: 'col4' },
  ]}
  data={[
    {
      col1: 'This cell tries to be 700px',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
    {
      col1: 'Example text',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="auto"
/>
<Table
  columns={[
    { title: 'Col 1', field: 'col1', width: '700px' },
    { title: 'Col 2', field: 'col2' },
    { title: 'Col 3', field: 'col3' },
    { title: 'Col 4', field: 'col4' },
  ]}
  data={[
    {
      col1: 'This is really 700px',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
    {
      col1: 'Example text',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
/>

Ellipsis

default: undefined

If a collumn has ellipsis, overflowing texts will be cut and ellipsis will be added.

Col 1	Ea aliqua sit do ullamco mollit esse duis ad	Col 3	Col 4
Ea aliqua sit do ullamco mollit esse duis ad.	Example text	Example text	Example text
Example text	Example text	Example text	Example text

<Table
  mb={5}
  columns={[
    { title: 'Col 1', field: 'col1', width: '200px' },
    {
      title: 'Ea aliqua sit do ullamco mollit esse duis ad',
      field: 'col2',
      ellipsis: true,
    },
    { title: 'Col 3', field: 'col3' },
    { title: 'Col 4', field: 'col4' },
  ]}
  data={[
    {
      col1: {
        value: 'Ea aliqua sit do ullamco mollit esse duis ad.',
        ellipsis: true,
      },
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
    {
      col1: 'Example text',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
/>

<Table
  mb={5}
  columns={[
    { title: 'Col 1', field: 'col1', width: '200px' },
    {
      title: 'Ea aliqua sit do ullamco mollit esse duis ad',
      field: 'col2',
      ellipsis: true,
    },
    { title: 'Col 3', field: 'col3' },
    { title: 'Col 4', field: 'col4' },
  ]}
  data={[
    {
      col1: {
        value: 'Ea aliqua sit do ullamco mollit esse duis ad.',
        ellipsis: true,
      },
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
    {
      col1: 'Example text',
      col2: 'Example text',
      col3: 'Example text',
      col4: 'Example text',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
/>

Sorting

default: undefined

The Table has a basic sorting feature that lets users sort data by any column. To make it possible, set the property sorting to true.


Marilyn	Monroe	1926	Los Angeles
Abraham	Lincoln	1809	Hodgenville (Kentucky)
Paul	McCartney	1942	Liverpool

<Table
  mb={5}
  columns={[
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname' },
    { title: 'Birth Year', field: 'birthyear' },
    { title: 'Birthplace', field: 'birthplace' },
  ]}
  data={[
    {
      name: 'Marilyn',
      surname: 'Monroe',
      birthyear: '1926',
      birthplace: 'Los Angeles',
    },
    {
      name: 'Abraham',
      surname: 'Lincoln',
      birthyear: '1809',
      birthplace: 'Hodgenville (Kentucky)',
    },
    {
      name: 'Paul',
      surname: 'McCartney',
      birthyear: '1942',
      birthplace: 'Liverpool',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
  sorting={true}
/>

<Table
  mb={5}
  columns={[
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname' },
    { title: 'Birth Year', field: 'birthyear' },
    { title: 'Birthplace', field: 'birthplace' },
  ]}
  data={[
    {
      name: 'Marilyn',
      surname: 'Monroe',
      birthyear: '1926',
      birthplace: 'Los Angeles',
    },
    {
      name: 'Abraham',
      surname: 'Lincoln',
      birthyear: '1809',
      birthplace: 'Hodgenville (Kentucky)',
    },
    {
      name: 'Paul',
      surname: 'McCartney',
      birthyear: '1942',
      birthplace: 'Liverpool',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
  sorting={true}
/>

Non sorting columns

Make specific columns non-sortable by adding a sortable key to false. In the example below the Name field sortable is set to false.

Name
Marilyn	Monroe	1926	Los Angeles
Abraham	Lincoln	1809	Hodgenville (Kentucky)
Paul	McCartney	1942	Liverpool

<Table
  mb={5}
  columns={[
    { title: 'Name', field: 'name', sortable: false },
    { title: 'Surname', field: 'surname' },
    { title: 'Birth Year', field: 'birthyear' },
    { title: 'Birthplace', field: 'birthplace' },
  ]}
  data={[
    {
      name: 'Marilyn',
      surname: 'Monroe',
      birthyear: '1926',
      birthplace: 'Los Angeles',
    },
    {
      name: 'Abraham',
      surname: 'Lincoln',
      birthyear: '1809',
      birthplace: 'Hodgenville (Kentucky)',
    },
    {
      name: 'Paul',
      surname: 'McCartney',
      birthyear: '1942',
      birthplace: 'Liverpool',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
  sorting={true}
/>

<Table
  mb={5}
  columns={[
    { title: 'Name', field: 'name', sortable: false },
    { title: 'Surname', field: 'surname' },
    { title: 'Birth Year', field: 'birthyear' },
    { title: 'Birthplace', field: 'birthplace' },
  ]}
  data={[
    {
      name: 'Marilyn',
      surname: 'Monroe',
      birthyear: '1926',
      birthplace: 'Los Angeles',
    },
    {
      name: 'Abraham',
      surname: 'Lincoln',
      birthyear: '1809',
      birthplace: 'Hodgenville (Kentucky)',
    },
    {
      name: 'Paul',
      surname: 'McCartney',
      birthyear: '1942',
      birthplace: 'Liverpool',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
  sorting={true}
/>

Component sorting not supported

The default sorting method is only limited to non component data and will cause errors when it tries to sort columns with components.That's why we recommend giving that specific column a sortable: false key.


Marilyn	Monroe	1926
Abraham	Lincoln	1809
Paul	McCartney	1942

<Table
  mb={5}
  columns={[
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname' },
    { title: 'Birth Year', field: 'birthyear' },
    { title: 'Birthplace', field: 'birthplace', sortable: false },
  ]}
  data={[
    {
      name: 'Marilyn',
      surname: 'Monroe',
      birthyear: '1926',
      birthplace: (
        <Button
          size="small"
          appearance="secondary"
          onClick={() => alert('Los Angeles')}
        >
          View birthplace
        </Button>
      ),
    },
    {
      name: 'Abraham',
      surname: 'Lincoln',
      birthyear: '1809',
      birthplace: (
        <Button
          size="small"
          appearance="secondary"
          onClick={() => alert('Hodgenville (Kentucky)')}
        >
          View birthplace
        </Button>
      ),
    },
    {
      name: 'Paul',
      surname: 'McCartney',
      birthyear: '1942',
      birthplace: (
        <Button
          size="small"
          appearance="secondary"
          onClick={() => alert('Liverpool')}
        >
          View birthplace
        </Button>
      ),
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
  sorting={true}
/>

<Table
  mb={5}
  columns={[
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname' },
    { title: 'Birth Year', field: 'birthyear' },
    { title: 'Birthplace', field: 'birthplace', sortable: false },
  ]}
  data={[
    {
      name: 'Marilyn',
      surname: 'Monroe',
      birthyear: '1926',
      birthplace: (
        <Button
          size="small"
          appearance="secondary"
          onClick={() => alert('Los Angeles')}
        >
          View birthplace
        </Button>
      ),
    },
    {
      name: 'Abraham',
      surname: 'Lincoln',
      birthyear: '1809',
      birthplace: (
        <Button
          size="small"
          appearance="secondary"
          onClick={() => alert('Hodgenville (Kentucky)')}
        >
          View birthplace
        </Button>
      ),
    },
    {
      name: 'Paul',
      surname: 'McCartney',
      birthyear: '1942',
      birthplace: (
        <Button
          size="small"
          appearance="secondary"
          onClick={() => alert('Liverpool')}
        >
          View birthplace
        </Button>
      ),
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
  sorting={true}
/>

Custom sorting

It's also possible to pass a customSort algorithm to specific columns. In the example below the new algorithm sorts by length of string of birthpllace.


Marilyn	Monroe	1926	Los Angeles
Abraham	Lincoln	1809	Hodgenville (Kentucky)
Paul	McCartney	1942	Liverpool

<Table
  mb={5}
  columns={[
    {
      title: 'Name',
      field: 'name',
    },
    { title: 'Surname', field: 'surname' },
    { title: 'Birth Year', field: 'birthyear' },
    {
      title: 'Birthpllace',
      field: 'birthplace',
      customSort: (a, b) => a.birthplace.length - b.birthplace.length,
    },
  ]}
  data={[
    {
      name: 'Marilyn',
      surname: 'Monroe',
      birthyear: '1926',
      birthplace: 'Los Angeles',
    },
    {
      name: 'Abraham',
      surname: 'Lincoln',
      birthyear: '1809',
      birthplace: 'Hodgenville (Kentucky)',
    },
    {
      name: 'Paul',
      surname: 'McCartney',
      birthyear: '1942',
      birthplace: 'Liverpool',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
  sorting={true}
/>

<Table
  mb={5}
  columns={[
    {
      title: 'Name',
      field: 'name',
    },
    { title: 'Surname', field: 'surname' },
    { title: 'Birth Year', field: 'birthyear' },
    {
      title: 'Birthpllace',
      field: 'birthplace',
      customSort: (a, b) => a.birthplace.length - b.birthplace.length,
    },
  ]}
  data={[
    {
      name: 'Marilyn',
      surname: 'Monroe',
      birthyear: '1926',
      birthplace: 'Los Angeles',
    },
    {
      name: 'Abraham',
      surname: 'Lincoln',
      birthyear: '1809',
      birthplace: 'Hodgenville (Kentucky)',
    },
    {
      name: 'Paul',
      surname: 'McCartney',
      birthyear: '1942',
      birthplace: 'Liverpool',
    },
  ]}
  emptyDescription="No articles have been published"
  tableLayout="fixed"
  sorting={true}
/>