/** * Data Grid Web component * https://github.com/lekoala/data-grid */ import BaseElement from "./core/base-element.js"; export type DataSource = import("./data-source.js").DataSource; export type QueryState = import("./data-source.js").QueryState; export type PageResult = import("./data-source.js").PageResult; export type FilterState = import("./data-source.js").FilterState; export type FilterOption = import("./data-source.js").FilterOption; export type Row = Record; export type RenderContent = string | number | boolean | Node | { html: string; } | null | undefined; export type DateFormatOptions = Intl.DateTimeFormatOptions & { style?: "full" | "long" | "medium" | "short"; }; export type NumberFormatOptions = Intl.NumberFormatOptions; export type Column = { /** * - the key in the data, unique across columns (sorting, filtering, `getCol` and state persistence rely on it) */ field?: string; /** * - stable identifier (defaults to field). Plugin columns use "$..." ids. */ id?: string; /** * - injected by a plugin */ virtual?: boolean; /** * - order group for plugin columns */ position?: "start" | "end"; /** * - keep the column pinned to the inline start or end edge while scrolling (pair with position "start"/"end") */ frozen?: "start" | "end" | null; /** * - the title to display in the header (defaults to "field" if not set) */ title?: string; /** * - the preferred width of the column (auto otherwise); a user resize commits back into this value at runtime (SaveState module) */ width?: number; /** * - the column is never compressed below this width */ minWidth?: number; /** * - horizontal alignment of the column's header, body, and filter control, defaults to the formatter default when `format` is set (e.g. `number` -> `end`, `boolean` -> `center`) */ align?: "start" | "center" | "end" | null; /** * - built-in value formatter (boolean | date | datetime | number). Use renderCell for custom DOM rendering. */ format?: "boolean" | "date" | "datetime" | "number" | null; /** * - Intl options for the `format` formatter, after applying the formatter defaults and convenience inferences */ formatOptions?: DateFormatOptions | NumberFormatOptions; /** * - class to set on the column (target body or header with th.class or td.class) */ class?: string; /** * - class(es) for body cells only, evaluated per row at render time. Unlike `class`, never applied to header or filter cells */ cellClass?: string | ((ctx: CellContext) => string | null | undefined); /** * - don't render the column and set a matching attribute on the row with the value of the field */ attr?: string; /** * - hide the column */ hidden?: boolean; /** * - disable sorting for this column (defaults to the grid-wide `sortable`) */ sortable?: boolean; /** * - disable filtering for this column (defaults to the grid-wide `filterable`) */ filterable?: boolean; /** * - allow this column's data cells to wrap (defaults to the grid-wide `wrap`) */ wrap?: boolean; /** * - transforms the value displayed by the default cell renderer. Use renderCell for custom DOM/content rendering. */ transform?: "uppercase" | "lowercase" | "array" | ValueTransform | null; /** * - replace with input (EditableColumn module) */ editable?: boolean; /** * - type of input, "select" for a select editor fed by editableOptions, or "checkbox" for booleans (EditableColumn module) */ editableType?: string; /** * - options of the select editor; the current value is reflected as data-value on the control (EditableColumn module) */ editableOptions?: Array; /** * - (value, { row, column, grid }) => Boolean | error message (EditableColumn module) */ validate?: (value: any, ctx: EditContext) => (boolean | string); /** * - the higher the value, the sooner it will be hidden, disable with 0 (ResponsiveGrid module) */ responsive?: number; /** * - hidden through responsive module (ResponsiveGrid module) */ responsiveHidden?: boolean; /** * - filter control mode, defaults to the formatter hint when `format` is set (boolean: tri-state select, number: numeric input with typed equality, date: partial YYYY-MM-DD prefix match), otherwise "text" */ filterType?: "text" | "select" | "boolean" | "number" | "date" | null; /** * - a visible hint for the filter control (defaults to the grid's text-filter placeholder) */ filterPlaceholder?: string; /** * - defines the business options of a select filter. An empty option is prepended automatically unless the list already contains one. When defined, it overrides the default behaviour where the filter select elements are populated by the unique values from the corresponding column records. */ filterList?: Array; /** * - defines the empty first option of a select filter. defaults to {value: "", text: ""} */ firstFilterOption?: FilterOption; /** * - supported select filters use a checkbox popover and emit `in`; older * browsers fall back to a single select emitting `eq` */ filterMultiple?: boolean; /** * - optional custom header cell renderer (the core creates the ) */ renderHeaderCell?: (th: HTMLTableCellElement, ctx: CellContext) => void; /** * - optional custom filter cell renderer (the core creates the ) */ renderFilterCell?: (th: HTMLTableCellElement, ctx: CellContext) => void; /** * - optional custom cell renderer returning content (primitive -> textContent, Node -> append, { html } -> innerHTML) */ renderCell?: (ctx: CellContext) => RenderContent; /** * - replace the built-in editable controls with an application-owned editor for this column (EditableColumn module). Only used when the column is `editable`; display stays `format`/`renderCell`. Content follows the same RenderContent protocol. */ renderEditor?: (ctx: EditorContext) => RenderContent; }; export type EditorContext = { grid: DataGrid; column: Column; row: Row; /** * - the current field value rendered like the built-in editors (empty string when absent or null) */ value: string; /** * - validate and commit the given value; resolves to `true` when accepted (mutation + `edit` event), `false` when a validation failed or an `edit` listener called `preventDefault()` (the row is reverted) */ commit: (value: any) => boolean; /** * - abandon the edit without mutating the row */ cancel: () => void; }; export type CellContext = { grid: DataGrid; column: Column; row?: Row; rowIndex?: number; value?: any; tr?: HTMLTableRowElement; sampleTh?: HTMLTableCellElement; availableWidth?: number; colMaxWidth?: number; }; export type EditContext = { grid: DataGrid; column: Column; row: Row; }; export type ValueTransform = (value: any, ctx: CellContext) => any; export type ActionContext = { grid: DataGrid; action: Action; rowKey: string; }; export type ActionRenderContext = { grid: DataGrid; action: Action; row: Row; }; export type Action = { /** * - the name of the action (button[data-action]) */ name: string; /** * - the button label and accessible name */ label?: string; /** * - visual intent (defaults to "default") */ intent?: "default" | "primary" | "danger"; /** * - link for the action (string with {field} interpolation or a resolver) */ href?: string | ((row: Row, ctx: ActionContext) => string); /** * - hides the action when falsy */ visible?: (row: Row, ctx: ActionContext) => boolean; /** * - disables the action when truthy (blocks the click) */ disabled?: boolean | ((row: Row, ctx: ActionContext) => boolean); /** * - replaces the button content (label stays the accessible name) */ render?: (ctx: ActionRenderContext) => RenderContent; /** * - boolean (generic label), message string, or resolver */ confirm?: boolean | string | ((row: Row, ctx: ActionContext) => boolean | string); /** * - is the default row action (only the first resolved default per row applies) */ default?: boolean; /** * - the class for the button */ class?: string; }; export type BulkActionContext = { grid: DataGrid; action: BulkAction; }; export type BulkAction = { /** * - the name of the action */ name: string; /** * - the label of the button */ label: string; /** * - visual intent (defaults to "default") */ intent?: "default" | "primary" | "danger"; /** * - boolean (generic label), message string, or resolver */ confirm?: boolean | string | ((selection: SelectionState, ctx: BulkActionContext) => boolean | string); }; export type SelectionState = { mode: "explicit" | "all"; /** * - selected row keys (mode "explicit") */ ids: Set; /** * - unselected row keys (mode "all") */ except: Set; }; export type RowDetailsContext = { grid: DataGrid; row: Row; rowKey: string; }; export type Plugin = import("./core/base-plugin.js").Plugin; export type PluginConstructor = import("./core/base-plugin.js").PluginConstructor; export type PluginRegistry = import("./core/base-plugin.js").PluginRegistry; export type PluginInstances = import("./core/base-plugin.js").PluginInstances; export type Options = { /** * Custom id for the grid */ id: string | null; /** * An URL to a server-side endpoint (FetchDataSource) */ src: string | null; /** * Extra constant HTTP params passed to FetchDataSource */ params: Record; /** * Custom data source (defaults to FetchDataSource or ArrayDataSource) */ dataSource?: DataSource | null; /** * Load immediately on connect ("eager") or defer the first data source load until the grid is near the viewport ("lazy"; only affects async sources) */ loading?: "eager" | "lazy"; /** * Log actions in DevTools console */ debug: boolean; /** * Allows a sort by column functionality */ sortable: boolean; /** * Allows a filtering functionality */ filterable: boolean; /** * Dir */ dir: string; /** * Row density (maps to --dg-padding-* tokens) */ density?: "compact" | "default" | "comfortable"; /** * Available page size options */ pageSizes: number[]; /** * Shows the page size select element */ showPageSize: boolean; /** * Available columns */ columns: Column[]; /** * Row actions (RowActions module) */ actions: Action[]; /** * Activate the row actions column even without static `actions` (server/HTML driven $actions) */ rowActions: boolean; /** * - global action renderer, applied when an action has no render */ actionRenderer?: (ctx: ActionRenderContext) => RenderContent; /** * Group actions in a native anchored popover when supported (RowActions module) */ collapseActions: boolean; /** * Allow data cells to wrap over multiple lines */ wrap: boolean; /** * Snap horizontal scrolling near column starts */ snapColumns: boolean; /** * Make columns resizable (ColumnResizer module) */ resizable: boolean; /** * Allow multi-selecting rows with a checkboxes (SelectableRows module) */ selectable: boolean; /** * Select all only selects visible rows (SelectableRows module) */ selectVisibleOnly: boolean; /** * Enables single row select with radio buttons - no need to set selectable (SelectableRows module) */ singleSelect: boolean; /** * What a click on a data row does: "action" runs the row's default action (RowActions), "select" toggles the row selection, "none" disables row clicks */ rowClick?: "action" | "select" | "none"; /** * The field name or a function resolving a stable row key (defaults to "id") */ rowKey?: string | ((row: Row) => string | number); /** * Field name or a resolver for the human-readable label of a row, used for accessible control names (falls back to rowKey, then index) */ rowLabel?: string | ((row: Row, index: number) => string) | null; /** * Bulk actions applied to the current selection (BulkActions module) */ bulkActions?: BulkAction[]; /** * Compute column sizes based on given data (Autosize module) */ autosize: boolean; /** * Enter commits and moves the editing focus one row down in the same column (EditableColumn module) */ enterMovesDown: boolean; /** * Adjust height so that it matches table size (FixedHeight module) */ autoheight: boolean; /** * auto-hides the pager when number of records falls below the selected page size */ autohidePager: boolean; /** * Result navigation mode: "pages" replaces rows on page change, "more" appends transport chunks through loadMore() while query.page stays 1 */ pager?: "pages" | "more"; /** * Native Popover menu positioned at header context-menu coordinates when supported (ContextMenu module) */ menu: boolean; /** * Allows a column reordering functionality (DraggableHeaders module) */ reorder: boolean; /** * Change display mode on small screens (ResponsiveGrid module) */ responsive: boolean; /** * Show toggle column (ResponsiveGrid module) */ responsiveToggle: boolean; /** * Open responsive detail rows by default when columns are hidden (ResponsiveGrid module) */ responsiveStartOpen: boolean; /** * Render expanded row content (RowDetails module) */ rowDetails?: ((ctx: RowDetailsContext) => RenderContent) | null; /** * Open row details by default (RowDetails module) */ rowDetailsStartOpen: boolean; /** * Debounce delay in milliseconds before a text filter is applied (0 = immediate). Enter and select changes apply immediately. */ filterDelay: number; /** * Show the global search input (core, not a plugin) */ searchable: boolean; /** * Visible hint for the search input (defaults to "") */ searchPlaceholder: string; /** * Debounce delay in milliseconds before the global search is applied (0 = immediate) */ searchDelay: number; /** * Minimum number of characters before a search is applied (0 = always) */ minSearchLength: number; /** * Persist the query, column order, explicit visibility and user-resized column widths (SaveState module) */ saveState: boolean; /** * A generic text to be displayed in footer when error occurs. */ errorMessage: string | null; /** * A custom text to be displayed when no data is loaded. This is different from the generic labels.noData that applies for data-grid as a component. */ noData: string | null; /** * A table caption, providing the accessible name of the table (falls back to aria-labelledby, then aria-label) */ caption: string | null; /** * Initial runtime query state */ initialQuery?: QueryState | null; /** * Initial result to display without loading the data source */ initialResult?: PageResult | null; /** * Grid-level editor validator, fallback when a column has no validate (EditableColumn module) */ validate?: (value: any, ctx: EditContext) => (boolean | string); }; export type Labels = { itemsPerPage: string; gotoPage: string; gotoFirstPage: string; gotoPrevPage: string; gotoNextPage: string; gotoLastPage: string; pageRange: string; pageStatus: string; resultCount: string; /** * - progressive pager button ("more" mode) */ loadMore: string; /** * - progressive pager status ("more" mode), with {count} and {total} */ loadedCount: string; /** * - progressive pager status without COUNT(*) ("more" mode), with {count} */ loadedCountUnknown: string; selectedCount: string; selectAll: string; selectRow: string; toggleActions: string; showDetails: string; hideDetails: string; showHiddenColumns: string; hideHiddenColumns: string; resizeColumn: string; search: string; noData: string; loading: string; areYouSure: string; networkError: string; /** * - accessible label of a `format: "boolean"` cell with a true value */ booleanTrue: string; /** * - accessible label of a `format: "boolean"` cell with a false value */ booleanFalse: string; }; export type TextInputState = { composing: boolean; /** * The debounced update, with cancel()/flush() control */ apply: ((...args: any[]) => void) & { cancel: () => void; flush: () => void; }; }; /** */ declare class DataGrid extends BaseElement { #private; /** * Optional initial result, can be set as a property before connection * @type {PageResult|null} */ initialResult: PageResult | null; /** * Rows of the current page * @type {Array>} */ rows: Array>; /** * Total number of rows matching the current query. Null in pager * "more" mode when the backend skipped COUNT(*). * @type {Number|null} */ total: number | null; /** * Meta information returned by the data source * @type {Record} */ meta: Record; /** @type {Number} */ pages: number; /** @type {Boolean} */ loading: boolean; /** @type {?Error} */ error: Error | null; /** * The active data source, set by setupDataSource(). * @type {DataSource|null} */ dataSource: DataSource | null; /** * DOM refs set on connect from the rendered template. * @type {HTMLTableElement|null} */ table: HTMLTableElement | null; /** * The table viewport: the scrollable pane inside `.dg-frame` that owns * the scroll and is the sticky containing block for thead. Guaranteed * to exist as `.dg-frame > .dg-scroll` after `_connected()`. * @type {HTMLDivElement} */ scrollEl: HTMLDivElement; /** @type {HTMLInputElement|null} */ btnFirst: HTMLInputElement | null; /** @type {HTMLInputElement|null} */ btnPrev: HTMLInputElement | null; /** @type {HTMLInputElement|null} */ btnNext: HTMLInputElement | null; /** @type {HTMLInputElement|null} */ btnLast: HTMLInputElement | null; /** @type {HTMLButtonElement|null} */ btnMore: HTMLButtonElement | null; /** @type {HTMLSelectElement|null} */ selectPerPage: HTMLSelectElement | null; /** @type {HTMLInputElement|null} */ inputPage: HTMLInputElement | null; /** @type {HTMLInputElement|null} */ searchInput: HTMLInputElement | null; /** @type {HTMLTableRowElement|null} */ headerRow: HTMLTableRowElement | null; /** * @param {Partial} [options] */ constructor(options?: Partial); _ready(): void; static template(): string; /** * @public * @returns {Labels} */ get labels(): Labels; /** * @public * @returns {Labels} */ static getLabels(): Labels; /** * @public * @param {Partial} v */ static setLabels(v: Partial): void; /** * @public * @param {String} url * @returns {Promise>} */ static loadLabels(url: string): Promise>; /** * @param {string} template * @param {Record} values * @returns {string} */ formatLabel(template: string, values: Record): string; /** Gets the text to be displayed when no data is loaded. * @public */ get noData(): string; /** @public */ updateLabels(): void; updateMetaLabel(): void; /** * Reflect the current page and page count on the pagination group label. * The page context stays accessible-only: the visible footer already shows * the range (`.dg-meta`) and the page control itself. */ updatePageStatus(): void; /** * @returns {Column} */ get defaultColumn(): Column; /** * @returns {Options} */ get defaultOptions(): Options; /** * Inspect the default option values without instantiating a grid. * @returns {Options} */ static get defaultOptions(): Options; /** * Determines if the grid is initialized. * @returns {Boolean} */ get isInit(): boolean; /** * Determines if data load has failed. * @returns {Boolean} */ get hasDataError(): boolean; /** * Snapshot of the current query state. * @public * @returns {QueryState} */ get query(): QueryState; /** * Convenience read-only accessor for the current page. * @public * @returns {Number} */ get page(): number; /** * Register plugin constructors, keyed by name. New registrations extend the * current registry and replace constructors that use the same name. The core * instantiates them on each DataGrid construction. Names are not limited to * built-in plugins. * @public * @param {PluginRegistry} list */ static registerPlugins(list: PluginRegistry): void; /** * @public * @param {?String} [plugin] */ static unregisterPlugins(plugin?: string | null): void; /** * @public * @returns {PluginRegistry} */ static registeredPlugins(): PluginRegistry; /** * Run a lifecycle hook on all registered plugins, in registration order. * @param {String} hook * @param {...any} args */ runPlugins(hook: string, ...args: any[]): void; /** * Build the normalized column list: base columns + plugin columns, ordered. * @returns {Column[]} */ buildColumns(): Column[]; /** * The normalized column list of the current render cycle, for inspection. * Read-only: mutating the returned objects is not a supported way to * configure the grid (a rerender rebuilds columns from the options). * @public * @returns {Column[]} */ getColumns(): Column[]; /** * Return an instantiated plugin by its registration name. * @public * @param {String} name * @returns {Plugin|undefined} */ getPlugin(name: string): Plugin | undefined; /** * @param {Record|Array} columns * @returns {Column[]} */ convertColumns(columns: Record | Array): Column[]; /** * @link https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4#reflected-dom-attributes * @returns {Array} */ static get observedAttributes(): Array; /** * Resolve a declarative attribute into an option and apply its runtime * reaction when the grid has completed initialization. * @param {String} name * @param {String|null} value * @param {String|null} oldValue */ attributeChanged(name: string, value: string | null, oldValue: string | null): void; /** @returns {HTMLTableSectionElement} */ get thead(): HTMLTableSectionElement; /** @returns {HTMLTableSectionElement} */ get tbody(): HTMLTableSectionElement; /** @returns {HTMLDivElement|null} */ get footerEl(): HTMLDivElement | null; /** * Pick the data source based on configuration. */ setupDataSource(): void; /** * Seed the initial query from optional page / page-size attributes. */ setupInitialState(): void; /** * Merge a patch into the query state and reload. * Changing search, filters, sort or pageSize resets the page to 1 unless an * explicit page is provided in the patch. Changing search or filters * (population changes) also clears the selection, since a `mode: "all"` * selection only means something for the population it was created on. * Emits `querychange` with a normalized snapshot when the state changes, * before the reload (including in lazy mode, where no load runs * yet). Mutating `event.detail.query` never affects the grid. In pager * "more" mode the page is always coerced back to 1: chunks accumulate * through loadMore(), never through the query. * @public * @param {Partial} patch * @returns {Promise} */ setQuery(patch: Partial): Promise; /** * Restore the runtime query before the first load without triggering a * refresh. This is intended for stateful plugins connected during setup. * @public * @plugin * @param {?QueryState} query */ restoreQuery(query: QueryState | null): void; /** * Reset the query to its initial state and reload. Emits `querychange` * like setQuery does (only when the query differs from the initial one). * `restoreQuery()` (bootstrap rehydration) stays silent. A load emits only * when its result corrects an out-of-range page. * @public * @returns {Promise} */ resetQuery(): Promise; /** * Reload the result matching the current query. * @public * @returns {Promise} */ refresh(): Promise; /** * Single load path: abort previous request, load the current query, * protect against stale responses, then render. * @public * @returns {Promise} */ load(): Promise; /** * Append the next transport chunk in pager "more" mode, then render the * grown list. No-op unless the pager is "more", no load is running, and * the list is not exhausted yet. A concurrent setQuery() supersedes the * flight: its late response is dropped and its cleanup never touches the * newer load. Errors keep the loaded rows and leave the button available * for a retry. Before the first successful chunk, it loads or retries * page 1 through load(). Progress is already observable through rows.length, * total and loading — no boolean needed. * @public * @returns {Promise} */ loadMore(): Promise; /** * Apply a PageResult and render. * @param {PageResult} result */ applyResult(result: PageResult): boolean; /** * Pick the data source based on configuration. */ srcChanged(): Promise; showPageSizeChanged(): void; responsiveChanged(): void; snapColumnsChanged(): void; selectableChanged(): void; singleSelectChanged(): void; searchPlaceholderChanged(): void; /** * Populate the page size select according to options */ populatePageSizes(): void; /** * Lazily create the shared top bar: `.dg-topbar > .dg-topbar-start + * .dg-topbar-end`, inserted before the table. Both the bulk actions plugin * and the core search control use it. * @returns {HTMLDivElement} */ ensureTopbar(): HTMLDivElement; /** * Create (once) or remove the global search input based on the `searchable` * option. The control is kept stable across renders to avoid focus loss. */ renderSearch(): void; /** * Commit the current search input value to the query. An empty value clears * the search; a non-empty value below `minSearchLength` is ignored so the * current results stay in place. * @returns {Promise|undefined} */ commitSearch(): Promise | undefined; _connected(): Promise; _disconnected(): void; /** * Route delegated core UI events to the matching handler. This overrides * BaseElement's generic routing because the host (not a cached control) is * now the listener target. * @param {Event} event * @returns {void} */ handleEvent(event: Event): void; /** * A control is owned by this grid when it lives inside this host (not a * nested grid), so bubbled events from an inner grid never affect the outer * one. * @public * @plugin * @param {Element|null|undefined} element * @returns {Boolean} */ ownsControl(element: Element | null | undefined): boolean; init(): Promise | undefined; /** * @param {String} field * @returns {Column|null} */ getCol(field: string): Column | null; /** * @param {String} field * @param {String} prop * @returns {any} */ getColProp(field: string, prop: string): any; /** * @param {String} field * @param {String} prop * @param {any} val */ setColProp(field: string, prop: string, val: any): void; /** * Stable structural identity of a column, used for the `data-column-id` * DOM convention shared by the core and the plugins. * @param {Column} column * @returns {String} */ getColumnId(column: Column): string; /** * Find a column by its stable structural id (`column.id ?? column.field`). * @param {String} id * @returns {Column|null} */ getColumnById(id: string): Column | null; visibleColumns(): Column[]; /** * Whether a column can be sorted: the grid-wide option must be on and the * column must not explicitly opt out with `sortable: false`. * @param {Column} column * @returns {Boolean} */ isColumnSortable(column: Column): boolean; /** * Whether a column can be filtered: the grid-wide option must be on and the * column must not explicitly opt out with `filterable: false`. * @param {Column} column * @returns {Boolean} */ isColumnFilterable(column: Column): boolean; hiddenColumns(): Column[]; /** * Reconcile the rendered cells (header, filters and body) with the current * column visibility without rebuilding the DOM. Used whenever only the * visibility changed: showColumn/hideColumn and ResponsiveGrid adaptations. * The column list is rebuilt so plugin columns (ex: the responsive toggle) * reflect their fresh hidden state. * @public * @plugin */ syncColumnVisibility(): void; /** Queue one frozen-column geometry pass for the next frame. */ queueFrozenSync(): void; /** * Measure visible frozen columns and assign their logical sticky offsets. * @public */ syncFrozenColumns(): void; oncolumnResized(): void; oncolumnReordered(): void; oncolumnVisibility(): void; /** * @public * @param {String} field * @param {Boolean} [render] */ showColumn(field: string, render?: boolean): void; /** * @public * @param {String} field * @param {Boolean} [render] */ hideColumn(field: string, render?: boolean): void; /** * Number of rendered columns of the current column list. * @param {Boolean} visibleOnly * @returns {Number} */ columnsLength(visibleOnly?: boolean): number; /** * Global configuration and renderTable * This should be called after your data has been loaded */ configureUi(): this; /** * Resolve the stable key of a row. * @param {Record} row * @param {Number} [index] Fallback index (current page) when the row has no key * @returns {String} */ resolveRowKey(row: Record, index?: number): string; /** * Human-readable label of a row, used for accessible control names. * Resolved from `options.rowLabel` (field or function), falling back to * the row key, then the row index. * @public * @param {Record} row * @param {Number} [index] * @returns {String} */ getRowLabel(row: Record, index?: number): string; /** * Whether a row is part of the current selection. * @public * @param {Record} row * @param {Number} [index] * @returns {Boolean} */ isRowSelected(row: Record, index?: number): boolean; /** * Find the row of the current page matching a row key. * @param {String} rowKey * @returns {Record|undefined} */ findRowByKey(rowKey: string): Record | undefined; /** * Mutate a row of the current page in place and re-render the body. * Works with any data source: it never reloads, so a server grid reflects * a business mutation without a second request. With an ArrayDataSource the * paginated rows are references to the source objects, so the source is * updated too. * @public * @param {String} rowKey * @param {Record} patch * @returns {Boolean} Whether a matching row was found */ updateRow(rowKey: string, patch: Record): boolean; /** * Remove a row from the local dataset. Only applies when the data source * owns a mutable local collection (ArrayDataSource): the row is removed * from the source and the query is re-applied. With a remote data source * this returns false — refresh after a server-side deletion instead. * @public * @param {String} rowKey * @returns {Boolean} Whether the row was removed */ removeRow(rowKey: string): boolean; /** * Resolve the actions to render for a row. A `row.$actions` array is * authoritative: it lists which actions are available and can override * their descriptors (strings are looked up by name in the definitions, * objects are merged over them). Without `$actions`, the static * `options.actions` are used. Definitions combine `meta.actions` (server * base) overridden by `options.actions` (client). * @param {Record} row * @returns {Action[]} */ getActionsForRow(row: Record): Action[]; /** * Snapshot of the current selection state. * @public * @returns {SelectionState} */ getSelectionState(): SelectionState; /** * Select a row (single select keeps at most one key). * @public * @param {Record} row * @param {Number} [index] */ selectRow(row: Record, index?: number): void; /** * Deselect a row. * @public * @param {Record} row * @param {Number} [index] */ deselectRow(row: Record, index?: number): void; /** * Toggle the selection state of a row. * @public * @param {Record} row * @param {Number} [index] */ toggleRow(row: Record, index?: number): void; /** * Select all visible rows (or everything when selectVisibleOnly is false). * @public */ selectAll(): void; /** * Reset the selection and refresh the UI. * @public */ clearSelection(): void; /** * Get selected rows or specific fields from selected rows. * Only reflects the currently loaded page. * For cross-page/server-side selection, use getSelectionState(). * If no keys are provided, returns the full row objects. * If one key is provided, returns an array of values for that key. * If multiple keys are provided, returns an array of objects with those keys and values. * In single select mode, returns a single object or value. * @public * @param {...String} keys - Field names to select from each row. * @returns {Array|Object} Selected rows, values, or objects depending on selection and keys. */ getSelection(...keys: string[]): Array | Object; /** * @public * @returns {Promise|undefined} */ getFirst(): Promise | undefined; /** * @public * @returns {Promise|undefined} */ getLast(): Promise | undefined; /** * @public * @returns {Promise|undefined} */ getPrev(): Promise | undefined; /** * @public * @returns {Promise|undefined} */ getNext(): Promise | undefined; /** * @returns {Promise|undefined} */ gotoPage(): Promise | undefined; /** * This is the callback for the select control * @returns {Promise|undefined} */ changePerPage(): Promise | undefined; /** * Sort direction of a column based on the current query. * @param {String} field * @returns {"asc"|"desc"|null} */ getColumnSortDirection(field: string): "asc" | "desc" | null; /** * Trigger sort based on the current header state. * @param {?Element} [baseCol] The column that was clicked or null to use current sort * @returns {Promise|undefined} */ sortData(baseCol?: Element | null): Promise | undefined; /** * @public * @param {String} columnName * @returns {Promise} */ sortAsc(columnName: string): Promise; /** * @public * @param {String} columnName * @returns {Promise} */ sortDesc(columnName: string): Promise; /** * @public * @param {String} columnName * @returns {Promise} */ sortNone(columnName: string): Promise; /** * @public * @returns {Promise} */ clearFilters(): Promise; /** * Set the global search and reload. The server decides which fields the * search covers; `ArrayDataSource` applies a generic scalar match. * @public * @param {String} search * @returns {Promise} */ setSearch(search: string): Promise; /** * Clear the global search and reload. * @public * @returns {Promise} */ clearSearch(): Promise; /** * Collect current filter inputs into the query and reload. Each control's * resolved mode (data-filter-mode) decides how its value maps onto a * query operator. */ filterData(): Promise; renderTable(): void; /** * Give the table an accessible name: a real when options.caption * is set, otherwise propagate the host aria-labelledby / aria-label. */ updateTableLabel(): void; /** * Create table header * - One row for the column headers * - One row for the filters */ renderHeader(): void; renderFooter(): void; /** * Create the column headers based on the normalized column list. * The core creates the and its structural attributes, then a column * renderHeaderCell (or the default renderer) fills it. * @param {HTMLTableSectionElement} thead */ createColumnHeaders(thead: HTMLTableSectionElement): void; /** * Default header cell renderer for base columns. * @param {HTMLTableCellElement} th * @param {CellContext} ctx */ renderDefaultHeaderCell(th: HTMLTableCellElement, ctx: CellContext): void; /** * @param {HTMLTableSectionElement} thead */ createColumnFilters(thead: HTMLTableSectionElement): void; /** * Default filter cell renderer for base columns. * @param {HTMLTableCellElement} th * @param {Column} column * @param {HTMLTableCellElement} relatedTh */ renderDefaultFilterCell(th: HTMLTableCellElement, column: Column, relatedTh: HTMLTableCellElement): void; /** * @param {Column} column * @param {HTMLTableCellElement} relatedTh * @returns {HTMLInputElement|HTMLSelectElement|HTMLDivElement} */ createFilterElement(column: Column, relatedTh: HTMLTableCellElement): HTMLInputElement | HTMLSelectElement | HTMLDivElement; /** * Resolve the options of a select filter, directly consumable by the *