@highcharts/dashboards/es-modules/Dashboards/Components/GridComponent/GridComponentOptions.d.ts

Highcharts Dashboards framework

import type { GridOptions } from '../../Plugins/GridTypes';
import type { ConnectorOptions as ComponentConnectorOptions, ConnectorTypes as ComponentConnectorTypes, Options as ComponentOptions } from '../Component';
import type { OptionsEntry as SyncOptionsEntry, OptionsRecord as SyncOptionsRecord, RawOptionsRecord as SyncRawOptionsRecord } from '../Sync/Sync';
/**
 * Options to control the Grid component.
 */
export interface Options extends ComponentOptions {
    /**
     * Connector options
     */
    connector?: ComponentConnectorOptions;
    /**
     * The style class to add to the rendered data grid container.
     *
     */
    gridClassName?: string;
    /**
     * The identifier for the rendered data grid container.
     */
    gridID?: string;
    /**
     * Callback to use when a change in the data grid occurs.
     *
     * @private
     *
     * @param e
     * Related keyboard event of the change.
     *
     * @param connector
     * Relate store of the change.
     */
    onUpdate(e: KeyboardEvent, connector: ComponentConnectorTypes): void;
    type: 'Grid';
    /**
     * Generic options to adjust behavior and styling of the rendered data
     * grid.
     */
    gridOptions?: GridOptions;
    /** @private */
    tableAxisMap?: Record<string, string | null>;
    /**
     * Defines which elements should be synced.
     * ```
     * Example:
     * {
     *     highlight: true
     * }
     * ```
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/demo/sync-extremes/ | Extremes Sync }
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/component-options/sync-highlight/ | Highlight Sync }
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/component-options/sync-visibility/ | Visibility Sync }
     *
     */
    sync?: SyncOptions;
    /**
     * Sync options for the component.
     */
    syncHandlers?: SyncOptionsRecord;
}
/**
 * Sync options available for the Grid component.
 *
 * Example:
 * ```
 * {
 *     highlight: true
 * }
 * ```
 */
export interface SyncOptions extends SyncRawOptionsRecord {
    /**
     * Extremes sync is available for Highcharts, KPI, Grid and
     * Navigator components. Sets a common range of displayed data. For the
     * KPI Component sets the last value.
     *
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/demo/sync-extremes/ | Extremes Sync }
     *
     * @default false
     */
    extremes?: boolean | SyncOptionsEntry;
    /**
     * Highlight sync is available for Highcharts and Grid components.
     * It allows to highlight hovered corresponding rows in the table and
     * chart points.
     *
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/component-options/sync-highlight/ | Highlight Sync }
     *
     * @default false
     */
    highlight?: boolean | SyncOptionsEntry;
    /**
     * Visibility sync is available for Highcharts and Grid components.
     * Synchronizes the visibility of data from a hidden/shown series.
     *
     * Try it:
     *
     * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/component-options/sync-visibility/ | Visibility Sync }
     *
     * @default false
     */
    visibility?: boolean | SyncOptionsEntry;
}
/**
 * Grid component highlight sync options.
 *
 * Example:
 * ```
 * {
 *     enabled: true,
 *     autoScroll: true
 * }
 * ```
 */
export interface GridHighlightSyncOptions extends SyncOptionsEntry {
    /**
     * Whether to scroll the data grid to the highlighted row automatically.
     *
     * @default false
     */
    autoScroll?: boolean;
}
export default Options;