Alpine Theme

The Alpine theme is designed for data-dense enterprise applications with a compact layout and high information density.

Installation

Import the Alpine theme stylesheet:

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

Apply the ag-theme-alpine class to your grid container:

<div id="myGrid" class="ag-theme-alpine" style="height: 500px;"></div>

Use the dark variant with the ag-theme-alpine-dark class:

<div id="myGrid" class="ag-theme-alpine-dark" style="height: 500px;"></div>

.ag-theme-alpine {
  --ag-row-height: 42px;
  --ag-header-height: 48px;
  --ag-foreground-color: #181d1f;
  --ag-background-color: #fff;
}

Alpine is ideal for applications that need to display large amounts of data efficiently.

⌘I