Skip to main content
Unified Design System
Search the Design System
Ver. 3.0.0 For the older version visit v2 documentation

Data tables

Data tables are used to organize and display large data sets. The data table component allows for customization with additional functionality.

Data tables display data sets in a table format across rows and columns and offers functionality for sorting, filtering and more.

When to use this component

Only use a data table if there’s evidence it’s helpful for the user to:

  • To organize and display large set of data.
  • If your user must navigate to a specific piece of data to complete a task.
  • Displaying all of a user’s resources.

When not to use this component

Data tables hide information from the users. Not all users will notice the navigation and ordering buttons or understand how they work. For this reason, you should only use them in specific situations and if user research supports it.

Prefer to present information specific to the task in hand, rather than displaying every available information in a data table.

Do not use the component:

  • when a more complex display of the data or interactions are required.
  • As a replacement for a spreadsheet application.
  • As a replacement for check your answers page.
  • When a table doesn’t include as many rows. In such a case, prefer to use a normal table.

How it works

The component should only exist in the main section. The component uses JavaScript and utilizes the open source DataTables (opens in new tab) version 1.13.2 library. In addition to the developer assets and depending on the variant you what to use, you need to reference the DataTable’s CSS and JavaScript CDN files accordingly.

Basic variant

The basic variant can sort data in ascending or descending order. Search functionality can be used to filter specific items from the table.

Example

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 22/05/2023 $320,800
Garrett Winters Accountant Tokyo 63 17/05/2023 $170,750
Ashton Cox Junior Technical Author San Francisco 66 07/02/2023 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 08/05/2023 $433,060
Airi Satou Accountant Tokyo 33 31/08/2023 $162,700
Brielle Williamson Integration Specialist New York 61 06/01/2023 $372,000
Herrod Chandler Sales Assistant San Francisco 59 14/07/2023 $137,500
Rhona Davidson Integration Specialist Tokyo 55 20/12/2023 $327,900
Colleen Hurst Javascript Developer San Francisco 39 27/05/2023 $205,500
Sonya Frost Software Engineer Edinburgh 23 18/12/2023 $103,600
Jena Gaines Office Manager London 30 30/04/2023 $90,560
Quinn Flynn Support Lead Edinburgh 22 17/09/2023 $342,000
Charde Marshall Regional Director San Francisco 36 03/05/2023 $470,600
Haley Kennedy Senior Marketing Designer London 43 17/06/2023 $313,500
Tatyana Fitzpatrick Regional Director London 19 23/07/2023 $385,750
Michael Silva Marketing Designer London 66 29/12/2023 $456,750
Paul Byrd Chief Financial Officer (CFO) New York 64 08/01/2023 $725,000
Gloria Little Systems Administrator New York 59 01/12/2023 $237,500
Bradley Greer Software Engineer London 41 13/05/2023 $132,000
Dai Rios Personnel Lead Edinburgh 35 22/04/2023 $217,500
Jenette Caldwell Development Lead New York 30 02/01/2023 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 21/11/2023 $675,000
Caesar Vance Pre-Sales Support New York 21 11/04/2023 $106,450
Doris Wilder Sales Assistant Sydney 23 25/09/2023 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 06/05/2023 $1,200,000
Gavin Joyce Developer Edinburgh 42 24/07/2023 $92,575
Jennifer Chang Regional Director Singapore 28 12/11/2023 $357,650
Brenden Wagner Software Engineer San Francisco 28 21/01/2023 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 15/01/2023 $850,000
Shou Itou Regional Marketing Tokyo 20 26/01/2023 $163,000
Michelle House Integration Specialist Sydney 37 08/09/2023 $95,400
Suki Burks Developer London 53 16/07/2023 $114,500
Prescott Bartlett Technical Author London 27 20/11/2023 $145,000
Gavin Cortez Team Leader San Francisco 22 01/03/2023 $235,500
Martena Mccray Post-Sales support Edinburgh 46 02/03/2023 $324,050
Unity Butler Marketing Designer San Francisco 47 02/08/2023 $85,675
Howard Hatfield Office Manager San Francisco 51 18/05/2023 $164,500
Hope Fuentes Secretary San Francisco 41 12/12/2023 $109,850
Vivian Harrell Financial Controller San Francisco 62 07/05/2023 $452,500
Timothy Mooney Office Manager London 37 06/07/2023 $136,200
Jackson Bradshaw Director New York 65 09/09/2023 $645,750
Olivia Liang Support Engineer Singapore 64 16/05/2023 $234,500
Bruno Nash Software Engineer London 38 08/04/2023 $163,500
Sakura Yamamoto Support Engineer Tokyo 37 16/07/2023 $139,575
Thor Walton Developer New York 61 06/09/2023 $98,540
Finn Camacho Support Engineer San Francisco 47 13/11/2023 $87,500
Serge Baldwin Data Coordinator Singapore 64 19/04/2023 $138,575
Zenaida Frank Software Engineer New York 63 23/07/2023 $125,250
Zorita Serrano Software Engineer San Francisco 56 07/01/2023 $115,000
Jennifer Acosta Junior Javascript Developer Edinburgh 43 30/04/2023 $75,650
Cara Stevens Sales Assistant New York 46 01/04/2023 $145,600
Hermione Butler Regional Director London 47 11/06/2023 $356,250
Lael Greer Systems Administrator London 21 15/10/2023 $103,500
Jonas Alexander Developer San Francisco 30 23/09/2023 $86,500
Shad Decker Regional Director Edinburgh 51 02/09/2023 $183,000
Michael Bruce Javascript Developer Singapore 29 16/11/2023 $183,000
Donna Snider Customer Support New York 27 18/06/2023 $112,000

