@3mo/data-grid/dist/DataGrid.d.ts

A data grid web component

import { Component, type PropertyValues, type HTMLTemplateResult } from '@a11d/lit';
import { LocalStorage } from '@a11d/local-storage';
import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
import { SlotController } from '@3mo/slot-controller';
import { ThemeController } from '@3mo/theme';
import { MediaQueryController } from '@3mo/media-query-observer';
import { DataGridColumnsController } from './DataGridColumnsController.js';
import { DataGridSelectionBehaviorOnDataChange, DataGridSelectionController, type DataGridSelectability } from './DataGridSelectionController.js';
import { DataGridSortingController, type DataGridRankedSortDefinition, type DataGridSorting } from './DataGridSortingController.js';
import { DataGridDetailsController } from './DataGridDetailsController.js';
import { DataGridCsvController, DataGridSidePanelTab, type DataGridColumn, type DataGridCell, type DataGridRow, DataGridContextMenuController } from './index.js';
import { DataRecord } from './DataRecord.js';
export type DataGridPagination = 'auto' | number;
export declare enum DataGridEditability {
    Never = "never",
    Cell = "cell",
    Always = "always"
}
/**
 * @element mo-data-grid
 *
 * @attr data - The data to be displayed in the DataGrid. It is an array of objects, where each object represents a row.
 * @attr columns - The columns to be displayed in the DataGrid. It is an array of objects, where each object represents a column.
 * @attr headerHidden - Whether the header should be hidden.
 * @attr preventVerticalContentScroll - Whether the content should be prevented from scrolling vertically.
 * @attr page - The current page.
 * @attr pagination - The pagination mode. It can be either `auto` or a number.
 * @attr sorting - The sorting mode. It is an object with `selector` and `strategy` properties.
 * @attr selectability - The selection mode. Default to 'single' if context menus available, 'undefined' otherwise.
 * @attr isDataSelectable - Whether data of a given row is selectable.
 * @attr selectedData - The selected data.
 * @attr selectOnClick - Whether the row should be selected on click.
 * @attr selectionBehaviorOnDataChange - The behavior of the selection when the data changes.
 * @attr multipleDetails - Whether multiple details can be opened at the same time.
 * @attr subDataGridDataSelector - The key path of the sub data grid data.
 * @attr hasDataDetail - Whether the data has a detail.
 * @attr detailsOnClick - Whether the details should be opened on click.
 * @attr primaryContextMenuItemOnDoubleClick - The primary context menu item on double click.
 * @attr editability - The editability mode.
 * @attr getRowDetailsTemplate - A function which returns a template for the details of a given row.
 * @attr getRowContextMenuTemplate - A function which returns a template for the context menu of a given row.
 * @attr sidePanelTab - The side panel tab.
 * @attr sidePanelHidden - Whether the side panel should be hidden.
 * @attr hasAlternatingBackground - Whether the rows should have alternating background.
 * @attr preventFabCollapse - Whether the FAB should be prevented from collapsing.
 * @attr cellFontSize - The font size of the cells relative to the default font size. Defaults @see DataGrid.cellFontSize 's value which defaults to 0.8.
 * @attr rowHeight - The height of the rows in pixels. Defaults to @see DataGrid.rowHeight 's value which defaults to 35.
 * @attr exportable - Whether the DataGrid is exportable. This will show an export button in the footer.
 *
 * @slot - Use this slot only for declarative DataGrid APIs e.g. setting ColumnDefinitions via `mo-data-grid-columns` tag.
 * @slot toolbar - The horizontal bar above DataGrid's contents.
 * @slot toolbar-action - A slot for action icon-buttons in the toolbar which are displayed on the end.
 * @slot filter - A vertical bar for elements which filter DataGrid's data. It is opened through an icon-button in the toolbar.
 * @slot sum - A horizontal bar in the DataGrid's footer for showing sums. Calculated sums are also placed here by default.
 * @slot settings - A vertical bar for elements which change DataGrid's settings. It is pre-filled with columns' settings and can be opened through an icon-button in the toolbar.
 * @slot fab - A wrapper at the bottom right edge, floating right above the footer, expecting Floating Action Button to be placed in.
 * @slot error-no-content - A slot for displaying an error message when no data is available.
 *
 * @cssprop --mo-data-grid-min-visible-rows - The minimum number of visible rows. Default to 2.5.
 * @cssprop --mo-data-grid-footer-background - The background of the footer.
 * @cssprop --mo-data-grid-cell-padding - The inline padding of the cells. Default to 10px.
 * @cssprop --mo-data-grid-column-sub-row-indentation - The indentation of the first column in the sub row. Default to 20px.
 *
 * @fires dataChange
 * @fires selectionChange
 * @fires pageChange
 * @fires paginationChange
 * @fires columnsChange
 * @fires sidePanelOpen
 * @fires sidePanelClose
 * @fires sortingChange
 * @fires rowDetailsOpen
 * @fires rowDetailsClose
 * @fires rowClick
 * @fires rowDoubleClick
 * @fires rowMiddleClick
 * @fires cellEdit
 */
export declare class DataGrid<TData, TDetailsElement extends Element | undefined = undefined> extends Component {
    static readonly rowHeight: LocalStorage<number>;
    static readonly cellRelativeFontSize: LocalStorage<number>;
    static readonly pageSize: LocalStorage<number>;
    static readonly hasAlternatingBackground: LocalStorage<boolean>;
    protected static readonly defaultRowElementTag: import("lit-html/static.js").StaticValue;
    readonly dataChange: EventDispatcher<Array<TData>>;
    readonly selectionChange: EventDispatcher<Array<TData>>;
    readonly pageChange: EventDispatcher<number>;
    readonly paginationChange: EventDispatcher<DataGridPagination | undefined>;
    readonly columnsChange: EventDispatcher<Array<DataGridColumn<TData>>>;
    readonly sidePanelOpen: EventDispatcher<DataGridSidePanelTab>;
    readonly sidePanelClose: EventDispatcher;
    readonly sortingChange: EventDispatcher<Array<DataGridRankedSortDefinition<TData>>>;
    readonly rowDetailsOpen: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
    readonly rowDetailsClose: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
    readonly rowClick: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
    readonly rowDoubleClick: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
    readonly rowMiddleClick: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
    readonly cellEdit: EventDispatcher<DataGridCell<any, TData, TDetailsElement>>;
    data: TData[];
    columns: DataGridColumn<TData, unknown>[];
    headerHidden: boolean;
    preventVerticalContentScroll: boolean;
    page: number;
    pagination?: DataGridPagination;
    sorting?: DataGridSorting<TData>;
    selectability?: DataGridSelectability;
    isDataSelectable?: (data: TData) => boolean;
    selectedData: TData[];
    selectOnClick: boolean;
    selectionBehaviorOnDataChange: DataGridSelectionBehaviorOnDataChange;
    getRowDetailsTemplate?: (data: TData) => HTMLTemplateResult;
    multipleDetails: boolean;
    subDataGridDataSelector?: KeyPath.Of<TData>;
    hasDataDetail?: (data: TData) => boolean;
    detailsOnClick: boolean;
    getRowContextMenuTemplate?: (data: Array<TData>) => HTMLTemplateResult;
    primaryContextMenuItemOnDoubleClick: boolean;
    editability: DataGridEditability;
    sidePanelTab: DataGridSidePanelTab | undefined;
    sidePanelHidden: boolean;
    hasAlternatingBackground: boolean;
    preventFabCollapse: boolean;
    protected fabSlotCollapsed: boolean;
    exportable: boolean;
    cellFontSize: number;
    rowHeight: number;
    private readonly header?;
    private readonly scroller?;
    readonly rows: Array<DataGridRow<TData, TDetailsElement>>;
    private readonly footer?;
    private readonly sidePanel?;
    setPage(page: number): void;
    setPagination(pagination?: DataGridPagination): void;
    setData(data: Array<TData>, selectionBehavior?: DataGridSelectionBehaviorOnDataChange): void;
    get hasSelection(): boolean;
    selectAll(...parameters: Parameters<typeof this.selectionController.selectAll>): void;
    deselectAll(...parameters: Parameters<typeof this.selectionController.deselectAll>): void;
    select(...parameters: Parameters<typeof this.selectionController.select>): void;
    isSelectable(...parameters: Parameters<typeof this.selectionController.isSelectable>): boolean;
    get hasDetails(): boolean;
    get allRowDetailsOpen(): boolean;
    openRowDetails(...parameters: Parameters<typeof this.detailsController.openAll>): void;
    closeRowDetails(...parameters: Parameters<typeof this.detailsController.closeAll>): void;
    toggleRowDetails(...parameters: Parameters<typeof this.detailsController.toggleAll>): void;
    getSorting(...parameters: Parameters<typeof DataGridSortingController.prototype.get>): DataGridRankedSortDefinition<TData>[];
    sort(...parameters: Parameters<typeof this.sortingController.set>): void;
    unsort(...parameters: Parameters<typeof this.sortingController.reset>): void;
    generateCsv(...parameters: Parameters<typeof this.csvController.generateCsv>): Promise<void>;
    setColumns(...parameters: Parameters<typeof this.columnsController.setColumns>): void;
    extractColumns(...parameters: Parameters<typeof this.columnsController.extractColumns>): void;
    protected handleColumnChange(e: CustomEvent): void;
    get extractedColumns(): DataGridColumn<TData, unknown>[];
    extractedColumnsUpdated(extractedColumns: Array<DataGridColumn<TData, TDetailsElement>>): void;
    get visibleColumns(): DataGridColumn<TData, unknown>[];
    getRow(data: TData): DataGridRow<TData, TDetailsElement> | undefined;
    getCell(data: TData, column: DataGridColumn<TData, unknown>): DataGridCell<any, TData, TDetailsElement> | undefined;
    handleEdit(data: TData, column: DataGridColumn<TData, unknown>, value: KeyPath.ValueOf<TData, KeyPath.Of<TData>> | undefined): void;
    navigateToSidePanelTab(tab?: DataGridSidePanelTab): void;
    get hasContextMenu(): boolean;
    get toolbarElements(): Element[];
    get hasToolbar(): boolean;
    get filterElements(): Element[];
    get hasFilters(): boolean;
    get hasSums(): boolean;
    get hasFabs(): boolean;
    get hasPagination(): boolean;
    get supportsDynamicPageSize(): boolean;
    get pageSize(): number;
    get hasFooter(): boolean;
    get dataLength(): number | undefined;
    get maxPage(): number | undefined;
    get hasNextPage(): boolean;
    protected readonly slotController: SlotController;
    protected readonly instanceofAttributeController: InstanceofAttributeController;
    protected readonly smallScreenObserverController: MediaQueryController;
    protected readonly themeController: ThemeController;
    readonly columnsController: DataGridColumnsController<TData>;
    readonly selectionController: DataGridSelectionController<TData>;
    readonly sortingController: DataGridSortingController<TData>;
    readonly contextMenuController: DataGridContextMenuController<TData>;
    readonly detailsController: DataGridDetailsController<TData>;
    readonly csvController: DataGridCsvController<TData>;
    readonly rowIntersectionObserver?: IntersectionObserver;
    protected updated(...parameters: Parameters<Component['updated']>): void;
    private navigateToLastValidPageIfNeeded;
    protected firstUpdated(props: PropertyValues): void;
    static get styles(): import("@a11d/lit").CSSResult;
    protected get template(): HTMLTemplateResult;
    private readonly splitterResizerTemplate;
    private get splitterModeTemplate();
    private get overlayModeTemplate();
    private get sidePanelTemplate();
    protected get settingsDefaultTemplate(): HTMLTemplateResult;
    protected get filtersDefaultTemplate(): HTMLTemplateResult;
    protected get columnsTemplate(): HTMLTemplateResult;
    protected get rowElementTag(): import("lit-html/static.js").StaticValue;
    get hasDefaultRowElements(): boolean;
    protected get fabTemplate(): HTMLTemplateResult;
    protected get contentTemplate(): HTMLTemplateResult;
    protected get noContentTemplate(): HTMLTemplateResult;
    protected get dataGridTemplate(): HTMLTemplateResult;
    protected get headerTemplate(): HTMLTemplateResult;
    private get rowsTemplate();
    /**
     * The hidden size anchor row renders the longest content of each column in a hidden row.
     * This is used to mitigate the issue of using values with fluctuating lengths
     * with a automatic column width e.g. "max-content" or "fit-content" in combination with
     * row virtualization, which could lead to a lot of column resizing during scrolling.
     */
    private get hiddenSizeAnchorRowTemplate();
    getRowTemplate(dataRecord: DataRecord<TData>, index?: number): import("lit-html").TemplateResult;
    protected get footerTemplate(): HTMLTemplateResult;
    get sumsTemplate(): HTMLTemplateResult;
    protected get toolbarTemplate(): HTMLTemplateResult;
    protected get toolbarDefaultTemplate(): HTMLTemplateResult;
    protected get toolbarActionDefaultTemplate(): HTMLTemplateResult;
    protected get sumDefaultTemplate(): HTMLTemplateResult;
    protected get toolbarActionsTemplate(): HTMLTemplateResult;
    private lastScrollElementTop;
    private handleScroll;
    protected handlePointerDown(event: PointerEvent): void;
    protected getFlattenedData(values?: TData[]): Generator<DataRecord<TData>, void, undefined>;
    get dataRecords(): Array<DataRecord<TData>>;
    get renderDataRecords(): DataRecord<TData>[];
    protected get dataSkip(): number;
    protected get dataTake(): number;
    getCsvData(): AsyncGenerator<number, DataRecord<TData>[], unknown>;
}
declare global {
    interface HTMLElementTagNameMap {
        'mo-data-grid': DataGrid<unknown, undefined>;
    }
}
//# sourceMappingURL=DataGrid.d.ts.map