Data Grid Formatting Panel

Module Extensions

`HTMLRevoGridElement` (Extended from `global`)

1
interface HTMLRevoGridElement {
2
  /** Reactive opt-in single-row formatting toolbar configuration. */
3
      dataGridFormattingPanel?: DataGridFormattingPanelSetting;
4
  'data-grid-formatting-panel'?: DataGridFormattingPanelSetting
5
}

`AdditionalData` (Extended from `@revolist/revogrid`)

1
interface AdditionalData {
2
  /** @deprecated Prefer `grid.dataGridFormattingPanel`. */
3
      dataGridFormattingPanel?: DataGridFormattingPanelSetting
4
}

Plugin API

`resolveDataGridFormattingPanelSelection`

1
export function resolveDataGridFormattingPanelSelection<T extends DataType>(
2
  revogrid: HTMLRevoGridElement,
3
  providers: PluginProviders,
4
  headerColumn?: ColumnRegular,
5
): DataGridFormattingResolvedSelection<T> | undefined;

`selectionFormats`

1
export function selectionFormats<T extends DataType>(
2
  formatting: DataGridFormattingPlugin<T>,
3
  providers: PluginProviders,
4
  selection?: DataGridFormattingResolvedSelection<T>,
5
): (DataGridCellFormat | undefined)[];

`commonAppearance`

1
export function commonAppearance(
2
  formats: readonly (DataGridCellFormat | undefined)[],
3
): FormattingPanelAppearance;

`commonValueFormat`

1
export function commonValueFormat(
2
  formats: readonly (DataGridCellFormat | undefined)[],
3
): FormattingPanelValueFormat;

`common`

1
export function common<T>(values: readonly (T | undefined)[]): MixedValue<T>;

`numericPreset`

1
export function numericPreset(value?: DataGridValueFormatPreset): DataGridValueFormatPreset;

`stepNumericValueFormat`

1
export function stepNumericValueFormat(
2
  current: DataGridPresetValueFormat | undefined,
3
  base: DataGridPresetValueFormat,
4
  direction: -1 | 1,
5
): DataGridPresetValueFormat;

`MixedValue`

1
export type MixedValue<T> = T | 'mixed' | undefined;

`FormattingPanelValueCategory`

1
export type FormattingPanelValueCategory = DataGridValueFormatPreset | 'advanced';

`FormattingPanelValueFormat`

1
interface FormattingPanelValueFormat {
2
  readonly category: MixedValue<FormattingPanelValueCategory>;
3
  readonly presentationId?: string
4
}

`FormattingPanelAppearance`

1
interface FormattingPanelAppearance {
2
  readonly fontFamily: MixedValue<DataGridCellAppearance['fontFamily']>;
3
  readonly fontSize: MixedValue<DataGridCellAppearance['fontSize']>;
4
  readonly bold: MixedValue<DataGridCellAppearance['bold']>;
5
  readonly italic: MixedValue<DataGridCellAppearance['italic']>;
6
  readonly underline: MixedValue<DataGridCellAppearance['underline']>;
7
  readonly strike: MixedValue<DataGridCellAppearance['strike']>;
8
  readonly textColor: MixedValue<DataGridCellAppearance['textColor']>;
9
  readonly fillColor: MixedValue<DataGridCellAppearance['fillColor']>;
10
  readonly horizontal: MixedValue<DataGridCellAppearance['horizontal']>;
11
  readonly vertical: MixedValue<DataGridCellAppearance['vertical']>;
12
  readonly wrap: MixedValue<DataGridCellAppearance['wrap']>;
13
  readonly borderStyle: MixedValue<DataGridCellAppearance['borderStyle']>;
14
  readonly borderColor: MixedValue<DataGridCellAppearance['borderColor']>
15
}

`DataGridFormattingPanel`

1
export function DataGridFormattingPanel<T extends DataType>({
2
  formatting,
3
  selection,
4
  target,
5
  providers,
6
  panelLocale,
7
  buttons,
8
}: DataGridFormattingPanelProps<T>);

`resolveDataGridFormattingPanelLocale`

1
export function resolveDataGridFormattingPanelLocale(
2
  value?: Partial<DataGridFormattingPanelLocaleText>,
3
): DataGridFormattingPanelLocaleText;

`DataGridFormattingPanelLocaleText`

1
interface DataGridFormattingPanelLocaleText {
2
  readonly toolbar: string;
3
  readonly mixed: string;
4
  readonly more: string;
5
  readonly decreaseDecimals: string;
6
  readonly increaseDecimals: string;
7
  readonly formatCells: string
8
}

`DataGridFormattingPanelButtonContext`

Runtime state supplied to an application-owned formatting-panel button.

1
interface DataGridFormattingPanelButtonContext {
2
  readonly formatting: DataGridFormattingPlugin<T>;
3
  readonly providers: PluginProviders;
4
  readonly selection?: DataGridFormattingResolvedSelection<T>;
5
  readonly target?: DataGridFormattingTarget;
6
  /** True when the panel has no writable formatting target. */
7
    readonly disabled: boolean;
8
  /** Definition resolved from `presentationId`, when one is registered. */
9
    readonly presentation?: DataGridAdvancedFormatDefinition
10
}

`DataGridFormattingPanelButtonState`

1
export type DataGridFormattingPanelButtonState<T extends DataType, TValue> =
2
  | TValue
3
  | ((context: DataGridFormattingPanelButtonContext<T>) => TValue);

`DataGridFormattingPanelButton`

Application-owned action or registered-format shortcut shown in the toolbar.

1
interface DataGridFormattingPanelButton {
2
  /** Stable key used for rendering and application styling hooks. */
3
    readonly id: string;
4
  /** Accessible label. Falls back to the registered presentation label, then `id`. */
5
    readonly label?: string;
6
  /** Trusted raw SVG markup. Falls back to the registered presentation icon. */
7
    readonly icon?: string;
8
  /** Optional caption rendered beside the icon. */
9
    readonly visibleLabel?: string;
10
  readonly className?: string;
11
  /** Registered advanced-format shortcut applied when `onClick` is omitted. */
12
    readonly presentationId?: string;
13
  readonly presentationOptions?: Readonly<Record<string, unknown>>;
14
  /** Defaults to the panel's selection-disabled state. */
15
    readonly disabled?: DataGridFormattingPanelButtonState<T, boolean>;
16
  /** Presentation shortcuts infer pressed state from the active format. */
17
    readonly pressed?: DataGridFormattingPanelButtonState<T, boolean | 'mixed'>;
18
  /** Custom action. When supplied, it takes precedence over `presentationId`. */
19
    readonly onClick?: (context: DataGridFormattingPanelButtonContext<T>) => void
20
}

`DataGridFormattingPanelConfig`

1
interface DataGridFormattingPanelConfig {
2
  readonly localeText?: Partial<DataGridFormattingPanelLocaleText>;
3
  /**
4
     * Application toolbar actions. Fonts and advanced-format definitions are
5
     * inherited from the shared `DataGridFormattingPlugin` configuration.
6
     */
7
    readonly buttons?: readonly DataGridFormattingPanelButton<T>[]
8
}

`DataGridFormattingPanelSetting`

Reactive formatting-panel setting. Omitted and false are disabled.

1
/** Reactive formatting-panel setting. Omitted and `false` are disabled. */
2
export type DataGridFormattingPanelSetting<T extends DataType = DataType> =
3
  | boolean
4
  | DataGridFormattingPanelConfig<T>;

`DATA_GRID_FORMATTING_PANEL_LOCALE`

1
DATA_GRID_FORMATTING_PANEL_LOCALE: {
2
  toolbar: string;
3
  mixed: string;
4
  more: string;
5
  decreaseDecimals: string;
6
  increaseDecimals: string;
7
  formatCells: string;
8
};

`DataGridFormattingPanelPlugin`

One-line spreadsheet formatting toolbar for the active RevoGrid selection. Its runtime is installed with DataGridFormattingPlugin, but the toolbar is disabled until grid.dataGridFormattingPanel is set to true or a config. Fonts and advanced formats come from the shared formatting configuration; application buttons can run callbacks or reference a registered presentation.

Example: Custom format shortcut using shared label and icon metadata

1
grid.dataGridContextMenu = { formatting: {
2
  fontFamilies: ['Inter', 'IBM Plex Mono'],
3
  advancedFormats: { customFormats: [riskFormat] },
4
} };
5
grid.dataGridFormattingPanel = {
6
  buttons: [{ id: 'risk', presentationId: riskFormat.id }],
7
};

Dependencies

Auto-installed DataGridFormattingPlugin: Applies toolbar commands through DataGridFormattingPlugin.
Event integration focuscell, setrange, headerclick: Tracks active cell ranges and whole-column header selections.

1
class DataGridFormattingPanelPlugin {}

`AppearanceControls`

1
export function AppearanceControls({ appearance, locale, disabled, onAppearance }: {
2
  readonly appearance: FormattingPanelAppearance;
3
  readonly locale: DataGridFormattingLocaleText;
4
  readonly disabled: boolean;
5
  readonly onAppearance: (patch: Partial<DataGridCellAppearance>) => void;
6
});

`horizontalOptions`

1
export function horizontalOptions(locale: DataGridFormattingLocaleText);

`verticalOptions`

1
export function verticalOptions(locale: DataGridFormattingLocaleText);

`borderOptions`

1
export function borderOptions(locale: DataGridFormattingLocaleText);

`Divider`

1
export function Divider({ className = '' }: { readonly className?: string });

`IconButton`

1
export function IconButton({
2
  label,
3
  icon,
4
  visibleLabel,
5
  className = '',
6
  disabled,
7
  pressed,
8
  expanded,
9
  onClick,
10
}: IconButtonProps);

`TextIconButton`

1
export function TextIconButton({ label, text, icon, disabled, onClick }: {
2
  readonly label: string;
3
  readonly text: string;
4
  readonly icon: string;
5
  readonly disabled?: boolean;
6
  readonly onClick: () => void;
7
});

`ToggleButton`

1
export function ToggleButton({ value, onChange, ...props }: Omit<IconButtonProps, 'pressed' | 'onClick'> & {
2
  readonly value: MixedValue<boolean>;
3
  readonly onChange: (value: boolean) => void;
4
});

`IconSelect`

1
export function IconSelect({ label, value, options, icon, disabled, className = '', onChange }: {
2
  readonly label: string;
3
  readonly value: MixedValue<string>;
4
  readonly options: readonly (readonly string[])[];
5
  readonly icon: string;
6
  readonly disabled?: boolean;
7
  readonly className?: string;
8
  readonly onChange: (value: string) => void;
9
});

`CompactColorPicker`

1
export function CompactColorPicker({ label, icon, value, locale, disabled, onChange }: {
2
  readonly label: string;
3
  readonly icon: string;
4
  readonly value: MixedValue<string>;
5
  readonly locale: DataGridFormattingLocaleText;
6
  readonly disabled?: boolean;
7
  readonly onChange: (value: string | undefined) => void;
8
});

`horizontalIcon`

1
export function horizontalIcon(value: MixedValue<DataGridCellAppearance['horizontal']>): string;

`verticalIcon`

1
export function verticalIcon(value: MixedValue<DataGridCellAppearance['vertical']>): string;

`IconButtonProps`

1
interface IconButtonProps {
2
  readonly label: string;
3
  readonly icon: string;
4
  readonly visibleLabel?: string;
5
  readonly className?: string;
6
  readonly disabled?: boolean;
7
  readonly pressed?: boolean | 'mixed';
8
  readonly expanded?: boolean;
9
  readonly onClick: () => void
10
}

`CustomFormattingButtons`

1
export function CustomFormattingButtons<T extends DataType>({
2
  buttons,
3
  formatting,
4
  selection,
5
  target,
6
  providers,
7
  disabled,
8
  activePresentationId,
9
}: {
10
  readonly buttons: readonly DataGridFormattingPanelButton<T>[];
11
  readonly formatting: DataGridFormattingPlugin<T>;
12
  readonly selection?: DataGridFormattingResolvedSelection<T>;
13
  readonly target?: DataGridFormattingTarget;
14
  readonly providers: PluginProviders;
15
  readonly disabled: boolean;
16
  readonly activePresentationId?: string;
17
});

`FormattingPanelOverflow`

1
export function FormattingPanelOverflow({
2
  appearance,
3
  locale,
4
  panelLocale,
5
  fonts,
6
  disabled,
7
  onAppearance,
8
  onFormatCells,
9
}: {
10
  readonly appearance: FormattingPanelAppearance;
11
  readonly locale: DataGridFormattingLocaleText;
12
  readonly panelLocale: DataGridFormattingPanelLocaleText;
13
  readonly fonts: readonly string[];
14
  readonly disabled: boolean;
15
  readonly onAppearance: (patch: Partial<DataGridCellAppearance>) => void;
16
  readonly onFormatCells: () => void;
17
});

`TypographyControls`

1
export function TypographyControls({
2
  appearance,
3
  locale,
4
  panelLocale,
5
  fonts,
6
  disabled,
7
  onAppearance,
8
}: {
9
  readonly appearance: FormattingPanelAppearance;
10
  readonly locale: DataGridFormattingLocaleText;
11
  readonly panelLocale: DataGridFormattingPanelLocaleText;
12
  readonly fonts: readonly string[];
13
  readonly disabled: boolean;
14
  readonly onAppearance: (patch: Partial<DataGridCellAppearance>) => void;
15
});

`FontFamilyOptions`

1
export function FontFamilyOptions({ value, fonts, defaultLabel, mixedLabel }: {
2
  readonly value: FormattingPanelAppearance['fontFamily'];
3
  readonly fonts: readonly string[];
4
  readonly defaultLabel: string;
5
  readonly mixedLabel: string;
6
});

`FontSizeInput`

1
export function FontSizeInput({ value, disabled, onChange }: {
2
  readonly value: FormattingPanelAppearance['fontSize'];
3
  readonly disabled: boolean;
4
  readonly onChange: (value: number | undefined) => void;
5
});

`ValueFormatControls`

1
export function ValueFormatControls({
2
  category,
3
  advancedLabel,
4
  valueKind,
5
  locale,
6
  panelLocale,
7
  disabled,
8
  canFormatValue,
9
  onPreset,
10
  onAdjustDecimals,
11
}: {
12
  readonly category: MixedValue<FormattingPanelValueCategory>;
13
  readonly advancedLabel: string;
14
  readonly valueKind: DataGridFormattingValueKind;
15
  readonly locale: DataGridFormattingLocaleText;
16
  readonly panelLocale: DataGridFormattingPanelLocaleText;
17
  readonly disabled: boolean;
18
  readonly canFormatValue: boolean;
19
  readonly onPreset: (preset: DataGridValueFormatPreset) => void;
20
  readonly onAdjustDecimals: (direction: -1 | 1) => void;
21
});

Data Grid Formatting Panel

Module Extensions

HTMLRevoGridElement (Extended from global)

AdditionalData (Extended from @revolist/revogrid)

Plugin API

resolveDataGridFormattingPanelSelection

selectionFormats

commonAppearance

commonValueFormat

common

numericPreset

stepNumericValueFormat

MixedValue

FormattingPanelValueCategory

FormattingPanelValueFormat

FormattingPanelAppearance

DataGridFormattingPanel

resolveDataGridFormattingPanelLocale

DataGridFormattingPanelLocaleText

DataGridFormattingPanelButtonContext

DataGridFormattingPanelButtonState

DataGridFormattingPanelButton

DataGridFormattingPanelConfig

DataGridFormattingPanelSetting

DATA_GRID_FORMATTING_PANEL_LOCALE

DataGridFormattingPanelPlugin

Dependencies

AppearanceControls

horizontalOptions

verticalOptions

borderOptions

Divider

IconButton

TextIconButton

ToggleButton

IconSelect

CompactColorPicker

horizontalIcon

verticalIcon

IconButtonProps

CustomFormattingButtons

FormattingPanelOverflow

TypographyControls

FontFamilyOptions

FontSizeInput

ValueFormatControls