---
title: "Theming: Compactness & Row Height"
framework: vue
version: "36.1.0"
---

# Theming: Compactness & Row Height

Add more white space or pack more data into the UI.

`spacing` is the main theme parameter that controls how tightly data and UI elements are packed together. All padding in the grid is defined as a multiple of this value, so increasing it will make most components larger by increasing their internal white space while leaving the size of text and icons unchanged.

The following example changes compactness dynamically by updating the `--ag-spacing` CSS custom property:

#### Dynamic Height

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  enableDevValidations,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="height: 100%; display: flex; flex-direction: column; gap: 0.5rem">
      <div style="flex: none; display: flex; gap: 8px; align-items: center">
        spacing = <span style="min-width: 50px"><span id="spacing">8.0</span>px</span>
        <input type="range" v-on:input="changeSize($event.target.valueAsNumber)" value="8" min="0" max="20" step="0.1" style="width: 200px">
        </div>
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :sideBar="sideBar"
          :animateRows="false"
          :rowData="rowData"></ag-grid-vue>
        </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 170 },
      { field: "age" },
      { field: "country" },
      { field: "year" },
      { field: "date" },
      { field: "sport" },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      filter: true,
    });
    const sideBar = ref<SideBarDef | string | string[] | boolean | null>(
      "columns",
    );
    const rowData = ref<IOlympicData[]>(null);

    function changeSize(value: number) {
      document.documentElement.style.setProperty("--ag-spacing", `${value}px`);
      document.getElementById("spacing")!.innerText = value.toFixed(1);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      sideBar,
      rowData,
      onGridReady,
      changeSize,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Dynamic Height](https://www.ag-grid.com/examples/theming-compactness/dynamic-height/vue3)

## Row Height

By default, row height is determined by the content height plus padding. Content height is `max(iconSize, cellFontSize)`. Padding is a multiple of `spacing`. This means that your rows can change size if you change any of the icon size, font size, or spacing.

To customise the height of grid data rows:

1. **Padding scale** - `rowVerticalPaddingScale` and `headerVerticalPaddingScale` are plain numbers without units. The padding is multiplied by this number, so `0.75` would mean 3/4 of the usual padding. Using these scale parameters preserves the behaviour that row size adjusts when font size changes, which is useful if font size is not known in advance.
2. **Fixed height** - `rowHeight` and `headerHeight` are CSS length values - numbers with units. They set the height of the row or header to a fixed value, regardless of the font size or icon size.
3. You can also [customise row height in JavaScript](https://www.ag-grid.com/vue-data-grid/row-height/).

`listItemHeight` sets the height of rows in lists such as the [rich select editor](https://www.ag-grid.com/vue-data-grid/provided-cell-editors-rich-select/) and [set filter](https://www.ag-grid.com/vue-data-grid/filter-set/).

## More Compactness Parameters

Compactness parameters for each feature are listed in that feature's section of the [parameters reference](https://www.ag-grid.com/vue-data-grid/theming-api/) (e.g. [Headers](https://www.ag-grid.com/vue-data-grid/theming-api/#reference-headers), [Rows](https://www.ag-grid.com/vue-data-grid/theming-api/#reference-rows)). See [Spacing & Sizing](https://www.ag-grid.com/vue-data-grid/theming-api/#reference-spacingAndSizing) for parameters that affect the whole grid.

## Extended Syntax For Length Parameters

All compactness parameters except `rowVerticalPaddingScale` and `headerVerticalPaddingScale` are length parameters - numbers with units like `10px`. Length parameters do not have a common suffix - any parameter that does not have a special suffix like `Color` or `FontFamily` is a length value.

Length parameters can accept the following values:

| Syntax | Description |
| --- | --- |
| `string` | A [CSS length value](https://developer.mozilla.org/en-US/docs/Web/CSS/length), such as `'10px'` or variable expression `'var(--myAppHeaderSize)'`. |
| `4` | A number without units is assumed to be pixels |
| `{ ref: 'spacing' }` | Use the same value as the `spacing` parameter |
| `{ calc: '4 * spacing - 2px' }` | A CSS [calc expression](https://developer.mozilla.org/en-US/docs/Web/CSS/calc), except that parameter names are allowed and will be converted to the appropriate CSS custom property. This expression would map to the CSS string `"calc(4 * var(--ag-spacing) - 2px)"`. Note that `-` is a valid character in CSS identifiers, so if you use it for subtraction then spaces are required around it. |

## Using CSS rules to customise compactness

The grid contains thousands of elements. Most of them respond to the `spacing` parameter, by having their default padding defined as a multiple of it. But many of them don't have their own specific parameters to customise size. For all elements except rows, headers and list items (see note below), you can set their height, margin or paddings using CSS rules that target a class name, e.g.

```css
.ag-panel-title-bar {
    height: 80px;
}
```

### Setting the height of rows, headers and list items

To change the height of rows, headers and list item heights, you *must* use the provided parameters `rowHeight`, `headerHeight` and `listItemHeight`, or the equivalent CSS custom properties `--ag-row-height`, `--ag-header-height` and `--ag-list-item-height`. The grid uses [DOM virtualisation](https://www.ag-grid.com/vue-data-grid/dom-virtualisation/) for rendering large amounts of data, and needs to know the height of virtualised elements in order to calculate their layout. It does this by measuring the values of CSS variables such as `--ag-row-height`.

Using CSS to set a height on a row element itself e.g. `.ag-row { height: 50px; }` is not supported.