import type { A11yOptions, HeaderCellA11yOptions, LangAccessibilityOptions } from './Accessibility/A11yOptions'; import type { PaginationLangOptions, PaginationOptions } from './Pagination/PaginationOptions'; import type { ColumnResizingMode } from './Table/ColumnResizing/ColumnResizing'; import type { ColumnDataType } from './Table/Column'; import type { DataProviderOptionsType } from './Data/DataProviderType'; import type DataTable from '../../Data/DataTable'; import type { CellType as DataTableCellType } from '../../Data/DataTable'; import type DataTableOptions from '../../Data/DataTableOptions'; import type Cell from './Table/Cell'; import type Column from './Table/Column'; import type TableCell from './Table/Body/TableCell'; import type { GridIconName, IconRegistryValue } from './UI/SvgIcons'; import type { LangOptionsCore } from '../../Shared/LangOptionsCore'; import type { Condition as ColumnFilteringCondition } from './Table/Actions/ColumnFiltering/FilteringTypes'; import type CSSObject from '../../Core/Renderer/CSSObject'; /** * Callback function to be called when a header event is triggered. Returns a * formatted cell's string. */ export type CellFormatterCallback = (this: Cell) => string; /** * Callback function to resolve the value of an unbound column cell. * For bound columns, overrides only the rendered content - sorting, * filtering, and export remain unaffected. */ export type CellValueGetterCallback = (this: TableCell, cell: TableCell) => (DataTableCellType | Promise); /** * Callback function to be called when a header event is triggered. Returns a * formatted header's string. */ export type HeaderFormatterCallback = (this: Column) => string; /** * Callback function to resolve dynamic style for a grid entity. */ export type StyleCallback = (this: T, target: T) => CSSObject; /** * A static style object or a callback that returns one. */ export type StyleValue = CSSObject | StyleCallback; /** * Column sorting order type. */ export type ColumnSortingOrder = 'asc' | 'desc' | null; /** * Registry of built-in action IDs for the cell context menu. * Composed features can extend this via module augmentation. */ export interface CellContextMenuBuiltInActionIdRegistry { } /** * Built-in action ID for the cell context menu. */ export type CellContextMenuActionId = keyof CellContextMenuBuiltInActionIdRegistry | (string & {}); /** * Options for a single cell context menu item. */ export interface CellContextMenuActionItemOptions { /** * The label shown in the menu. */ label: string; /** * Optional icon name for the menu item (built-in name from the default * registry or custom name from rendering.icons). */ icon?: string; /** * Whether the menu item should be disabled. */ disabled?: boolean; /** * Whether to render a divider instead of a button. */ separator?: false; /** * Callback executed when the menu item is clicked. * * The cell is available on `this` and is also passed as the first argument * to support arrow functions. */ onClick?: (this: TableCell, cell: TableCell) => void; /** * Nested submenu items. */ items?: Array; } /** * Options for a divider item in the cell context menu. */ export interface CellContextMenuDividerItemOptions { /** * Whether to render a divider instead of a button. */ separator: true; /** * Optional label for accessibility or testing. * Not rendered as a clickable item. */ label?: string; } /** * Options for a built-in item in the cell context menu. */ export interface CellContextMenuBuiltInItemOptions { /** * Built-in action ID. */ actionId: CellContextMenuActionId; /** * Optional custom label for this built-in action. */ label?: string; /** * Optional icon override for this built-in action. */ icon?: GridIconName; /** * Whether this built-in action should be disabled. */ disabled?: boolean; /** * Nested submenu items. */ items?: Array; } /** * Options for a single cell context menu item. */ export type CellContextMenuItemOptions = CellContextMenuDividerItemOptions | CellContextMenuActionItemOptions | CellContextMenuBuiltInItemOptions | CellContextMenuActionId; /** * Cell context menu options. */ export interface CellContextMenuOptions { /** * Whether the cell context menu is enabled. When omitted, the menu is * enabled when `items` are provided, or when a composed feature registers * visible built-in actions for the current cell. */ enabled?: boolean; /** * List of items to show in the cell context menu. */ items?: Array; } /** * Options to control the content and the user experience of a grid structure. */ export interface Options { /** * Accessibility options for the grid. */ accessibility?: A11yOptions; /** * Pagination options for the grid. * * @sample grid-lite/basic/pagination-alignment-controls * Pagination */ pagination?: PaginationOptions; /** * Options for the table caption. */ caption?: CaptionOptions; /** * Default options for all the columns in the grid. Can be overridden * by the `dataTypeColumnDefaults` and individual column options. */ columnDefaults?: ColumnOptions; /** * Options for individual columns. */ columns?: Array; /** * Options for the data provider. * * @sample grid-lite/basic/data-connector * Data from connector * @sample grid-lite/options/data-table-instance * Data from a DataTable instance * @sample grid-lite/options/data-columns * Data from column arrays * @sample grid-pro/demo/serverside-data * Server-side data */ data?: DataProviderOptionsType; /** * Data table with the data to display in the grid structure. * * @deprecated * Use `data.dataTable` instead. */ dataTable?: DataTable | DataTableOptions; /** * Options for the description of the grid. */ description?: DescriptionOptions; /** * Defines the structure of levels in header. Used for grouping columns * headers. * * An array where each item can be either a string (column ID) or an object * of type {@link https://api.highcharts.com/grid/typedoc/interfaces/Grid_Core_Options.GroupedHeaderOptions.html | GroupedHeaderOptions}. * * @sample grid-lite/basic/grouped-headers Grouped headers */ header?: Array; /** * The unique id of the grid. It is generated automatically, if not set. */ id?: string; /** * Language options for the grid. * * @sample grid-lite/demo/internationalization Internationalization */ lang?: LangOptions; /** * Time options for the grid. */ time?: TimeOptions; /** * Options to control the way grid is rendered. */ rendering?: RenderingSettings; } /** * Options to control the way grid is rendered. */ export interface RenderingSettings { /** * Custom or override icons for the grid. Keys are icon names (either * built-in names from the default registry or custom names). Values * are either an SVG definition object or a raw SVG markup string. * Built-in icons can be overridden; new names can be used for custom * icons and referenced where an icon name is accepted (e.g. menu * items, pagination buttons). * * @example * ```js * rendering: { * icons: { * chevronRight: '...', * myCustomIcon: { width: 16, height: 16, children: [{ d: '...' }] } * } * } * ``` * * @sample grid-lite/basic/custom-icons Custom icons */ icons?: Record; /** * Options to control the columns rendering. */ columns?: ColumnsSettings; /** * Options to control the rows rendering. */ rows?: RowsSettings; /** * Options to control the header rendering. */ header?: HeaderSettings; /** * Options to control the table rendering. */ table?: TableSettings; /** * The theme of the Grid. It will set the class name on the container. * Can be set to the empty string to disable the theme. * * @default 'hcg-theme-default' */ theme?: string; } /** * Options to control the columns rendering. */ export interface ColumnsSettings { /** * Options for the columns resizing. */ resizing?: ResizingOptions; } /** * Options to control the columns resizing. */ export interface ResizingOptions { /** * Whether the columns resizing is enabled. If `true`, the user can * resize the columns by dragging the column header edges. * * @sample grid-lite/basic/column-resizing-disabled Column resizing disabled * * @default true */ enabled?: boolean; /** * Determines how column widths are adjusted when resizing. * - `'adjacent'`: Resizing a column will also adjust the width of its * immediate neighbor, keeping the rest of the columns in the same place. * This is the default mode. * - `'independent'`: Only the resized column is changed; all columns to * its right retain their current pixel widths, effectively "freezing" * their widths. * - `'distributed'`: Only the resized column is affected; other column * width settings will not be changed. * * @sample grid-lite/basic/column-resizing Column resizing * @sample grid-lite/basic/custom-column-resizing-mode * Custom resizing mode * * @default 'adjacent' */ mode?: ColumnResizingMode; } /** * Options to control the rows rendering. */ export interface RowsSettings { /** * Buffer of rows to render outside the visible area from the top and from * the bottom while scrolling. The bigger the buffer, the less flicker will * be seen while scrolling, but the more rows will have to be rendered. * * Cannot be lower than 0. * * @default 10 */ bufferSize?: number; /** * Defines the minimum height of the table body (`tbody`) based on the * number of rows that should be visible in the viewport. * * If set to `null`, the minimum height will not be enforced. * * It's ignored when height of the container is set or the `min-height` * style is set on the `tbody` by the user. * * @default 2 */ minVisibleRows?: number | null; /** * Whether the height of the rows should be calculated automatically based * on the content of the cells. If `true`, the ellipsis will be used to * indicate that the content is too long to fit in the cell. * * When there is no need to have different row heights, it is recommended * to set this option to `true` for the performance reasons, to avoid the * unnecessary calculations. * * @sample grid-lite/basic/strict-row-heights Strict row heights * * @default false */ strictHeights?: boolean; /** * Rows virtualization option render rows that are visible in the viewport * only. In case of large data set, the enabled option improve performance * and saves memory. * * The option is automatically set to `true` when the number of rows exceeds * the `virtualizationThreshold` option value. If defined, it takes the * precedence over the `virtualizationThreshold` option. * * @sample grid-lite/options/rows-virtualization * Row virtualization * * @default false */ virtualization?: boolean; /** * The rows virtualization threshold option sets the row count limit at * which virtualization is activated. When the number of rows exceeds this * threshold, virtualization is enabled to optimize performance. * * The option has no effect when the `virtualization` option is defined. * * @default 50 */ virtualizationThreshold?: number; } /** * Options to control the header rendering. */ export interface HeaderSettings { /** * Whether the header should be rendered. * * @default true */ enabled?: boolean; } /** * Options to control the table rendering. */ export interface TableSettings { /** * The custom CSS class name for the table. */ className?: string; } /** * Column options that can be shared between columns but can be set for each * column individually. */ export interface ColumnOptions { /** * Options for all cells in the column. */ cells?: ColumnCellOptions; /** * The data type of the column. Can be one of `string`, `number`, * `boolean` or `date`. * * If not set, the data type is inferred from the first cell in the * column. */ dataType?: ColumnDataType; /** * Options for all the header cells in the column. */ header?: ColumnHeaderOptions; /** * Column sorting options. * * @sample grid-pro/basic/sorting-options Sorting options */ sorting?: ColumnSortingOptions; /** * The width of the column. It can be set in pixels, as a percentage of the * table width, or `'auto'`. If unset or `'auto'`, the width is distributed * evenly between columns without a fixed width. * * This option does not work with the `resizing` option set to `full`. * * If the `resizing` option is undefined, it is set to `mixed` and the * `width` option is used to set the width of the column. */ width?: number | string; /** * Filtering options for the column. * * @sample grid-lite/basic/column-filtering Column filtering */ filtering?: ColumnFilteringOptions; /** * CSS styles for the whole column, applied to the header and body cells. * Can be a static style object or a callback that returns one. */ style?: StyleValue; /** * Whether the column should be included in exports. * * For unbound columns, exporting is always disabled. * * @default true */ exportable?: boolean; } /** * Options for all cells in the column. */ export interface ColumnCellOptions { /** * Whether cells in this column should be rendered as row header cells. * * When enabled, body cells are rendered as `` instead of * ``. This is useful for accessible data grids where the first column * acts as a row header. * * @default false */ rowHeader?: boolean; /** * Allows to define an additional class name to all table cells in the * column. Applied only to cell that are in the table, not in the column * header. It is updated with every cell's value change. * * It uses templating, where context is the table cell instance. * * @default undefined */ className?: string; /** * The format of the cell content within the given column of the grid. * Applied only to cell that are in the table, not in the column header. * * When not set, the default format `'{value}'` is used. * * @sample grid-pro/basic/cell-formatting Cell formatting * * @default undefined */ format?: string; /** * Callback function for formatting cells within the given column of the * grid. Applied only to cell that are in the table not the column * header. * * @sample grid-pro/basic/cell-formatting Cell formatting * * @return * A string to be set as a table cell's content. */ formatter?: CellFormatterCallback; /** * Callback function to resolve the value of an unbound column cell. * For bound columns, overrides only the rendered content - sorting, * filtering, and export remain unaffected. */ valueGetter?: CellValueGetterCallback; /** * Context menu options for table body cells. When configured, a custom * context menu will be shown on right-click. * * @sample grid-lite/demo/cell-context-menu Cell context menu */ contextMenu?: CellContextMenuOptions; /** * CSS styles for table body cells in the column. * Can be a static style object or a callback that returns one. */ style?: StyleValue; } /** * Options for the header cells in the columns. */ export interface ColumnHeaderOptions { /** * Allows user to define an additional class name only to the column header. * * It uses templating, where context is the header cell instance. * * @default undefined */ className?: string; /** * The format of the column header. Use `{id}` to display the column id. */ format?: string; /** * Callback function for formatting the column header. It is called for each * column header cell. * * @return * A string to be set as a header cell's content. */ formatter?: HeaderFormatterCallback; /** * CSS styles for the column header cells. * Can be a static style object or a callback that returns one. */ style?: StyleValue; } /** * Column sorting options available for applying to all columns at once. */ export interface ColumnSortingOptions { /** * Whether to allow users to sort values in column. When it is enabled, * the column header will be clickable. * * When sorting is disabled (`false`), this column cannot be sorted by the * user interface. However, the order of rows in this column may still * change when other columns are sorted. * * @sample grid-pro/basic/sorting-options Sorting options * * @default true */ enabled?: boolean; /** * Sequence of sorting orders used when toggling sorting from the user * interface (for example by clicking the column header). * * The sequence can contain any number of values, in any order, with * duplicates allowed. Allowed values are: `'asc'`, `'desc'`, and `null`. * * If the sequence is empty (`[]`), sorting toggles become a no-op while * the sortable UI can still be shown. * * This option can be set in both `columnDefaults.sorting` and * `columns[].sorting`. * * @default ['asc', 'desc', null] */ orderSequence?: ColumnSortingOrder[]; /** * Custom compare function to sort the column values. It overrides the * default sorting behavior. If not set, the default sorting behavior is * used. * * @param a * The first value to compare. * * @param b * The second value to compare. * * @return * A number indicating whether the first value (`a`) is less than (`-1`), * equal to (`0`), or greater than (`1`) the second value (`b`). */ compare?: (a: DataTableCellType, b: DataTableCellType) => number; } /** * Column sorting options that can be set for each column individually. */ export interface IndividualColumnSortingOptions extends ColumnSortingOptions { /** * The initial sorting order of the column. Can be either `asc` for * ascending, `desc` for descending, or `null` for disabled. * * @default null */ order?: ColumnSortingOrder; /** * Priority of this column when multiple columns are sorted. Lower numbers * have higher priority. */ priority?: number; } /** * Column options that can be set for each column individually. */ export interface IndividualColumnOptions extends ColumnOptions { /** * The custom CSS class name for the column. Applied also to cells that are * in the table and also to the column header cells. * * It does not use templating. * * @sample grid-pro/basic/custom-class Custom class * * @default undefined */ className?: string; /** * Whether the column is enabled and should be displayed. If `false`, * the column will not be rendered. * * @sample grid-lite/options/column-enabled * Toggle column visibility * * @default true */ enabled?: boolean; /** * The column id used by Grid as the column identity. */ id: string; /** * The id of the data source column. * * - `undefined`: defaults to `id`. * - `null`: forces the column to be unbound. */ dataId?: string | null; /** * Column sorting options for this specific column. * * Use this to override `columnDefaults.sorting` or to define initial * sorting state and priority for multi-column sorting. * * @sample grid-pro/basic/sorting-options Sorting options */ sorting?: IndividualColumnSortingOptions; } export interface CaptionOptions { /** * The custom CSS class name for the table caption. */ className?: string; /** * The HTML tag to use for the caption. When set, the caption is rendered * as that element (e.g. `h1`, `p`, `span`). Must be one of * [AST.allowedTags](https://api.highcharts.com/class-reference/Highcharts.AST#allowedTags) * (e.g. `div`, `p`, `span`, `h1`–`h6`). * * @default 'div' */ htmlTag?: string; /** * The caption of the grid. * * @sample grid-lite/options/caption-text * Caption text */ text?: string; } export interface DescriptionOptions { /** * The custom CSS class name for the description. */ className?: string; /** * The description of the grid. */ text?: string; } /** * Options to control the structure of table header. */ export interface GroupedHeaderOptions { /** * Accessibility options for one of the column header cells. */ accessibility?: HeaderCellA11yOptions; /** * The format of the column header. Use `{id}` to display the column id. */ format?: string; /** * The custom CSS class name for the header. */ className?: string; /** * The id of column with data. */ columnId?: string; /** * Columns that are displayed below the header. */ columns?: GroupedHeaderOptions[]; } /** * Options for the credits label. */ export interface CreditsOptions { /** * Whether to show the credits. * * @default true */ enabled?: boolean; /** * The URL that will be opened when the credits label is clicked. * * @default 'https://www.highcharts.com?credits' */ href?: string; /** * The text for the credits label. * * Reference to Highcharts icon, that is enabled in Grid Lite, by default. * */ text?: string; /** * The position of the credits label. * * @default 'bottom' */ position?: 'bottom' | 'top'; } /** * Language options for the grid. */ export interface LangOptions extends LangOptionsCore { /** * Configure the accessibility strings in the chart. */ accessibility?: LangAccessibilityOptions; /** * The text to display when the loading indicator is shown. * * @default 'Loading...' */ loading?: string; /** * The text to display when there is no data to show. * * @default 'No data to display' */ noData?: string; /** * `Filter` translation. * * @default 'Filter' */ filter?: string; /** * `Sort ascending` translation. * * @default 'Sort ascending' */ sortAscending?: string; /** * `Sort descending` translation. * * @default 'Sort descending' */ sortDescending?: string; /** * `Column` translation. * * @default 'Column' */ column?: string; /** * `Set filter` translation. * * @default 'Set filter' */ setFilter?: string; /** * Language options for column filtering conditions. */ columnFilteringConditions?: Partial>; /** * Language options for pagination text values. */ pagination?: PaginationLangOptions; } /** * Options for the time settings. */ export interface TimeOptions { /** * The timezone to use for formatting time and date. The time zone names * can be different between browsers, as described in [mdn docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#timezone). * * @default 'UTC' */ timezone?: string; } /** * Column filtering options. */ export interface FilteringCondition { /** * The condition to use for filtering the column. */ condition?: ColumnFilteringCondition; /** * The value that is used with the condition to filter the column. */ value?: string | number | boolean | null; } export interface ColumnFilteringOptions extends FilteringCondition { /** * Whether the filtering is enabled or not. * * @sample grid-lite/basic/column-filtering Column filtering */ enabled?: boolean; /** * Whether the filtering inputs should be rendered inline in the special * table header row (`true`), or should be accessed via a popup (`false`). * * @sample grid-lite/options/inline-filtering * Inline filtering * * @default false */ inline?: boolean; } export default Options;