Panel and Filters

Select a grid cell, choose a scope, or open Filters. The selected cell stays visible while you review activity.

The built-in panel docks to the right of the grid by default and can be pinned with placement: 'left' | 'right' | 'top' | 'bottom' | 'none'. It includes a compact feed with timeline day grouping, search, a floating user/column/action/date filter menu, removable active-filter chips, explicit cell and row scope selection, pagination, CSV/JSON export of all matching records in the current scope, hover/focus restore and jump actions, keyboard-accessible inline comparison, optional mini close state, and i18n-friendly labels. Use restoreActions, callback-capable allowCompare, formatDate, and events to control panel actions. Pass tooltips: false to hide all help icons, or override/hide individual entries with tooltips: { searchFilter: 'Find a record', clearFilters: false }. Pass labels to rename visible text, placeholders, aria labels, action names, source labels, and dynamic strings such as pagination or selected row/cell summaries.

Restore events are cancellable

Listen for beforeauditrestore to validate or block a restore, and auditrestore after a restore succeeds. New audit records are emitted through auditrecord. Storage and hook failures are emitted through auditerror; loaded record batches are emitted through auditrecordsloaded.

The scope menu stays on the selected mode while the grid selection changes. Filters open above the feed without reducing the records area; press Escape to close the menu and return focus to its trigger. Activate an event with a click or Enter to compare changes inline while keeping the feed and search visible. Panel exports include every matching page and only the changes within the selected row or cell scope. The plugin-level exportRecords(options, selection?) API retains its explicit filter contract. Its optional second argument exports a supplied record selection through the same serializer and auditerror handling without replacing stored history.

Cell Change Indicators

The Audit History examples also mark edited cells directly in the grid. When a cell has recorded changes, the cell shows a small upper-right corner marker aligned to the cell edge. Hovering the cell uses TooltipPlugin to show the change count, latest before/after value, user, and timestamp.

This is built on existing plugin APIs: resolve the AuditHistoryPlugin instance, call getCellHistory(rowId, column) from cell rendering hooks, add tooltip attributes through cellProperties, and refresh visible rows when audit events fire.

const records = auditPlugin.getCellHistory(row.id, column.prop);

The marker is only a visual affordance. The audit panel remains the complete review and restore surface.

Configure the Panel

const panel = defineAuditHistoryPanel(panelElement, grid, {
  placement: 'right',
  pageSize: 25,
  allowExport: true,
  restoreActions: ['cell', 'row'],
});

panel.setPlacement('bottom');
panel.refresh();
// When the owning view unmounts:
panel.destroy();

Column filter choices use grid column names, while their keys remain the original props. The selected grid cell or range remains highlighted while using panel controls. Use localization and dates to customize every label and timestamp format.