Grid Preset

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.

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:

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.

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.

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.

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.

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.

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:

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:

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.

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.

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:

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:

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.

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

Commands

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 for exported types and module extensions.