/** * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes * Copyright 2025 by Keenthemes Inc */ import KTComponent from '../component'; import { KTDataTableDataInterface, KTDataTableInterface, KTDataTableConfigInterface as KTDataTableConfigInterface, KTDataTableStateInterface, KTDataTableColumnFilterInterface } from './types'; /** * Custom DataTable plugin class with server-side API, pagination, and sorting * @classdesc A custom KTComponent class that integrates server-side API, pagination, and sorting functionality into a table. * It supports fetching data from a server-side API, pagination, and sorting of the fetched data. * @class * @extends {KTComponent} * @param {HTMLElement} element The table element * @param {KTDataTableConfigInterface} [config] Additional configuration options */ export declare class KTDataTable extends KTComponent implements KTDataTableInterface { private static asElementWithInstance; private static asSearchElementWithDebounce; protected _name: string; protected _config: KTDataTableConfigInterface; protected _defaultConfig: KTDataTableConfigInterface; private _tableElement; private _tbodyElement; private _theadElement; private _originalTbodyClass; private _originalTrClasses; private _originalTheadClass; private _originalTdClasses; private _originalThClasses; private _infoElement; private _sizeElement; private _paginationElement; private _checkbox; private _sortHandler; private _layoutPlugin; private _eventAdapter; private _stateStore; private _localProvider; private _remoteProvider; private _tableRenderer; private _paginationRenderer; private _cleanupCallbacks; private _data; private _isFetching; constructor(element: HTMLElement, config?: KTDataTableConfigInterface); private _emit; private _initDataProviders; private _createLayoutPlugin; /** * Apply config from a late constructor call (e.g. docs demo script after auto-init). */ private _applyRuntimeConfig; private _normalizePageSizeConfig; private _normalizePageState; private _getLayoutPluginContext; /** * Initialize default configuration for the datatable * @param config User-provided configuration options * @returns Default configuration merged with user-provided options */ private _initDefaultConfig; /** * Initialize table, tbody, thead, info, size, and pagination elements * @returns {void} */ private _initElements; /** * Store original classes from table elements * @returns {void} */ private _storeOriginalClasses; /** * Fetch data from the server or from the DOM if `apiEndpoint` is not defined. * @returns {Promise} Promise which is resolved after data has been fetched and checkbox plugin initialized. */ private _updateData; /** * Finalize data table after data has been fetched * @returns {void} */ private _finalize; /** * Attach search event to the search input element * @returns {void} */ private _attachSearchEvent; /** * Returns the logical data column count (number of data columns), used for multi-row headers * where querySelectorAll('th') would overcount. Prefers state.originalData, then first tbody row td count. * @returns {number} Number of data columns, or 0 if unknown */ private _getLogicalColumnCount; /** * Creates a complete URL from a relative path or a full URL. * * This method accepts a string that can be either a relative path or a full URL. * If the string is a complete URL (i.e., it contains a valid protocol), a URL * object based on that string is returned. Otherwise, it ensures the path starts * with a "/" and combines it with the provided base URL (or the current window's origin) * to form a complete URL. * * @param {string} pathOrUrl - The path or URL to process. * @param {string | null} [baseUrl=window.location.origin] - The base URL for resolving the relative path. * Defaults to the current window's origin. * @returns {URL} The resulting URL object. */ private _createUrl; /** * Update the table and pagination controls with new data * @returns {Promise} A promise that resolves when the table and pagination controls are updated */ private _draw; /** * Update the HTML table with new data * @returns {HTMLTableSectionElement} The new table body element */ private _updateTable; /** * Show a notice on the table * @param message The message to show. If empty, the message will be removed * @returns {void} */ private _noticeOnTable; private _updatePagination; /** * Reloads the data with the specified page size and optional page number. * @param pageSize The new page size. * @param page The new page number (optional, defaults to 1). */ private _reloadPageSize; /** * Method for handling pagination * @param page - The page number to navigate to */ private _paginateData; private _showSpinner; private _hideSpinner; private _createSpinner; /** * Saves the current state of the table to local storage. * @returns {void} */ private _saveState; /** * Loads the saved state of the table from local storage, if it exists. * @returns {Object} The saved state of the table, or null if no saved state exists. */ private _loadState; private _deleteState; /** * Gets the namespace for the table's state. * If a namespace is specified in the config, it is used. * Otherwise, if the table element has an ID, it is used. * Otherwise, if the component element has an ID, it is used. * Finally, the component's UID is used. * @returns {string} The namespace for the table's state. */ private _tableNamespace; private _tableId; /** * Clean up all event listeners, handlers, and DOM nodes created by this instance. * This method is called before re-rendering or when disposing the component. */ private _dispose; private _debounce; /** * Gets the current state of the table. * @returns {KTDataTableStateInterface} The current state of the table. */ getState(): KTDataTableStateInterface; /** * Sorts the data in the table by the specified field. * @param field The field to sort by. */ sort(field: keyof T | number): void; /** * Navigates to the specified page in the data table. * @param page The page number to navigate to. */ goPage(page: number): void; /** * Set the page size of the data table. * @param pageSize The new page size. */ setPageSize(pageSize: number): void; /** * Reloads the data from the server and updates the table. * Triggers the 'reload' event and the 'kt.datatable.reload' custom event. */ reload(): void; redraw(page?: number): void; /** * Show the loading spinner of the data table. */ showSpinner(): void; /** * Hide the loading spinner of the data table. */ hideSpinner(): void; /** * Filter data using the specified filter object. * Replaces the existing filter object for the column with the new one. * @param filter Filter object containing the column name and its value. * @returns The KTDataTable instance. * @throws Error if the filter object is null or undefined. */ setFilter(filter: KTDataTableColumnFilterInterface): KTDataTable; dispose(): void; search(query: string | object): void; /** * Static variables */ private static _instances; /** * Create KTDataTable instances for all elements with a data-kt-datatable="true" attribute. * This function is now browser-guarded and must be called explicitly. */ static createInstances(): void; /** * Get the KTDataTable instance for a given element. * * @param element The element to retrieve the instance for * @returns The KTDataTable instance or undefined if not found */ static getInstance(element: HTMLElement): KTDataTable | undefined; /** * Initializes all KTDataTable instances on the page. * This function is now browser-guarded and must be called explicitly. */ static init(): void; /** * Force reinitialization of datatables by clearing existing instances. * Useful for Livewire wire:navigate where the DOM is replaced and new tables need to be initialized. */ static reinit(): void; /** * Check if all visible rows are checked (header checkbox state) * @returns {boolean} */ isChecked(): boolean; /** * Toggle all visible row checkboxes (header checkbox) * @returns {void} */ toggle(): void; /** * Check all visible row checkboxes * @returns {void} */ check(): void; /** * Uncheck all visible row checkboxes * @returns {void} */ uncheck(): void; /** * Get all checked row IDs (across all pages if preserveSelection is true) * @returns {string[]} */ getChecked(): string[]; /** * Reapply checked state to visible checkboxes (after redraw/pagination) * @returns {void} */ update(): void; } /** * NOTE: This module is now PURE. No side effects or DOM/global assignments occur on import. * To auto-initialize all datatables on the page, call the exported `initAllDataTables()` function explicitly in the browser. */ export declare function initAllDataTables(): void; //# sourceMappingURL=datatable.d.ts.map