# Grid Preset
URL: https://pro.rv-grid.com/guides/data-manage/grid-preset/
Source: src/content/docs/guides/data-manage/grid-preset.mdx
Description: Compose common Pro grid behaviors with one aggregate preset plugin.
`GridPresetPlugin` is a Pro aggregate plugin. It installs a named set of
existing Pro plugins and applies sensible defaults only when the matching direct
grid prop is missing.

The preset does not duplicate configuration already owned by individual
plugins. Customize behavior through the regular plugin props such as
`grid.tree`, `grid.rowOrder`, `grid.rowContextMenu`, `grid.columnContextMenu`,
`grid.masterRow`, `grid.stretch`, and `grid.columnTypes`.

## Project Pipeline

Use `project-pipeline` for task and project grids that need event management,
row drag and drop, row selection, master-detail overlays, row headers, row and
column context menus, column stretch, animation, advanced filtering, filter
headers, column hiding, tooltips, and column add popup.

```ts
import { GridPresetPlugin } from '@revolist/revogrid-presets';

const grid = document.createElement('revo-grid');

grid.plugins = [GridPresetPlugin];
grid.gridPreset = 'project-pipeline';

grid.columns = [
  { prop: 'name', name: 'Task', tree: true, rowDrag: true },
  { prop: 'owner', name: 'Owner' },
  { prop: 'status', name: 'Status' },
];

grid.source = [
  { id: 1, parentId: null, name: 'Launch plan', owner: 'PM', status: 'Active' },
  { id: 2, parentId: 1, name: 'Design review', owner: 'Design', status: 'Done' },
];
```

`project-pipeline` installs tree capability, but hierarchy is opt-in. Set
`grid.tree` when the project grid should use parent/child rows:

```ts
grid.tree = {
  idField: 'id',
  parentIdField: 'parentId',
  rootParentId: null,
  animation: true,
};
```

It creates missing `grid.rowOrder`, `grid.stretch`, `grid.rowContextMenu`, and
`grid.columnContextMenu` defaults.

## Override Tree Settings

Set `grid.tree` before or after `gridPreset`. The direct prop is the source of
truth, so the preset does not overwrite it.

```ts
grid.plugins = [GridPresetPlugin];
grid.gridPreset = 'project-pipeline';

grid.tree = {
  idField: 'taskId',
  parentIdField: 'parentTaskId',
  rootParentId: 'root',
  expandedRowIds: new Set(['planning']),
};
```

## Extend Context Menus

Use the existing context menu props when you want to replace preset defaults.

```ts
grid.plugins = [GridPresetPlugin];
grid.gridPreset = 'project-pipeline';

grid.rowContextMenu = {
  items: [
    {
      name: 'Open task',
      action: (_event, _focused, _range, close, context) => {
        console.log('row menu', context?.menu);
        close?.();
      },
    },
  ],
};

grid.columnContextMenu = {
  items: [
    { name: 'Autosize column' },
    { name: 'Hide column' },
  ],
};
```

For `operations`, use `gridPreset.contextMenus` when you want to keep the
default row/column operations and append app-specific actions.

```ts
grid.plugins = [GridPresetPlugin];
grid.gridPreset = {
  preset: 'operations',
  contextMenus: {
    row: {
      mode: 'extend',
      items: [
        {
          name: 'Copy invoice',
          action: (_event, _focused, _range, close) => close?.(),
        },
      ],
    },
  },
};
```

## Operations Preset

Use `operations` for a basic operational grid with event management, row
selection, row headers, context menus, column stretch, odd row styling, column
hide support, and tooltips.

```ts
grid.plugins = [GridPresetPlugin];
grid.gridPreset = 'operations';

grid.stretch = 'last';
```

The preset supplies a default row menu with `Add new row before`, `Add new row
after`, and `Delete row`. It supplies a default column menu for sorting, hiding,
pinning/unpinning, grouping by column, clearing sorting, clearing grouping, and
opening/clearing filters. Sorting and filtering entries only appear when the
target column and grid support those capabilities. Setting
`grid.rowContextMenu` or `grid.columnContextMenu` directly replaces those
defaults; `contextMenus.*.mode = 'extend'` appends to them.

Grouped column headers use the same column menu entry point. The operations
preset adds group-wide actions for clearing sorting/filtering, grouping by the
group columns, clearing grouping, hiding the whole group, pinning the group
left/right, and unpinning pinned groups.

## Common Column Types

Use `common-column-types` to register a reusable column type map for common data
and Pro editor cells.

```ts
import { GridPresetPlugin } from '@revolist/revogrid-presets';

grid.plugins = [GridPresetPlugin];
grid.gridPreset = {
  presets: ['common-column-types', 'project-pipeline'],
  conflictPolicy: 'silent',
};

grid.columns = [
  { prop: 'due', name: 'Due', columnType: 'date' },
  { prop: 'budget', name: 'Budget', columnType: 'currency' },
  { prop: 'status', name: 'Status', columnType: 'dropdown' },
];
```

The built-in keys are `date`, `number`, `integer`, `percent`, `currency`,
`select`, `dropdown`, `progress`, `rating`, `rowSelect`, `multi`, `checkbox`,
`counter`, `slider`, `timeline`, `textarea`, `link`, `avatar`, `avatarText`,
`badge`, `thumbs`, `change`, `progressLine`, `progressLineValue`,
`circularProgress`, `timelineRange`, `sparkline`, and `heatmap`.

For project and operations grids, those visual keys keep column definitions
compact while still using the existing Pro renderers:

```ts
grid.plugins = [GridPresetPlugin];
grid.gridPreset = 'common-column-types';
grid.columns = [
  { prop: 'owner', columnType: 'avatarText' },
  {
    prop: 'status',
    columnType: 'badge',
    badgeStyles: {
      Blocked: { backgroundColor: '#fee2e2', color: '#991b1b' },
    },
  },
  { prop: 'progress', columnType: 'progressLine' },
];
```

When you need common types plus custom types, use the helper and assign
`grid.columnTypes` directly:

```ts
import { createCommonColumnTypes } from '@revolist/revogrid-presets';

grid.columnTypes = {
  ...createCommonColumnTypes(),
  statusBadge: { readonly: true },
};
```

## Tree Preset

Use `tree` when the grid only needs event management, hierarchy, row ordering,
selection, row headers, context menus, stretch, and dimension animation.

```ts
grid.plugins = [GridPresetPlugin];
grid.gridPreset = 'tree';

grid.tree = {
  idField: 'id',
  parentIdField: 'parentId',
  rootParentId: null,
};
```

## Plugin Overrides

Use the object form to merge presets, change the preset plugin list, or silence
warnings. Keep plugin behavior configuration on direct plugin props.

```ts
import { GridPresetPlugin } from '@revolist/revogrid-presets';
import { TooltipPlugin } from '@revolist/revogrid-pro';

grid.plugins = [GridPresetPlugin];
grid.gridPreset = {
  presets: ['tree', 'operations'],
  plugins: {
    prepend: [MyBeforePresetPlugin],
    append: [MyAfterPresetPlugin],
    remove: [TooltipPlugin],
  },
};
```

`GridPresetPlugin` skips duplicate classes and skips plugins that are already
registered in the grid plugin provider.

You can also merge presets with the array shorthand:

```ts
grid.gridPreset = ['tree', 'operations'];
```

If you only want a reusable plugin pack and do not want any built-in preset
defaults, omit `preset`/`presets` and provide the plugin list directly:

```ts
import {
  GridPresetPlugin,
  type GridPresetConfig,
} from '@revolist/revogrid-presets';

const customPreset = {
  plugins: {
    append: [MyStatusPlugin, MyAuditPlugin],
  },
} satisfies GridPresetConfig;

grid.plugins = [GridPresetPlugin];
grid.gridPreset = customPreset;
```

## Conflict Warnings

Presets do not block conflicting features. By default they warn when they find
likely overlap with `RowExpandPlugin`, core grouping, or
`ServerSideGroupingPlugin`.

```ts
grid.gridPreset = {
  preset: 'project-pipeline',
  conflictPolicy: 'silent',
};
```

## Commands

```sh
pnpm docs:api
pnpm --filter @revolist/revogrid-presets test:ssr-import
pnpm --filter @revolist/revogrid-presets test
pnpm --filter @revolist/revogrid-presets lint
pnpm --filter @revolist/revogrid-presets build
pnpm --filter @revolist/revogrid-portal build
```

See the [Grid Preset API](/api/grid-preset/) for exported types and module
extensions.
