Version
has been released! Read the upgrade guide

Table

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Display tabular data.

Overview

The Table component is used to display tabular data. Each row is presented in the same format. It makes information easier to compare and scan.

1Usage

The Table component is best used to compare information in rows and columns. It organises data, making it easier for users to interpret by looking for patterns and insights. By default, the Table simply renders data passed to it, however it can be enhanced to include features such as Column Sorting.

2Anatomy

  1. Table Container. Wraps the entire Table component. By default it has no border styles, ensuring it sits flush with its immediate parent.

  2. Table Header. Contains the column titles.

  3. Table Column. Each Table Column contains data for each Table Row.

  4. Column Sorting (Optional). The Table Column can optionally have sorting applied to it, giving the user the ability to reorder the columns.

3Sizing & Spacing

The Table component adapts to the data and content placed inside of it. By default, the Table will extend the full width of its parent.

4Hierarchy & Placement

Whilst there is no restriction on the number of Table instances that can be used per page, it's always worth exploring if there is a more informative or interactive way of displaying this data to the user.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright