Data Grid Formatting Panel

Module Extensions

HTMLRevoGridElement (Extended from global)

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

---

AdditionalData (Extended from @revolist/revogrid)

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

Plugin API

resolveDataGridFormattingPanelSelection

export function resolveDataGridFormattingPanelSelection<T extends DataType>(
  revogrid: HTMLRevoGridElement,
  providers: PluginProviders,
  headerColumn?: ColumnRegular,
): DataGridFormattingSelection<T> | undefined;

---

selectionFormats

export function selectionFormats<T extends DataType>(
  formatting: DataGridFormattingPlugin<T>,
  selection?: DataGridFormattingSelection<T>,
): (DataGridCellFormat | undefined)[];

---

commonAppearance

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

---

commonValueFormat

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

---

common

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

---

numericPreset

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

---

MixedValue

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

---

FormattingPanelValueCategory

export type FormattingPanelValueCategory = DataGridValueFormatPreset | 'advanced';

---

FormattingPanelValueFormat

interface FormattingPanelValueFormat {
  readonly category: MixedValue<FormattingPanelValueCategory>;
  readonly presentationId?: string
}

---

FormattingPanelAppearance

interface FormattingPanelAppearance {
  readonly fontFamily: MixedValue<DataGridCellAppearance['fontFamily']>;
  readonly fontSize: MixedValue<DataGridCellAppearance['fontSize']>;
  readonly bold: MixedValue<DataGridCellAppearance['bold']>;
  readonly italic: MixedValue<DataGridCellAppearance['italic']>;
  readonly underline: MixedValue<DataGridCellAppearance['underline']>;
  readonly strike: MixedValue<DataGridCellAppearance['strike']>;
  readonly textColor: MixedValue<DataGridCellAppearance['textColor']>;
  readonly fillColor: MixedValue<DataGridCellAppearance['fillColor']>;
  readonly horizontal: MixedValue<DataGridCellAppearance['horizontal']>;
  readonly vertical: MixedValue<DataGridCellAppearance['vertical']>;
  readonly wrap: MixedValue<DataGridCellAppearance['wrap']>;
  readonly borderStyle: MixedValue<DataGridCellAppearance['borderStyle']>;
  readonly borderColor: MixedValue<DataGridCellAppearance['borderColor']>
}

---

DataGridFormattingPanel

export function DataGridFormattingPanel<T extends DataType>({
  formatting,
  selection,
  panelLocale,
}: DataGridFormattingPanelProps<T>);

---

resolveDataGridFormattingPanelLocale

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

---

DataGridFormattingPanelLocaleText

interface DataGridFormattingPanelLocaleText {
  readonly toolbar: string;
  readonly mixed: string;
  readonly more: string;
  readonly decreaseDecimals: string;
  readonly increaseDecimals: string;
  readonly formatCells: string
}

---

DataGridFormattingPanelConfig

interface DataGridFormattingPanelConfig {
  readonly localeText?: Partial<DataGridFormattingPanelLocaleText>
}

---

DataGridFormattingPanelSetting

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

/** Reactive formatting-panel setting. Omitted and `false` are disabled. */
export type DataGridFormattingPanelSetting = boolean | DataGridFormattingPanelConfig;

---

DATA_GRID_FORMATTING_PANEL_LOCALE

DATA_GRID_FORMATTING_PANEL_LOCALE: {
  toolbar: string;
  mixed: string;
  more: string;
  decreaseDecimals: string;
  increaseDecimals: string;
  formatCells: string;
};

---

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.

Dependencies

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

class DataGridFormattingPanelPlugin {}

---

AppearanceControls

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

---

horizontalOptions

export function horizontalOptions(locale: DataGridFormattingLocaleText);

---

verticalOptions

export function verticalOptions(locale: DataGridFormattingLocaleText);

---

borderOptions

export function borderOptions(locale: DataGridFormattingLocaleText);

---

Divider

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

---

IconButton

export function IconButton({
  label,
  icon,
  visibleLabel,
  className = '',
  disabled,
  pressed,
  expanded,
  onClick,
}: IconButtonProps);

---

TextIconButton

export function TextIconButton({ label, text, icon, disabled, onClick }: {
  readonly label: string;
  readonly text: string;
  readonly icon: string;
  readonly disabled?: boolean;
  readonly onClick: () => void;
});

---

ToggleButton

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

---

IconSelect

export function IconSelect({ label, value, options, icon, disabled, className = '', onChange }: {
  readonly label: string;
  readonly value: MixedValue<string>;
  readonly options: readonly (readonly string[])[];
  readonly icon: string;
  readonly disabled?: boolean;
  readonly className?: string;
  readonly onChange: (value: string) => void;
});

---

CompactColorPicker

export function CompactColorPicker({ label, icon, value, locale, disabled, onChange }: {
  readonly label: string;
  readonly icon: string;
  readonly value: MixedValue<string>;
  readonly locale: DataGridFormattingLocaleText;
  readonly disabled?: boolean;
  readonly onChange: (value: string | undefined) => void;
});

---

horizontalIcon

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

---

verticalIcon

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

---

IconButtonProps

interface IconButtonProps {
  readonly label: string;
  readonly icon: string;
  readonly visibleLabel?: string;
  readonly className?: string;
  readonly disabled?: boolean;
  readonly pressed?: boolean | 'mixed';
  readonly expanded?: boolean;
  readonly onClick: () => void
}

---

FormattingPanelOverflow

export function FormattingPanelOverflow({
  appearance,
  locale,
  panelLocale,
  fonts,
  disabled,
  onAppearance,
  onFormatCells,
}: {
  readonly appearance: FormattingPanelAppearance;
  readonly locale: DataGridFormattingLocaleText;
  readonly panelLocale: DataGridFormattingPanelLocaleText;
  readonly fonts: readonly string[];
  readonly disabled: boolean;
  readonly onAppearance: (patch: Partial<DataGridCellAppearance>) => void;
  readonly onFormatCells: () => void;
});

---

TypographyControls

export function TypographyControls({
  appearance,
  locale,
  panelLocale,
  fonts,
  disabled,
  onAppearance,
}: {
  readonly appearance: FormattingPanelAppearance;
  readonly locale: DataGridFormattingLocaleText;
  readonly panelLocale: DataGridFormattingPanelLocaleText;
  readonly fonts: readonly string[];
  readonly disabled: boolean;
  readonly onAppearance: (patch: Partial<DataGridCellAppearance>) => void;
});

---

FontFamilyOptions

export function FontFamilyOptions({ value, fonts, defaultLabel, mixedLabel }: {
  readonly value: FormattingPanelAppearance['fontFamily'];
  readonly fonts: readonly string[];
  readonly defaultLabel: string;
  readonly mixedLabel: string;
});

---

FontSizeInput

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

---

ValueFormatControls

export function ValueFormatControls({
  category,
  advancedLabel,
  valueKind,
  locale,
  panelLocale,
  disabled,
  canFormatValue,
  onPreset,
  onAdjustDecimals,
}: {
  readonly category: MixedValue<FormattingPanelValueCategory>;
  readonly advancedLabel: string;
  readonly valueKind: DataGridFormattingValueKind;
  readonly locale: DataGridFormattingLocaleText;
  readonly panelLocale: DataGridFormattingPanelLocaleText;
  readonly disabled: boolean;
  readonly canFormatValue: boolean;
  readonly onPreset: (preset: DataGridValueFormatPreset) => void;
  readonly onAdjustDecimals: (direction: -1 | 1) => void;
});