Audit History Panel

createAuditHistoryPanelDock

export function createAuditHistoryPanelDock(
  panel: HTMLElement,
  grid: HTMLRevoGridElement,
  placement: AuditHistoryPanelPlacement,
);

---

defineAuditHistoryPanel

Renders the Audit History panel into el for the given RevoGrid element.

The grid must have AuditHistoryPlugin installed.

export function defineAuditHistoryPanel(el: HTMLElement, grid: HTMLRevoGridElement, options: AuditHistoryPanelOptions = {}): AuditHistoryPanelHandle;

---

AuditHistoryPanelDateFormatContext

export type AuditHistoryPanelDateFormatContext = {
  mode: 'time' | 'day' | 'filter';
  record?: AuditRecord;
};

---

AuditHistoryPanelEvents

export type AuditHistoryPanelEvents = {
  beforeRecordSelect?: (context: AuditHistoryPanelRecordContext) => boolean | void;
  beforeCompareOpen?: (context: AuditHistoryPanelRecordContext) => boolean | void;
  beforeJumpToCell?: (context: AuditHistoryPanelJumpContext) => boolean | void;
  beforeRestore?: (context: AuditHistoryPanelRestoreContext) => boolean | void;
  beforeExport?: (context: AuditHistoryPanelExportContext) => boolean | void;
};

---

AuditHistoryPanelExportContext

export type AuditHistoryPanelExportContext = {
  format: AuditHistoryExportFormat;
};

---

AuditHistoryPanelJumpContext

export type AuditHistoryPanelJumpContext = {
  record: AuditRecord;
  change: AuditChange;
};

---

AuditHistoryPanelLabels

export type AuditHistoryPanelLabels = {
  title: string;
  liveStatus: string;
  recordsSummary: (count: number) => string;
  changesSummary: (count: number) => string;
  cellsSummary: (count: number) => string;
  rowsSummary: (count: number) => string;
  scopedChangesSummary: (visibleChanges: number, totalChanges: number) => string;
  additionalChanges: (target: string, additionalCount: number) => string;
  countLabel: (count: number) => string;
  scopeLabel: (label: string, count: number) => string;
  scopeAriaLabel?: string;
  /** Optional full sentence formatter for languages with a different word order. */
  recordSummary?: (context: AuditHistoryPanelRecordSummaryContext) => string;
  allTab: string;
  rowTab: string;
  cellTab: string;
  tableTab: string;
  selectedCell: (rowId: string, column: ColumnProp) => string;
  selectedRow: (rowId: string) => string;
  export: string;
  exportCsv: string;
  exportJson: string;
  exportCsvTitle: string;
  exportJsonTitle: string;
  close: string;
  openPanel: string;
  searchPlaceholder: string;
  searchAriaLabel: string;
  searchShortcut: string;
  userPlaceholder: string;
  /** Independent visible captions; omitted captions retain the existing placeholder/aria-label defaults. */
  userFilterLabel?: string;
  columnFilterLabel?: string;
  actionFilterLabel?: string;
  dateFromFilterLabel?: string;
  dateToFilterLabel?: string;
  userAriaLabel: string;
  columnAriaLabel: string;
  actionAriaLabel: string;
  dateFromAriaLabel: string;
  dateToAriaLabel: string;
  dateFromPrefix: string;
  dateToPrefix: string;
  dateFromChip: (formattedDate: string, prefix: string) => string;
  dateToChip: (formattedDate: string, prefix: string) => string;
  allColumns: string;
  allActions: string;
  clearFilters: string;
  addFilter: string;
  closeFilters: string;
  exportResults: (count: number) => string;
  removeFilter: (label: string) => string;
  noRecords: string;
  noComparableRecord: string;
  scopedRecordCount: (visibleChanges: number, totalChanges: number) => string;
  changedBy: (changedAt: string, user: string) => string;
  rowTarget: (rowId: string | undefined, column: ColumnProp | undefined) => string;
  cellValues: (oldValue: string, newValue: string) => string;
  rowSnapshotAvailable: string;
  rowRemoved: string;
  restoreCell: string;
  restoreRow: string;
  restoreTransaction: string;
  restoreSnapshot: string;
  jumpToCell: string;
  revertAll: string;
  moreActions: string;
  compare: string;
  compareTitle: string;
  compareBefore: string;
  compareAfter: string;
  closeCompare: string;
  compareEmpty: string;
  viewChanges: (count: number) => string;
  previousPage: string;
  nextPage: string;
  pageStatus: (currentPage: number, pageCount: number) => string;
  dayToday: string;
  dayYesterday: string;
  sourceLabels: Record<AuditHistorySource, string>;
  actions: Partial<Record<AuditActionType, string>>;
  actionVerbs: Partial<Record<AuditActionType, string>>;
  /** Optional translation lookup; undefined falls back to the action map. */
  actionLabel?: (actionType: AuditActionType) => string | undefined;
  actionVerb?: (actionType: AuditActionType) => string | undefined;
};

---

AuditHistoryPanelValueFormatContext

export type AuditHistoryPanelValueFormatContext = {
  side: 'before' | 'after';
  change: AuditChange;
};

---

AuditHistoryPanelRecordSummaryContext

export type AuditHistoryPanelRecordSummaryContext = {
  user: string;
  verb: string;
  target: string;
  detail?: string;
};

---

DateTimeDisplayOptions

export type DateDisplayFormat = 'locale' | 'eu' | 'us' | 'iso' | 'long';
export type TimeDisplayFormat = 'locale' | '12h' | '24h';
export type DateTimeDisplayOptions = {
  locale?: string | string[];
  dateFormat?: DateDisplayFormat;
  timeFormat?: TimeDisplayFormat;
  timeZone?: string;
};

The shared formatter is also exported from @revolist/revogrid-pro:

export function formatDateTimeDisplay(
  value: unknown,
  options: DateTimeDisplayOptions & { mode: 'date' | 'time' | 'dateTime' },
): string | undefined;

dateFormat controls day headings and date-filter chips. timeFormat controls timestamps and chip times. EU and ISO default to 24-hour clocks; US defaults to 12-hour clocks. locale controls localized month/day names and the panel language attribute. timeZone controls record timestamps and their calendar-day groups; native date-filter inputs remain browser-local. formatDate overrides every built-in format. See the localization guide for configuration examples.

---

AuditHistoryPanelLabelsOptions (Extended from index.tsx)

export type AuditHistoryPanelLabelsOptions = Partial<Omit<AuditHistoryPanelLabels, 'actions' | 'actionVerbs' | 'sourceLabels'>> & {
  actions?: Partial<Record<AuditActionType, string>>;
  actionVerbs?: Partial<Record<AuditActionType, string>>;
  sourceLabels?: Partial<Record<AuditHistorySource, string>>;
};

---

AuditHistoryPanelHandle

export type AuditHistoryPanelHandle = {
  destroy: () => void;
  setPlacement: (placement: AuditHistoryPanelPlacement) => void;
  refresh: () => Promise<void>;
};

---

AuditHistoryPanelOptions

export type AuditHistoryPanelOptions = DateTimeDisplayOptions & {
  pageSize?: number;
  allowExport?: boolean;
  allowCompare?: boolean | ((context: AuditHistoryPanelRecordContext) => boolean);
  allowClose?: boolean;
  miniOnClose?: boolean;
  restoreActions?: false | AuditRestoreType[] | ((context: AuditHistoryPanelRestoreContext) => boolean);
  formatDate?: (value: string, context: AuditHistoryPanelDateFormatContext) => string;
  /** Display only; raw record values, filtering and exports remain unchanged. */
  formatValue?: (value: unknown, context: AuditHistoryPanelValueFormatContext) => string;
  events?: AuditHistoryPanelEvents;
  placement?: AuditHistoryPanelPlacement;
  tooltips?: false | Partial<Record<AuditHistoryPanelTooltipKey, string | false>>;
  labels?: AuditHistoryPanelLabelsOptions;
};

---

AuditHistoryPanelRecordContext

export type AuditHistoryPanelRecordContext = {
  record: AuditRecord;
  changes: AuditChange[];
};

---

AuditHistoryPanelRestoreContext