CDN CSS

Include the following code in your <head>.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css">

CDN JavaScript

Include the following JavaScript files.

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/1.13.4/sorting/datetime-moment.js"></script>

Table HTML

The table’s HTML must have a unique id and include the class govcy-table. For example:

<table id="dt" class="govcy-table">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

Make sure to include the <thead> section.

JavaScript for initialization

To initialize the Data Table for the basic variant, use the following code:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        //use moment.js to sort dates
        $.fn.dataTable.moment( 'DD/MM/YYYY' );
        
         let table = new DataTable('#dt', {
            scrollX: true, //allow scrolling for small devices
            dom: 'frtip'
        });
    });
</script>

Make sure to reference the HTML table’s id. In the example above example, the table with id="dt" will be initialized.

Exports variant

In addition to the ability to sort and search data, the Exports variant can also export the table into Excel, PDF or CSV formats.

Example

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 22/05/2023 $320,800
Garrett Winters Accountant Tokyo 63 17/05/2023 $170,750
Ashton Cox Junior Technical Author San Francisco 66 07/02/2023 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 08/05/2023 $433,060
Airi Satou Accountant Tokyo 33 31/08/2023 $162,700
Brielle Williamson Integration Specialist New York 61 06/01/2023 $372,000
Herrod Chandler Sales Assistant San Francisco 59 14/07/2023 $137,500
Rhona Davidson Integration Specialist Tokyo 55 20/12/2023 $327,900
Colleen Hurst Javascript Developer San Francisco 39 27/05/2023 $205,500
Sonya Frost Software Engineer Edinburgh 23 18/12/2023 $103,600
Jena Gaines Office Manager London 30 30/04/2023 $90,560
Quinn Flynn Support Lead Edinburgh 22 17/09/2023 $342,000
Charde Marshall Regional Director San Francisco 36 03/05/2023 $470,600
Haley Kennedy Senior Marketing Designer London 43 17/06/2023 $313,500
Tatyana Fitzpatrick Regional Director London 19 23/07/2023 $385,750
Michael Silva Marketing Designer London 66 29/12/2023 $456,750
Paul Byrd Chief Financial Officer (CFO) New York 64 08/01/2023 $725,000
Gloria Little Systems Administrator New York 59 01/12/2023 $237,500
Bradley Greer Software Engineer London 41 13/05/2023 $132,000
Dai Rios Personnel Lead Edinburgh 35 22/04/2023 $217,500
Jenette Caldwell Development Lead New York 30 02/01/2023 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 21/11/2023 $675,000
Caesar Vance Pre-Sales Support New York 21 11/04/2023 $106,450
Doris Wilder Sales Assistant Sydney 23 25/09/2023 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 06/05/2023 $1,200,000
Gavin Joyce Developer Edinburgh 42 24/07/2023 $92,575
Jennifer Chang Regional Director Singapore 28 12/11/2023 $357,650
Brenden Wagner Software Engineer San Francisco 28 21/01/2023 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 15/01/2023 $850,000
Shou Itou Regional Marketing Tokyo 20 26/01/2023 $163,000
Michelle House Integration Specialist Sydney 37 08/09/2023 $95,400
Suki Burks Developer London 53 16/07/2023 $114,500
Prescott Bartlett Technical Author London 27 20/11/2023 $145,000
Gavin Cortez Team Leader San Francisco 22 01/03/2023 $235,500
Martena Mccray Post-Sales support Edinburgh 46 02/03/2023 $324,050
Unity Butler Marketing Designer San Francisco 47 02/08/2023 $85,675
Howard Hatfield Office Manager San Francisco 51 18/05/2023 $164,500
Hope Fuentes Secretary San Francisco 41 12/12/2023 $109,850
Vivian Harrell Financial Controller San Francisco 62 07/05/2023 $452,500
Timothy Mooney Office Manager London 37 06/07/2023 $136,200
Jackson Bradshaw Director New York 65 09/09/2023 $645,750
Olivia Liang Support Engineer Singapore 64 16/05/2023 $234,500
Bruno Nash Software Engineer London 38 08/04/2023 $163,500
Sakura Yamamoto Support Engineer Tokyo 37 16/07/2023 $139,575
Thor Walton Developer New York 61 06/09/2023 $98,540
Finn Camacho Support Engineer San Francisco 47 13/11/2023 $87,500
Serge Baldwin Data Coordinator Singapore 64 19/04/2023 $138,575
Zenaida Frank Software Engineer New York 63 23/07/2023 $125,250
Zorita Serrano Software Engineer San Francisco 56 07/01/2023 $115,000
Jennifer Acosta Junior Javascript Developer Edinburgh 43 30/04/2023 $75,650
Cara Stevens Sales Assistant New York 46 01/04/2023 $145,600
Hermione Butler Regional Director London 47 11/06/2023 $356,250
Lael Greer Systems Administrator London 21 15/10/2023 $103,500
Jonas Alexander Developer San Francisco 30 23/09/2023 $86,500
Shad Decker Regional Director Edinburgh 51 02/09/2023 $183,000
Michael Bruce Javascript Developer Singapore 29 16/11/2023 $183,000
Donna Snider Customer Support New York 27 18/06/2023 $112,000

CDN CSS

Include the following code in your <head>.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.2/css/buttons.dataTables.min.css">

CDN JavaScript

Include the following JavaScript files.

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/1.13.4/sorting/datetime-moment.js"></script>

Table HTML

Use the same table structure as the basic variant.

JavaScript for initialization

To initialize the Data Table for the export variant, use the following code:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        $.fn.dataTable.moment( 'DD/MM/YYYY' );
        
         let table = new DataTable('#dt-export', {
            order: [[4, 'asc']],
            stripeClasses: [],
            scrollX: true,
            dom: 'Bfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ]
        });
    });
</script>

Make sure to reference the HTML table’s id. In the example above example, the table with id="dt-export" will be initialized.

Language Support

The default language used in DataTables is English. Load the desired language directly to the browser.

In the DataTable initialization add language: {url: '...'}.

For Greek translation for DataTables use //cdn.datatables.net/plug-ins/1.13.4/i18n/el.json
For Turkish translation for DataTables use //cdn.datatables.net/plug-ins/1.13.4/i18n/tr.json

For example:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        $.fn.dataTable.moment( 'DD/MM/YYYY' );
            
        let table = new DataTable('#dt-greek', {
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/el.json',
            },
            scrollX: true, //allow scrolling for small devices
            dom: 'frtip'
        });
    });
</script>