AG Grid theme
AG Grid theme
Why we've created the theme
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 a custom-made ICDS theme.
This theme is being implemented on the
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";