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: