• Components

Data Tables

Data Table with Toggle

View on separate page

Usage notes

The most robust solution to displaying data which is required to be compared, is to give the user control over what they see by allowing them to show and hide the columns of the table.

However, it needs to be kept in mind that presenting data in tables where content editors have the ability to determine which columns are shown by default could be seen as hiding information.

View the original source for this chart.

 

Data Table with Mode Switcher

View on separate page

Usage notes

The mode switcher gives the user the ability to choose the most appropriate control for the data they are viewing. Whilst generally this should be left to the content editor in charge of creating the table, giving the user the option to switch between the 'toogle' and 'swipe' controls allows them choose the best control for their needs.

 

Data Table with Swipe Control

Year Annual average Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
1988 63.5 61.9 62.1 62.3 63.1 63.4 63.6 63.6 63.8 64.1 64.4 64.7 64.8
1989 66.8 65.0 65.2 65.5 66.4 66.7 67.0 66.9 67.0 67.5 68.0 68.2 68.3
1990 71.5 68.6 69.0 69.4 70.6 71.3 71.6 71.4 72.2 72.9 73.5 73.6 73.5
1991 76.8 73.5 73.9 74.1 76.6 77.2 77.6 77.4 77.7 78.1 78.5 78.8 78.8
1992 80.1 78.6 79.0 79.4 80.2 80.5 80.6 80.2 80.2 80.5 80.7 80.8 80.8
1993 82.1 80.4 80.9 81.3 82.2 82.5 82.5 82.2 82.5 82.9 82.8 82.6 82.8
1994 83.8 82.5 82.9 83.1 83.9 84.1 84.1 83.6 84.1 84.2 84.0 84.1 84.5
1995 86.0 84.5 84.9 85.3 85.8 86.2 86.3 85.8 86.3 86.7 86.5 86.5 87.0
1996 88.1 86.8 87.2 87.5 88.0 88.3 88.4 87.8 88.3 88.7 88.7 88.7 89.0
1997 89.7 88.6 88.8 89.0 89.4 89.6 89.8 89.5 90.0 90.3 90.3 90.4 90.5
1998 91.1 89.9 90.3 90.5 91.0 91.5 91.3 90.8 91.2 91.6 91.6 91.7 91.9
1999 92.3 91.4 91.5 92.0 92.4 92.7 92.6 92.0 92.3 92.7 92.6 92.7 93.0
2000 93.1 92.1 92.4 92.6 92.9 93.2 93.3 92.8 92.8 93.6 93.5 93.7 93.7
2001 94.2 92.9 93.1 93.4 94.0 94.7 94.9 94.2 94.5 94.8 94.7 94.5 94.7
2002 95.4 94.4 94.5 94.9 95.3 95.5 95.5 95.2 95.5 95.7 95.9 95.9 96.3
2003 96.7 95.7 96.0 96.3 96.7 96.7 96.5 96.5 96.8 97.1 97.2 97.2 97.5
2004 98.0 97.0 97.2 97.4 97.8 98.1 98.1 97.8 98.1 98.2 98.4 98.6 99.1
2005 100.0 98.6 98.8 99.3 99.7 100.0 100.0 100.1 100.4 100.6 100.7 100.7 101.0
2006 102.3 100.5 100.9 101.1 101.7 102.2 102.5 102.5 102.9 103.0 103.2 103.4 104.0
2007 104.7 103.2 103.7 104.2 104.5 104.8 105.0 104.4 104.7 104.8 105.3 105.6 106.2
2008 .. 105.5 106.3 106.7 107.6 108.3 109.0 109.0 109.7 110.3 .. .. ..

Usage notes

Tables that have data that is not always required to be directly comparable suit this pattern.

The swipe table allows the user to browse the columns, using the prev / next controls or by swiping on a device that supports touch events. The only deficiency with this component is that it is harder to compare individual columns that are spread out from one another.

 

Bare Data Table

Year K24V
1997 109
1998 110.2
1999 111.4
2000 113.5
2001 111.7
2002 109.8
2003 109
2004 109.9
2005 109.1
2006 109.8
2007 110.2
2008 107.2
2009 97.8
2010 100.8
2011 100
2012 97.3
2013 97.2
1997 Q1 109.5
1997 Q2 107.1
1997 Q3 105.7
1997 Q4 113.6
1998 Q1 111.9
1998 Q2 108.8
1998 Q3 106.9
1998 Q4 113.2
1999 Q1 111.2
1999 Q2 108.5
1999 Q3 109.6
1999 Q4 116.5
2000 Q1 115.7
2000 Q2 112
2000 Q3 109.8
2000 Q4 116.6
2001 Q1 115.2
2001 Q2 110.1
2001 Q3 108
2001 Q4 113.5
2002 Q1 110.6
2002 Q2 109.1
2002 Q3 107
2002 Q4 112.4
2003 Q1 109.7
2003 Q2 107
2003 Q3 106.7
2003 Q4 112.6
2004 Q1 112.1
2004 Q2 109
2004 Q3 106
2004 Q4 112.4
2005 Q1 108.9
2005 Q2 109.7
2005 Q3 106.3
2005 Q4 111.2
2006 Q1 111.9
2006 Q2 108.7
2006 Q3 106.6
2006 Q4 112.1
2007 Q1 112.2
2007 Q2 109.3
2007 Q3 105.9
2007 Q4 113.2
2008 Q1 111.1
2008 Q2 108.4
2008 Q3 104.2
2008 Q4 105.1
2009 Q1 98.7
2009 Q2 97.3
2009 Q3 94.7
2009 Q4 100.5
2010 Q1 101.1
2010 Q2 99.6
2010 Q3 98.4
2010 Q4 104.3
2011 Q1 102.2
2011 Q2 99.6
2011 Q3 97.7
2011 Q4 100.5
2012 Q1 100.5
2012 Q2 96.9
2012 Q3 94.4
2012 Q4 97.3
2013 Q1 96.6
2013 Q2 97
2013 Q3 95.2
2013 Q4 99.7
2014 Q1 100.1
2014 Q2 98.8
1997 JAN 109.5
1997 FEB 107.1
1997 MAR 111.8
1997 APR 109.6
1997 MAY 105.2
1997 JUN 106.4
1997 JUL 109.1
1997 AUG 97.3
1997 SEP 110.5
1997 OCT 118
1997 NOV 113
1997 DEC 109.9
1998 JAN 107.4
1998 FEB 108.4
1998 MAR 120
1998 APR 109.7
1998 MAY 105.2
1998 JUN 111.4
1998 JUL 109.8
1998 AUG 98.7
1998 SEP 112.2
1998 OCT 115.1
1998 NOV 114.8
1998 DEC 109.8
1999 JAN 104.3
1999 FEB 106.9
1999 MAR 122.2
1999 APR 107.4
1999 MAY 105.3
1999 JUN 112.7
1999 JUL 107.9
1999 AUG 104.5
1999 SEP 116.3
1999 OCT 115.6
1999 NOV 121.4
1999 DEC 112.7
2000 JAN 107.1
2000 FEB 114
2000 MAR 125.8
2000 APR 106.4
2000 MAY 113.9
2000 JUN 115.7
2000 JUL 107
2000 AUG 109
2000 SEP 113.5
2000 OCT 118.1
2000 NOV 122.5
2000 DEC 109.3
2001 JAN 113.5
2001 FEB 109.9
2001 MAR 122.2
2001 APR 107.6
2001 MAY 112.2
2001 JUN 110.6
2001 JUL 107.7
2001 AUG 107.5
2001 SEP 108.9
2001 OCT 117.6
2001 NOV 117.2
2001 DEC 105.7
2002 JAN 110
2002 FEB 107.1
2002 MAR 114.6
2002 APR 111.5
2002 MAY 112.9
2002 JUN 103
2002 JUL 108.8
2002 AUG 102.3
2002 SEP 109.9
2002 OCT 116.6
2002 NOV 113.8
2002 DEC 106.7
2003 JAN 108.2
2003 FEB 106.2
2003 MAR 114.7
2003 APR 107.1
2003 MAY 106.4
2003 JUN 107.4
2003 JUL 109.2
2003 AUG 99.6
2003 SEP 111.2
2003 OCT 117.1
2003 NOV 111.2
2003 DEC 109.5
2004 JAN 107.2
2004 FEB 107.1
2004 MAR 122
2004 APR 109.4
2004 MAY 106.2
2004 JUN 111.5
2004 JUL 106
2004 AUG 100.9
2004 SEP 111.1
2004 OCT 111
2004 NOV 116.5
2004 DEC 109.6
2005 JAN 104.9
2005 FEB 106.6
2005 MAR 115.3
2005 APR 109.2
2005 MAY 108.7
2005 JUN 111.4
2005 JUL 104.8
2005 AUG 103.8
2005 SEP 110.4
2005 OCT 110.1
2005 NOV 116
2005 DEC 107.6
2006 JAN 108
2006 FEB 106.8
2006 MAR 120.8
2006 APR 104.3
2006 MAY 110.6
2006 JUN 111.3
2006 JUL 104.4
2006 AUG 105.1
2006 SEP 110.3
2006 OCT 114.4
2006 NOV 117.3
2006 DEC 104.7
2007 JAN 111.4
2007 FEB 107.2
2007 MAR 118
2007 APR 106.8
2007 MAY 112.6
2007 JUN 108.5
2007 JUL 106.7
2007 AUG 104.6
2007 SEP 106.5
2007 OCT 117
2007 NOV 116.9
2007 DEC 105.7
2008 JAN 111
2008 FEB 110.7
2008 MAR 111.5
2008 APR 111.5
2008 MAY 107.6
2008 JUN 106.1
2008 JUL 106.2
2008 AUG 98.3
2008 SEP 108.1
2008 OCT 111.5
2008 NOV 103.3
2008 DEC 100.7
2009 JAN 96.8
2009 FEB 94.9
2009 MAR 104.3
2009 APR 98.3
2009 MAY 94.7
2009 JUN 99
2009 JUL 98.1
2009 AUG 87.4
2009 SEP 98.7
2009 OCT 101.8
2009 NOV 101.8
2009 DEC 98
2010 JAN 95.4
2010 FEB 96.9
2010 MAR 111
2010 APR 99.9
2010 MAY 97.6
2010 JUN 101.3
2010 JUL 97.9
2010 AUG 94.1
2010 SEP 103.2
2010 OCT 103
2010 NOV 107.6
2010 DEC 102.2
2011 JAN 98.2
2011 FEB 97
2011 MAR 111.4
2011 APR 96.5
2011 MAY 99.5
2011 JUN 102.7
2011 JUL 96.2
2011 AUG 95.3
2011 SEP 101.6
2011 OCT 100.6
2011 NOV 104.3
2011 DEC 96.6
2012 JAN 97.1
2012 FEB 98.3
2012 MAR 106.2
2012 APR 94.6
2012 MAY 99.8
2012 JUN 96.2
2012 JUL 97.1
2012 AUG 93.5
2012 SEP 92.6
2012 OCT 99.3
2012 NOV 100.4
2012 DEC 92.4
2013 JAN 95.9
2013 FEB 93.2
2013 MAR 100.8
2013 APR 96.9
2013 MAY 98.5
2013 JUN 95.7
2013 JUL 98.1
2013 AUG 90.1
2013 SEP 97.5
2013 OCT 102.6
2013 NOV 100.6
2013 DEC 96.1
2014 JAN 97.9
2014 FEB 96.5
2014 MAR 106
2014 APR 98.5
2014 MAY 98.8
2014 JUN 99.1
2014 JUL 100.5
2014 AUG 90.3

Usage notes

This is an example of a bare table i.e. it has no controls.

This type of chart is suited to tables with no more than two columns (for example a time-series table), as a two column table should comfortably fit a mobile device (depending on the nature of the values within the column).

 

Responsive table

  2. CPI Index More information about CPI index

    2005 = 100. Not seasonally adjusted

    £567,890
    Last updated:
    18th Feb 2014
    Next update:
    25th June 2014

  3. CPI Annual Rate Percentage Change over 12 Months More information about CPI index

    78.7 Yrs
    Last updated:
    18th Feb 2014
    Next updated:
    25th June 2014

  4. CPI Annual Rate Percentage Change over 12 Months More information about CPI index

    Not a national statistic

    67.89 %
    Last updated:
    18th Feb 2014
    Next updated:
    25th June 2014
  5. View all 1234 Download all 1234 Download selected

Usage notes

This component is suitable for use when the data needs to be presented in a table, but the data it contains doesn't need to be directly compared with other columns in the table.