export type AuditHistoryPanelRestoreContext = {
  type: AuditRestoreType;
  record?: AuditRecord;
  change?: AuditChange;
  transactionId?: string;
};

---

AuditHistoryPanelPlacement

export type AuditHistoryPanelPlacement = 'right' | 'left' | 'top' | 'bottom' | 'none';

---

AuditHistoryPanelTooltipKey

export type AuditHistoryPanelTooltipKey =
  | 'totalRecords'
  | 'totalChanges'
  | 'selectedScope'
  | 'searchFilter'
  | 'userFilter'
  | 'columnFilter'
  | 'actionFilter'
  | 'dateFromFilter'
  | 'dateToFilter'
  | 'clearFilters';

---

resolveLabels

export function resolveLabels(labels?: AuditHistoryPanelLabelsOptions): AuditHistoryPanelLabels;

---

getAuditActionLabel

export function getAuditActionLabel(labels: AuditHistoryPanelLabels, actionType: AuditActionType): string;

---

getAuditActionVerb

export function getAuditActionVerb(labels: AuditHistoryPanelLabels, actionType: AuditActionType): string;

---

actionTypes

actionTypes: AuditActionType[];

---

titleizeActionType

titleizeActionType: (value: string) => string;

---

createInitialFilters

export function createInitialFilters(): AuditPanelFilters;

---

stringifyValue

export function stringifyValue(value: unknown): string;

---

formatTime

export function formatTime(value: string, mode?: 'compact' | 'day', locale?: string | string[]);

---

formatPanelDate

export function formatPanelDate(
  value: string,
  options: AuditHistoryPanelOptions,
  context: { mode: 'time' | 'day' | 'filter'; record?: AuditRecord },
);

---

getUserLabel

export function getUserLabel(record: AuditRecord);

---

getAvatarLabel

export function getAvatarLabel(record: AuditRecord);

---

matchesFilters

export function matchesFilters(record: AuditRecord, filters: AuditPanelFilters);

---

getScopedChanges

export function getScopedChanges(record: AuditRecord, tab: AuditPanelTab, selected: SelectedAuditTarget): AuditChange[];

---

getRecordSource

export function getRecordSource(type: AuditActionType, record?: AuditRecord): AuditHistorySource;

---

getTargetLabel

export function getTargetLabel(record: AuditRecord, changes: AuditChange[], labels: AuditHistoryPanelLabels);

---

getDetailLabel

export function getDetailLabel(record: AuditRecord, changes: AuditChange[], labels?: AuditHistoryPanelLabels);

---

isComparable

export function isComparable(record: AuditRecord, changes: AuditChange[]);

---

toTimelineRecord

export function toTimelineRecord(
  record: AuditRecord,
  changes: AuditChange[],
  labels: AuditHistoryPanelLabels,
  options: AuditHistoryPanelOptions = {},
): TimelineRecord;

---

groupTimelineRecords

export function groupTimelineRecords(records: TimelineRecord[]): TimelineGroup[];

---

getPlugin

export async function getPlugin(grid: HTMLRevoGridElement): Promise<AuditHistoryPluginRuntime | undefined>;

---

panelRefreshEvents

panelRefreshEvents: readonly ["auditrecord", "auditrecordsloaded", "auditrestore"];

---

canSelectRecord

export function canSelectRecord(options: AuditHistoryPanelOptions, context: AuditHistoryPanelRecordContext);

---

canOpenCompare

export function canOpenCompare(options: AuditHistoryPanelOptions, context: AuditHistoryPanelRecordContext);

---

canJumpToCell

export function canJumpToCell(options: AuditHistoryPanelOptions, context: AuditHistoryPanelJumpContext);

---

canUseRestoreAction

export function canUseRestoreAction(options: AuditHistoryPanelOptions, context: AuditHistoryPanelRestoreContext);

---

canExportAuditHistory

export function canExportAuditHistory(options: AuditHistoryPanelOptions, format: AuditHistoryExportFormat);

---

AuditHistoryTooltip

export function AuditHistoryTooltip({ options, tooltipKey }: { options: AuditHistoryPanelOptions; tooltipKey: AuditHistoryPanelTooltipKey });

---

AuditPanelTab

export type AuditPanelTab = 'cell' | 'row' | 'table';

---

SelectedAuditTarget

export type SelectedAuditTarget = {
  rowId?: string;
  column?: ColumnProp;
  columnLabel?: ColumnProp;
  rowIndex?: number;
  rowType?: DimensionRows;
};

---

AuditPanelFilters

export type AuditPanelFilters = {
  search: string;
  user: string;
  column: string;
  actionType: '' | AuditActionType;
  dateFrom: string;
  dateTo: string;
};

---

AuditHistoryPluginRuntime

export type AuditHistoryPluginRuntime = {
  getRecords: () => AuditRecord[];
  getCellHistory: (rowId: string, column: ColumnProp) => AuditRecord[];
  getRowHistory: (rowId: string) => AuditRecord[];
  getStats: () => AuditHistoryStats;
  exportRecords: (options?: AuditHistoryExportOptions) => string;
  getRowIdentity: (row: DataType | undefined, rowIndex: number, rowType: DimensionRows) => string | undefined;
  canRestoreRecord: (context: { type: AuditRestoreType; record?: AuditRecord; change?: AuditChange; transactionId?: string }) => boolean;
  restoreCell: (change: AuditChange) => boolean;
  restoreRow: (record: AuditRecord) => boolean;
  restoreTransaction: (transactionId: string) => boolean;
  restoreSnapshot?: (recordOrId: AuditRecord | string) => boolean;
  recordEvent?: (input: AuditRecordEventInput) => AuditRecord | undefined;
  createSnapshot?: (label: string, options?: AuditSnapshotOptions) => AuditRecord | undefined;
};

---

VisibleAuditRecord

export type VisibleAuditRecord = {
  record: AuditRecord;
  changes: AuditChange[];
};

---

TimelineRecord (Extended from types.ts)

export type TimelineRecord = VisibleAuditRecord & {
  id: string;
  source: AuditHistorySource;
  verb: string;
  userLabel: string;
  avatarLabel: string;
  avatarIndex?: number;
  avatarColor?: string;
  targetLabel: string;
  detailLabel?: string;
  rangeLabel?: string;
  changedAtLabel: string;
  dayKey: string;
  dayLabel: string;
  daySubLabel?: string;
  accent: boolean;
  comparable: boolean;
};

---

TimelineGroup

export type TimelineGroup = {
  key: string;
  label: string;
  subLabel?: string;
  records: TimelineRecord[];
};

---

AuditHistoryPanel

export function AuditHistoryPanel({
  grid,
  options = {},
  refreshSignal = 0,
  onClose,
}: {
  grid: HTMLRevoGridElement;
  options?: AuditHistoryPanelOptions;
  refreshSignal?: number;
  onClose?: () => void;
});

---

CompareDrawer

export function CompareDrawer({ record, labels, options, onClose }: CompareDrawerProps);

---

Filters

export function Filters({ filters, columns, actionTypes, labels, options, searchInputRef, onFiltersChange, onClearFilters }: FiltersProps);

---

MiniAuditHistoryPanel

export function MiniAuditHistoryPanel({
  grid,
  options,
  onOpen,
}: {
  grid: HTMLRevoGridElement;
  options: AuditHistoryPanelOptions;
  onOpen: () => void;
});

---

Pagination

export function Pagination({
  visibleRecordCount,
  pageSize,
  currentPage,
  pageCount,
  labels,
  onPageChange,
}: PaginationProps);

---

RecordsList

export function RecordsList({
  groups,
  labels,
  plugin,
  selectedRecordId,
  collapsingRecordId,
  onSelectRecord,
  onRestoreCell,
  onRestoreRow,
  onRestoreTransaction,
  onRestoreSnapshot,
  onJumpToChange,
  canUseRestoreAction,
  canJumpToChange,
}: RecordsListProps);

---

Toolbar

export function Toolbar({
  records,
  stats,
  selected,
  tab,
  tabCounts,
  labels,
  options,
  onTabChange,
  onExport,
  onClose,
}: ToolbarProps);