Porsche Design System

Theme

Table of Contents

Usage
Default Theme
Compact Theme

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 mode controlled by CSS color-scheme.

We provide two theme variants:

pdsTheme – the default theme with regular spacing and icon sizes.

pdsThemeCompact – a denser variant with reduced spacing, smaller icons, and compact form controls for information-rich grids.

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. Use pdsTheme for the default variant or pdsThemeCompact for the compact variant:

import { pdsTheme, pdsThemeCompact } 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 CSS color-scheme: light;, color-scheme: dark; or color-scheme: light dark; on any parent element of the grid, such as the <html> or <body> tag.

Available Modes:

Light Mode (default) → Set color-scheme: light; (optionally).

Dark Mode → Set color-scheme: dark;.

Auto Dark Mode → Set color-scheme: light dark;.

<body style="color-scheme: light;"></body>

Default Theme#

The default pdsTheme with regular spacing and icon sizes.

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div id="my-grid" style="padding: 1rem"></div>
<script type="module">
  import { pdsTheme } from '@porsche-design-system/components-js/ag-grid';
  import * as agGrid from 'ag-grid-community';

  agGrid.ModuleRegistry.registerModules([agGrid.AllCommunityModule]);

  const grid = document.querySelector('#my-grid');

  const rowData = [
    {
      model: '718',
      date: '23.06.2021',
      interest: 'New Car',
      vin: '1FM5K7F84FGB16304',
      purchaseIntention: '08/2021',
      status: 'Won',
      comment: '-',
      leadId: '0000824402',
    },
    {
      model: 'Panamera',
      date: '19.06.2021',
      interest: 'New Car',
      vin: '2GCEC13T141374801',
      purchaseIntention: '11/2021',
      status: 'Lost',
      comment: 'Some multiline text and a column with a min width.',
      leadId: '0000824409',
    },
    {
      model: '911',
      date: '19.05.2021',
      interest: 'Used Car',
      vin: '5GAKVCKD8EJ335750',
      purchaseIntention: '09/2021',
      status: 'Won',
      comment: '-',
      leadId: '0000824408',
    },
    {
      model: 'Macan',
      date: '10.05.2021',
      interest: 'Used Car',
      vin: '1FMPU17L83LC09302',
      purchaseIntention: '07/2021',
      status: 'Lost',
      comment: '-',
      leadId: '0000824407',
    },
    {
      model: 'Taycan',
      date: '03.05.2021',
      interest: 'New Car',
      vin: 'JN1BY1AR3BM375187',
      purchaseIntention: '05/2021',
      status: 'Won',
      comment: '-',
      leadId: '0000824406',
    },
  ];

  const gridOptions = {
    theme: pdsTheme,
    // Data to be displayed
    rowData: rowData.map((row, index) => ({ active: Boolean(index % 2) /* odd rows */, ...row })),
    // Columns to be displayed (Should match rowData properties)
    columnDefs: [
      {
        field: 'active',
        width: 170,
      },
      {
        field: 'model',
        editable: false,
        filter: true,
      },
      {
        field: 'date',
        editable: false,
      },
      {
        field: 'interest',
        editable: false,
      },
      {
        field: 'vin',
        width: 250,
        editable: false,
      },
      {
        field: 'purchaseIntention',
        editable: false,
      },
      {
        field: 'status',
        editable: false,
      },
      {
        field: 'comment',
        filter: false,
        width: 500,
      },
    ],
    // Configurations applied to all columns
    defaultColDef: {
      filter: true,
      editable: true,
    },
    // Grid Options & Callbacks
    pagination: true,
    domLayout: 'autoHeight',
  };


  agGrid.createGrid(grid, gridOptions);
</script>
</body>
</html>

Compact Theme#

The pdsThemeCompact variant, with reduced spacing and smaller icons for information-rich grids.

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div id="my-grid" style="padding: 1rem"></div>
<script type="module">
  import { pdsThemeCompact } from '@porsche-design-system/components-js/ag-grid';
  import * as agGrid from 'ag-grid-community';

  agGrid.ModuleRegistry.registerModules([agGrid.AllCommunityModule]);

  const grid = document.querySelector('#my-grid');

  const rowData = [
    {
      model: '718',
      date: '23.06.2021',
      interest: 'New Car',
      vin: '1FM5K7F84FGB16304',
      purchaseIntention: '08/2021',
      status: 'Won',
      comment: '-',
      leadId: '0000824402',
    },
    {
      model: 'Panamera',
      date: '19.06.2021',
      interest: 'New Car',
      vin: '2GCEC13T141374801',
      purchaseIntention: '11/2021',
      status: 'Lost',
      comment: 'Some multiline text and a column with a min width.',
      leadId: '0000824409',
    },
    {
      model: '911',
      date: '19.05.2021',
      interest: 'Used Car',
      vin: '5GAKVCKD8EJ335750',
      purchaseIntention: '09/2021',
      status: 'Won',
      comment: '-',
      leadId: '0000824408',
    },
    {
      model: 'Macan',
      date: '10.05.2021',
      interest: 'Used Car',
      vin: '1FMPU17L83LC09302',
      purchaseIntention: '07/2021',
      status: 'Lost',
      comment: '-',
      leadId: '0000824407',
    },
    {
      model: 'Taycan',
      date: '03.05.2021',
      interest: 'New Car',
      vin: 'JN1BY1AR3BM375187',
      purchaseIntention: '05/2021',
      status: 'Won',
      comment: '-',
      leadId: '0000824406',
    },
  ];

  const gridOptions = {
    theme: pdsThemeCompact,
    // Data to be displayed
    rowData: rowData.map((row, index) => ({ active: Boolean(index % 2) /* odd rows */, ...row })),
    // Columns to be displayed (Should match rowData properties)
    columnDefs: [
      {
        field: 'active',
        width: 170,
      },
      {
        field: 'model',
        editable: false,
        filter: true,
      },
      {
        field: 'date',
        editable: false,
      },
      {
        field: 'interest',
        editable: false,
      },
      {
        field: 'vin',
        width: 250,
        editable: false,
      },
      {
        field: 'purchaseIntention',
        editable: false,
      },
      {
        field: 'status',
        editable: false,
      },
      {
        field: 'comment',
        filter: false,
        width: 500,
      },
    ],
    // Configurations applied to all columns
    defaultColDef: {
      filter: true,
      editable: true,
    },
    // Grid Options & Callbacks
    pagination: true,
    domLayout: 'autoHeight',
  };


  agGrid.createGrid(grid, gridOptions);
</script>
</body>
</html>