Theme
Table of Contents
We provide a custom theme for the AG Grid library for cases where a more sophisticated table is
required beyond the capabilities of our p-table component. This theme is aligned with the
Porsche Design System's visual language and ensures consistency across your application.
The Porsche Design System AG Grid theme is based on the default AG Grid theme, ag-theme-quartz, and is available in
both light (default) and dark (data-ag-theme-mode="dark") modes.
For more information on AG Grid's base themes, you can refer to the official
AG Grid Themes documentation.
Usage#
1. Import the Theme
First, import the Porsche Design System AG Grid theme into your application:
import { pdsTheme } from '@porsche-design-system/components-{js|angular|react|vue}/ag-grid';
2. Apply the Theme
You can apply the theme using one of the following methods:
Global Grid Options (Applies to all grid instances)
Use global grid options to set the
theme globally:
import { provideGlobalGridOptions } from 'ag-grid-community';
provideGlobalGridOptions({ theme: pdsTheme });
Individual Grid Options (Overrides global options):
Set the theme for a specific grid instance:
const gridOptions = { theme: pdsTheme };
Component Prop Assignment
Pass the theme directly as a prop:
<AgGridReact theme={pdsTheme} />
3. Change the Theme Mode
By default, the Porsche Design System AG Grid theme uses a light color scheme. You can control the color scheme by
setting the data-ag-theme-mode attribute on any parent element of the grid, such as the <html> or <body> tag.
Available Modes:
Light Mode (default) → data-ag-theme-mode is not set.
Dark Mode → Set data-ag-theme-mode="dark".
<body data-ag-theme-mode="dark"></body>
Example#
This example is currently in development and will be added soon.
