Skip to main content

Enhanced tables

Turn an existing govuk styled table into a govuk styled ag-grid grid.

  • Allows for sorting columns.
  • If the user has JavaScript disabled, automatically fall back to the standard govuk table.
  • In the future can be enhanced to add column filtering.

Create table

  1. Create a gov uk style table and give it the class enhanced-table.
  2. The table must have one <thead> and one <tbody>.
  3. You can optionally add the data attribute data-size-to-fit to ensure columns fit the whole width of the table:

  ...

Configure rows

Configuration for the columns is done on the <th> elements via data attributes. The options are:

  • data-sortable - enable sorting for this column (disabled by default).
  • data-column-type - use a specific ag-grid column type.
  • data-renderer - optionally specify the renderer for the column. Only needed for certain data types.
    • data-renderer="htmlRenderer" - render/sort column as html (mainly used to display buttons or links in a cell).
    • data-renderer="dateRenderer" - render/sort column as dates.
    • data-renderer="datetimeRenderer" - render/sort column as datetimes.
  • data-width - set a width for a column.
  • data-min-width - set a minimum width in pixels for a column.
  • data-max-width - set a maximum width in pixels for a column.
  • data-resizable - allow resizing of the column (disabled by default).

    {% for object in object_list %}
      
        ...
      
    {% endfor %}
  

  
    

      A link
      A date
      Some text
      A number
  

  

        
          The link

Initialise it

Add the following to your page: