Skip to main content
This site and Lume package is currently under development and may not be stable.
Open Innovations
OI Lume Viz

Table

Merge rows, use colour scales and sort columns.

When making tables it is useful to keep in mind the advice on table elements from the Royal Statistical Society.

Usage

To use this component in a Nunjucks template you would add the following (assumes you've loaded OI Lume Viz into componentNamespace: 'oi'):

{% comp 'oi.table', { "config": config } %}{% endcomp %}

where config is replaced by an object that contains some or all of these variables:

  • data - (required) Either a reference to a CSV file in the Lume site or an array of rows with named attributes
  • columns - An ordered array of columns to use to build the table. You could also create a virtual column here. Each is of the form:
    • name - (required) The title of the column in the data.
    • align - Set the text alignment of the column e.g. left, center, or right
    • mergerows - (boolean) if this column contains neighbouring rows with the same value, these will be merged into one cell.
    • sortable - (boolean) if this column will be made sortable by the viewer. Note that it isn't possible to make a column sortable if mergerows has been used on any column.
    • colour - A hex colour to use for the background colour of the cells in this column.
    • template - A virtual column can be created from other columns in the data.
    • scale - A colour scale to use to set a cell's background colour based on the cell value.
    • min - Used with scale and max to define the colour scale. If not included, the minimum value of the column will be used.
    • max - Used with scale and min to define the colour scale. If not included, the maximum value of the column will be used.
  • sort - the name of the column to sort by.
  • reverse - (boolean) By default the order is from low to high but you can order from high to low if this is set to true.
  • colours - Define some visualisation-specific named colours.
  • width - An optional minimum width (e.g. 100%) for the table.
  • attribution - Add a line of attribution text under the visualisation.

Examples

  1. Simple table
  2. Merge rows
  3. Colourful columns
  4. Virtual columns
  5. Heat map columns
  6. Set table width
  7. Sort by column
  8. Sortable columns

1. Simple table§

Embeddable version

This example shows three columns from a CSV file.

Overall categoryInterventionSub-category
TrainingTraining, up-skilling and re-training/re-skillingPrior learning assessment and recognition (PLAR)
TrainingTraining, up-skilling and re-training/re-skillingEducational, technical and vocational training (TVET)
TrainingTraining, up-skilling and re-training/re-skillingInternship and apprenticeship
TrainingTraining, up-skilling and re-training/re-skillingTraining centre accreditation and certification
TrainingTraining, up-skilling and re-training/re-skillingTraining of trainers and teachers
TrainingTraining, up-skilling and re-training/re-skillingBusiness skills training
TrainingTraining, up-skilling and re-training/re-skillingLife skills training
Enhancing Labour MarketSupport to employmentEmployee mentoring Work integrated learning; on job training)
Enhancing Labour MarketSupport to employmentCareer offices/advisory services/career days
Enhancing Labour MarketSupport to employmentProgramme for overseas employment
Enhancing Labour MarketSupport to employmentPublic work
Enhancing Labour MarketSupport to employmentSupport to employee mobility and placements
Enhancing Labour MarketSupport to employmentWage subsidies
Enhancing Labour MarketDecent work policiesLabour standards
Enhancing Labour MarketDecent work policiesSocial protection and social security
Enhancing Labour MarketDecent work policiesAccountability systems

This example was made with config:

YAML 
data: test.data.table
columns:
  - name: Overall category
  - name: Intervention
  - name: Sub-category
JSON 
{
	"data": "test.data.table",
	"columns": [{
			"name": "Overall category"
		},{
			"name": "Intervention"
		},{
			"name": "Sub-category"
		}]
}

2. Merge rows§

Embeddable version

Let's tidy up the table a little. Two of the columns contain a number of neighbouring rows that have the same values. We can choose to merge those rows by setting mergerows to true (this will set the rowspan property on the first table cell).

Overall categoryInterventionSub-category
TrainingTraining, up-skilling and re-training/re-skillingPrior learning assessment and recognition (PLAR)
Educational, technical and vocational training (TVET)
Internship and apprenticeship
Training centre accreditation and certification
Training of trainers and teachers
Business skills training
Life skills training
Enhancing Labour MarketSupport to employmentEmployee mentoring Work integrated learning; on job training)
Career offices/advisory services/career days
Programme for overseas employment
Public work
Support to employee mobility and placements
Wage subsidies
Decent work policiesLabour standards
Social protection and social security
Accountability systems

This example was made with config:

YAML 
data: test.data.table
columns:
  - name: Overall category
    mergerows: true
  - name: Intervention
    mergerows: true
  - name: Sub-category
JSON 
{
	"data": "test.data.table",
	"columns": [{
			"name": "Overall category",
			"mergerows": true
		},{
			"name": "Intervention",
			"mergerows": true
		},{
			"name": "Sub-category"
		}]
}

3. Colourful columns§

Embeddable version

We can set a colour for a column. The text of those cells will be set to a contrasting colour.

Overall categoryInterventionSub-category
TrainingTraining, up-skilling and re-training/re-skillingPrior learning assessment and recognition (PLAR)
Educational, technical and vocational training (TVET)
Internship and apprenticeship
Training centre accreditation and certification
Training of trainers and teachers
Business skills training
Life skills training
Enhancing Labour MarketSupport to employmentEmployee mentoring Work integrated learning; on job training)
Career offices/advisory services/career days
Programme for overseas employment
Public work
Support to employee mobility and placements
Wage subsidies
Decent work policiesLabour standards
Social protection and social security
Accountability systems

This example was made with config:

YAML 
data: test.data.table
columns:
  - name: Overall category
    mergerows: true
    colour: '#2254F4'
  - name: Intervention
    mergerows: true
  - name: Sub-category
JSON 
{
	"data": "test.data.table",
	"columns": [{
			"name": "Overall category",
			"mergerows": true,
			"colour": "#2254F4"
		},{
			"name": "Intervention",
			"mergerows": true
		},{
			"name": "Sub-category"
		}]
}

4. Virtual columns§

Embeddable version

Sometimes your data source may not be in quite the format you need. We can use template to create a "virtual column" that is a simple string built from values that exist in the data. In this example we generate a column named Local Authority which creates a link using the page and url values. Defining a column with a template is also useful for renaming a column heading. We can also set the text alignment in a column using align.

Local AuthorityCO2 (g)
Liverpool City Region5.33
Tendring District Council3.90
London Borough of Newham2.99
Melton Borough Council2.95
Welwyn Hatfield Council2.68
Dacorum Council2.68
Harborough District Council2.59
Bridgend County Borough Council2.53
Reading Borough Council2.34
Bournemouth, Christchurch and Poole2.27

This example was made with config:

YAML 
data:
  - page: Liverpool City Region
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E47000004.html
    co2: 5.33
  - page: Tendring District Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E07000076.html
    co2: 3.9
  - page: London Borough of Newham
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E09000025.html
    co2: 2.99
  - page: Melton Borough Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E07000133.html
    co2: 2.95
  - page: Welwyn Hatfield Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E07000241.html
    co2: 2.68
  - page: Dacorum Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E07000096.html
    co2: 2.68
  - page: Harborough District Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E07000131.html
    co2: 2.59
  - page: Bridgend County Borough Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/W06000013.html
    co2: 2.53
  - page: Reading Borough Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E06000038.html
    co2: 2.34
  - page: 'Bournemouth, Christchurch and Poole'
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E06000058.html
    co2: 2.27
columns:
  - name: Local Authority
    template: '<a href=''{{ url }}''>{{ page }}</a>'
  - name: CO2 (g)
    template: '{{ co2 | toFixed(2) }}'
    align: center
JSON 
{
	"data": [{
			"page": "Liverpool City Region",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E47000004.html",
			"co2": 5.33
		},{
			"page": "Tendring District Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E07000076.html",
			"co2": 3.9
		},{
			"page": "London Borough of Newham",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E09000025.html",
			"co2": 2.99
		},{
			"page": "Melton Borough Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E07000133.html",
			"co2": 2.95
		},{
			"page": "Welwyn Hatfield Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E07000241.html",
			"co2": 2.68
		},{
			"page": "Dacorum Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E07000096.html",
			"co2": 2.68
		},{
			"page": "Harborough District Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E07000131.html",
			"co2": 2.59
		},{
			"page": "Bridgend County Borough Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/W06000013.html",
			"co2": 2.53
		},{
			"page": "Reading Borough Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E06000038.html",
			"co2": 2.34
		},{
			"page": "Bournemouth, Christchurch and Poole",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E06000058.html",
			"co2": 2.27
		}],
	"columns": [{
			"name": "Local Authority",
			"template": "<a href='{{ url }}'>{{ page }}</a>"
		},{
			"name": "CO2 (g)",
			"template": "{{ co2 | toFixed(2) }}",
			"align": "center"
		}]
}

5. Heat map columns§

Embeddable version

We can set a scale (with optional min and max values) for a specific column to colour the numeric cells in that column.

Local AuthorityCO2 (g)Size (MB)
Liverpool City Region5.3321.20
Tendring District Council3.9015.50
London Borough of Newham2.9913.70
Melton Borough Council2.9513.50
Welwyn Hatfield Council2.6810.60
Dacorum Council2.6810.60
Harborough District Council2.5910.30
Bridgend County Borough Council2.5310.00
Reading Borough Council2.349.30
Bournemouth, Christchurch and Poole2.279.00

This example was made with config:

YAML 
data:
  - page: Liverpool City Region
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E47000004.html
    co2: 5.33
    size: 21.2
  - page: Tendring District Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E07000076.html
    co2: 3.9
    size: 15.5
  - page: London Borough of Newham
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E09000025.html
    co2: 2.99
    size: 13.7
  - page: Melton Borough Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E07000133.html
    co2: 2.95
    size: 13.5
  - page: Welwyn Hatfield Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E07000241.html
    co2: 2.68
    size: 10.6
  - page: Dacorum Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E07000096.html
    co2: 2.68
    size: 10.6
  - page: Harborough District Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E07000131.html
    co2: 2.59
    size: 10.3
  - page: Bridgend County Borough Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/W06000013.html
    co2: 2.53
    size: 10
  - page: Reading Borough Council
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E06000038.html
    co2: 2.34
    size: 9.3
  - page: 'Bournemouth, Christchurch and Poole'
    url: >-
      https://open-innovations.github.io/council-website-emissions/areas/E06000058.html
    co2: 2.27
    size: 9
columns:
  - name: Local Authority
    template: '{{ page }}'
  - name: CO2 (g)
    template: '{{ co2 | toFixed(2) }}'
    align: center
    scale: Heat_r
    min: 0
  - name: Size (MB)
    template: '{{ size | toFixed(2) }}'
    align: center
    scale: Heat_r
    min: 0
JSON 
{
	"data": [{
			"page": "Liverpool City Region",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E47000004.html",
			"co2": 5.33,
			"size": 21.2
		},{
			"page": "Tendring District Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E07000076.html",
			"co2": 3.9,
			"size": 15.5
		},{
			"page": "London Borough of Newham",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E09000025.html",
			"co2": 2.99,
			"size": 13.7
		},{
			"page": "Melton Borough Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E07000133.html",
			"co2": 2.95,
			"size": 13.5
		},{
			"page": "Welwyn Hatfield Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E07000241.html",
			"co2": 2.68,
			"size": 10.6
		},{
			"page": "Dacorum Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E07000096.html",
			"co2": 2.68,
			"size": 10.6
		},{
			"page": "Harborough District Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E07000131.html",
			"co2": 2.59,
			"size": 10.3
		},{
			"page": "Bridgend County Borough Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/W06000013.html",
			"co2": 2.53,
			"size": 10
		},{
			"page": "Reading Borough Council",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E06000038.html",
			"co2": 2.34,
			"size": 9.3
		},{
			"page": "Bournemouth, Christchurch and Poole",
			"url": "https://open-innovations.github.io/council-website-emissions/areas/E06000058.html",
			"co2": 2.27,
			"size": 9
		}],
	"columns": [{
			"name": "Local Authority",
			"template": "{{ page }}"
		},{
			"name": "CO2 (g)",
			"template": "{{ co2 | toFixed(2) }}",
			"align": "center",
			"scale": "Heat_r",
			"min": 0
		},{
			"name": "Size (MB)",
			"template": "{{ size | toFixed(2) }}",
			"align": "center",
			"scale": "Heat_r",
			"min": 0
		}]
}

6. Set table width§

Embeddable version

No default width is set for tables. If, say, you would like to make a specific table take up 100% of the width of the container you can set the width value.

Local AuthorityCO2 (g)Size (MB)
Liverpool City Region5.3321.20
Tendring District Council3.9015.50
London Borough of Newham2.9913.70
Melton Borough Council2.9513.50
Welwyn Hatfield Council2.6810.60
Dacorum Council2.6810.60
Harborough District Council2.5910.30
Bridgend County Borough Council2.5310.00
Reading Borough Council2.349.30
Bournemouth, Christchurch and Poole2.279.00

This example was made with config:

YAML 
width: 100%
data:
  - page: Liverpool City Region
    co2: 5.33
    size: 21.2
  - page: Tendring District Council
    co2: 3.9
    size: 15.5
  - page: London Borough of Newham
    co2: 2.99
    size: 13.7
  - page: Melton Borough Council
    co2: 2.95
    size: 13.5
  - page: Welwyn Hatfield Council
    co2: 2.68
    size: 10.6
  - page: Dacorum Council
    co2: 2.68
    size: 10.6
  - page: Harborough District Council
    co2: 2.59
    size: 10.3
  - page: Bridgend County Borough Council
    co2: 2.53
    size: 10
  - page: Reading Borough Council
    co2: 2.34
    size: 9.3
  - page: 'Bournemouth, Christchurch and Poole'
    co2: 2.27
    size: 9
columns:
  - name: Local Authority
    template: '{{ page }}'
  - name: CO2 (g)
    template: '{{ co2 | toFixed(2) }}'
    align: center
    scale: Heat_r
    min: 0
  - name: Size (MB)
    template: '{{ size | toFixed(2) }}'
    align: center
    scale: Heat_r
    min: 0
JSON 
{
	"width": "100%",
	"data": [{
			"page": "Liverpool City Region",
			"co2": 5.33,
			"size": 21.2
		},{
			"page": "Tendring District Council",
			"co2": 3.9,
			"size": 15.5
		},{
			"page": "London Borough of Newham",
			"co2": 2.99,
			"size": 13.7
		},{
			"page": "Melton Borough Council",
			"co2": 2.95,
			"size": 13.5
		},{
			"page": "Welwyn Hatfield Council",
			"co2": 2.68,
			"size": 10.6
		},{
			"page": "Dacorum Council",
			"co2": 2.68,
			"size": 10.6
		},{
			"page": "Harborough District Council",
			"co2": 2.59,
			"size": 10.3
		},{
			"page": "Bridgend County Borough Council",
			"co2": 2.53,
			"size": 10
		},{
			"page": "Reading Borough Council",
			"co2": 2.34,
			"size": 9.3
		},{
			"page": "Bournemouth, Christchurch and Poole",
			"co2": 2.27,
			"size": 9
		}],
	"columns": [{
			"name": "Local Authority",
			"template": "{{ page }}"
		},{
			"name": "CO2 (g)",
			"template": "{{ co2 | toFixed(2) }}",
			"align": "center",
			"scale": "Heat_r",
			"min": 0
		},{
			"name": "Size (MB)",
			"template": "{{ size | toFixed(2) }}",
			"align": "center",
			"scale": "Heat_r",
			"min": 0
		}]
}

7. Sort by column§

Embeddable version

If you would like to pre-sort the table by a particular column, you can set sort to the column name. You can also reverse the direction of the sort. Note that sort is applied before mergerows.

Local AuthorityCO2 (g)Size (MB)
Liverpool City Region5.3321.2
Tendring District Council3.9015.5
London Borough of Newham2.9913.7
Melton Borough Council2.9513.5
Dacorum Council2.6810.6
Welwyn Hatfield Council2.6810.6
Harborough District Council2.5910.3
Bridgend County Borough Council2.5310
Reading Borough Council2.349.3
Bournemouth, Christchurch and Poole2.279

This example was made with config:

YAML 
width: 100%
data:
  - page: Liverpool City Region
    co2: 5.33
    size: 21.2
  - page: Tendring District Council
    co2: 3.9
    size: 15.5
  - page: London Borough of Newham
    co2: 2.99
    size: 13.7
  - page: Melton Borough Council
    co2: 2.95
    size: 13.5
  - page: Welwyn Hatfield Council
    co2: 2.68
    size: 10.6
  - page: Dacorum Council
    co2: 2.68
    size: 10.6
  - page: Harborough District Council
    co2: 2.59
    size: 10.3
  - page: Bridgend County Borough Council
    co2: 2.53
    size: 10
  - page: Reading Borough Council
    co2: 2.34
    size: 9.3
  - page: 'Bournemouth, Christchurch and Poole'
    co2: 2.27
    size: 9
columns:
  - name: Local Authority
    template: '{{ page }}'
  - name: CO2 (g)
    template: '{{ co2 | toFixed(2) }}'
    align: center
    scale: Heat_r
    min: 0
  - name: Size (MB)
    template: '{{ size | toFixed(2) }}'
    align: center
    scale: Heat_r
    min: 0
sort: Size (MB)
reverse: true
JSON 
{
	"width": "100%",
	"data": [{
			"page": "Liverpool City Region",
			"co2": 5.33,
			"size": 21.2
		},{
			"page": "Tendring District Council",
			"co2": 3.9,
			"size": 15.5
		},{
			"page": "London Borough of Newham",
			"co2": 2.99,
			"size": 13.7
		},{
			"page": "Melton Borough Council",
			"co2": 2.95,
			"size": 13.5
		},{
			"page": "Welwyn Hatfield Council",
			"co2": 2.68,
			"size": 10.6
		},{
			"page": "Dacorum Council",
			"co2": 2.68,
			"size": 10.6
		},{
			"page": "Harborough District Council",
			"co2": 2.59,
			"size": 10.3
		},{
			"page": "Bridgend County Borough Council",
			"co2": 2.53,
			"size": 10
		},{
			"page": "Reading Borough Council",
			"co2": 2.34,
			"size": 9.3
		},{
			"page": "Bournemouth, Christchurch and Poole",
			"co2": 2.27,
			"size": 9
		}],
	"columns": [{
			"name": "Local Authority",
			"template": "{{ page }}"
		},{
			"name": "CO2 (g)",
			"template": "{{ co2 | toFixed(2) }}",
			"align": "center",
			"scale": "Heat_r",
			"min": 0
		},{
			"name": "Size (MB)",
			"template": "{{ size | toFixed(2) }}",
			"align": "center",
			"scale": "Heat_r",
			"min": 0
		}],
	"sort": "Size (MB)",
	"reverse": true
}

8. Sortable columns§

Embeddable version

If you would like to make it possible to sort by a particular column, you can set that column to sortable. It isn't currently possible to make a table sortable when mergerows has been used on any column.

Local AuthorityCO2 (g)Size (MB)
Liverpool City Region5.3321.20
Tendring District Council3.9015.50
London Borough of Newham2.9913.70
Melton Borough Council2.9513.50
Welwyn Hatfield Council2.6810.60
Dacorum Council2.6810.60
Harborough District Council2.5910.30
Bridgend County Borough Council2.5310.00
Reading Borough Council2.349.30
Bournemouth, Christchurch and Poole2.279.00

This example was made with config:

YAML 
width: 100%
data:
  - page: Liverpool City Region
    co2: 5.33
    size: 21.2
  - page: Tendring District Council
    co2: 3.9
    size: 15.5
  - page: London Borough of Newham
    co2: 2.99
    size: 13.7
  - page: Melton Borough Council
    co2: 2.95
    size: 13.5
  - page: Welwyn Hatfield Council
    co2: 2.68
    size: 10.6
  - page: Dacorum Council
    co2: 2.68
    size: 10.6
  - page: Harborough District Council
    co2: 2.59
    size: 10.3
  - page: Bridgend County Borough Council
    co2: 2.53
    size: 10
  - page: Reading Borough Council
    co2: 2.34
    size: 9.3
  - page: 'Bournemouth, Christchurch and Poole'
    co2: 2.27
    size: 9
columns:
  - name: Local Authority
    template: '{{ page }}'
    sortable: true
  - name: CO2 (g)
    template: '{{ co2 | toFixed(2) }}'
    align: center
    scale: Heat_r
    min: 0
    sortable: true
  - name: Size (MB)
    template: '{{ size | toFixed(2) }}'
    align: center
    scale: Heat_r
    min: 0
    sortable: true
JSON 
{
	"width": "100%",
	"data": [{
			"page": "Liverpool City Region",
			"co2": 5.33,
			"size": 21.2
		},{
			"page": "Tendring District Council",
			"co2": 3.9,
			"size": 15.5
		},{
			"page": "London Borough of Newham",
			"co2": 2.99,
			"size": 13.7
		},{
			"page": "Melton Borough Council",
			"co2": 2.95,
			"size": 13.5
		},{
			"page": "Welwyn Hatfield Council",
			"co2": 2.68,
			"size": 10.6
		},{
			"page": "Dacorum Council",
			"co2": 2.68,
			"size": 10.6
		},{
			"page": "Harborough District Council",
			"co2": 2.59,
			"size": 10.3
		},{
			"page": "Bridgend County Borough Council",
			"co2": 2.53,
			"size": 10
		},{
			"page": "Reading Borough Council",
			"co2": 2.34,
			"size": 9.3
		},{
			"page": "Bournemouth, Christchurch and Poole",
			"co2": 2.27,
			"size": 9
		}],
	"columns": [{
			"name": "Local Authority",
			"template": "{{ page }}",
			"sortable": true
		},{
			"name": "CO2 (g)",
			"template": "{{ co2 | toFixed(2) }}",
			"align": "center",
			"scale": "Heat_r",
			"min": 0,
			"sortable": true
		},{
			"name": "Size (MB)",
			"template": "{{ size | toFixed(2) }}",
			"align": "center",
			"scale": "Heat_r",
			"min": 0,
			"sortable": true
		}]
}