Table themes - Intelligence Community Design System

Show navigation section

Why we've created the themes

While the ICDS encourages using our components to ensure consistency in accessibility and user experience, we also recognise that other, older component libraries may offer features that are not yet available in our library.

In this case, our data table component may not provide the features needed by our consumers. This is due to the time and resources needed to implement these features, which are usually accomplished by large, dedicated teams in other libraries. For the ICDS, our team is small and our time spent delivering other useful features requested by the community.

In order to not leave consumers without the features they require while we implement them into our component library, we are offering custom-made ICDS themes.

AG Grid theme

This theme is being implemented on the ag-grid component , which is our recommended alternative data table solution whilst we take the time to implement the features our users require in a structured manner, to deliver the quality product our users expect.

Example theme

Interactive example

How to apply the theme

The theme is held in a css file exported in our@ukic/web-components package. To apply it, add the following class to the parent<div> of the ag-grid component.

// Can either import the css directly into the component file...
import "@ukic/web-components/dist/core/ag-theme-icds.css";
// ...or via another css file
import "./{FILE_NAME}.css";

return <div className="ag-theme-icds" style={{ height: 500 }}></div>;

If importing via another css file, add the following import to the top of the file.

@import "@ukic/web-components/dist/core/ag-theme-icds.css";

Native table theme

This theme is being implemented on the<table> element, which is recommended for a simpler solution where theic-data-table may be too much.

Example theme

Interactive example

First name	Last name	Age	Job title
Joe	Ashford	30	Developer
Sarah	Smith	28	Senior Software Developer
Mark	Owens	45	Team Lead

How to apply the theme

The theme is held in a css file exported in our@ukic/web-components package. To apply it, add theic-table class to the<table> component.

// Can either import the css directly into the component file...
import "@ukic/web-components/dist/core/icds-table-style.css";
// ...or via another css file
import "./{FILE_NAME}.css";

return <table class="ic-table"></table>;

If importing via another css file, add the following import to the top of the file.

@import "@ukic/web-components/dist/core/icds-table-style.css";

Variants

To utilise some of the variants ofic-data-table styling, add an additional class to the<table> component.

import "@ukic/web-components/dist/core/icds-table-style.css";

return <table class="ic-table ic-table-dense"></table>;

Additional class names are:

ic-table-dense to use dense styling
ic-table-spacious to use more spacious styling
ic-table-embedded to apply an outer border to the table

Last reviewed 26 November 2025 .