@nova-design-system/nova-webcomponents 3.0.0-beta.45 → 3.0.0-beta.47

package/dist/collection/components/nv-datagrid/nv-datagrid.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h, Host, } from "@stencil/core";
-import { createTable, getCoreRowModel, createColumnHelper, getFilteredRowModel, } from "@tanstack/table-core";
+import { createTable, getCoreRowModel, createColumnHelper, getFilteredRowModel, getPaginationRowModel, } from "@tanstack/table-core";
 import { deepCopyElement, excludedProps } from "../../utils/dom.utils";
 import { debounce } from "../../utils/input.utils";
 /**
@@ -16,12 +16,15 @@ export class NvDatagrid {
     constructor() {
         this.templateCache = new Map();
         this.headerTemplateCache = new Map();
+        this.minPageIndex = 1;
         /****************************************************************************/
         //#region STATES
         this.table = null;
         this.parsedColumns = []; // Parsed array
         this.parsedData = []; // Parsed array
-        this.globalFilter = '';
+        this.globalFilterSearchTerm = '';
+        this.columnData = [];
+        this.paginationState = null;
         //#endregion STATES
         /****************************************************************************/
         //#region PROPERTIES
@@ -71,8 +74,24 @@ export class NvDatagrid {
          * @default false
          */
         this.autoGenerateColumns = false;
+        /**
+         * Whether to enable pagination for the data grid.
+         * @default false
+         */
+        this.enablePagination = false;
+        /**
+         * The number of rows to display per page.
+         * @default 10
+         */
+        this.pageSize = 10;
+        /**
+         * The array of page sizes to display in the pagination dropdown.
+         * @default [10, 20, 30, 40, 50]
+         */
+        this.pageSizes = [10, 20, 30, 40, 50];
         this.debouncedFilter = debounce((value) => {
-            this.globalFilter = value;
+            var _a;
+            (_a = this.table) === null || _a === void 0 ? void 0 : _a.setGlobalFilter(value);
         }, 300);
         /**
          * Handles global filtering on input event for the search input.
@@ -88,6 +107,23 @@ export class NvDatagrid {
                 this.debouncedFilter(value);
             }
         };
+        this.flexRender = (comp, props) => {
+            if (typeof comp === 'function') {
+                return comp(props);
+            }
+            return comp;
+        };
+        this.handlePageIndexChange = (event) => {
+            const target = event.target;
+            const page = target.value ? Number(target.value) - 1 : 0;
+            // Simply use `setPageIndex` to update the page index directly
+            this.paginationState = Object.assign(Object.assign({}, this.paginationState), { pageIndex: page }); // This triggers the paginationState watcher
+        };
+        this.handlePageSizeChange = (event) => {
+            const target = event.target;
+            // Simply use `setPageSize` to update the page size directly
+            this.paginationState = Object.assign(Object.assign({}, this.paginationState), { pageSize: Number(target.value) }); // This triggers the paginationState watcher
+        };
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -97,6 +133,7 @@ export class NvDatagrid {
      */
     cacheTemplates() {
         const columns = Array.from(this.el.querySelectorAll('nv-datagridcolumn'));
+        this.columnData = [];
         columns.forEach((col) => {
             const key = col.accessor;
             const cellSlot = col.querySelector('[slot="cell"]');
@@ -117,6 +154,12 @@ export class NvDatagrid {
                     this.headerTemplateCache.set(key, headerDiv);
                 }
             }
+            const colData = {
+                header: col.header,
+                accessor: col.accessor,
+                repeatTemplate: col.hasAttribute('repeat-template'),
+            };
+            this.columnData.push(colData);
         });
     }
     parseDataAndColumns() {
@@ -182,6 +225,7 @@ export class NvDatagrid {
         this.parsedColumns = safeNewValue;
     }
     initializeTable() {
+        var _a, _b, _c, _d;
         // Clear the previous table instance (if any)
         this.table = null;
         // Set default options for the table
@@ -215,26 +259,9 @@ export class NvDatagrid {
                 }, // Default: no column sizing info
             },
         };
-        if (this.enableGlobalFilter) {
-            tableOptions.getFilteredRowModel = getFilteredRowModel();
-            // Set the initial global filter value
-            tableOptions.state.globalFilter = this.globalFilter;
-            // Define the callback for global filter changes
-            tableOptions.onGlobalFilterChange = value => {
-                this.globalFilter = value;
-            };
-            tableOptions.globalFilterFn = (row, columnId, filterValue) => {
-                const response = row
-                    .getValue(columnId)
-                    .toString()
-                    .toLowerCase()
-                    .includes(filterValue.toLowerCase());
-                return response;
-            };
-        }
         if (this.parsedColumns.length > 0) {
             // Validate and generate column definitions
-            const validColumns = this.parsedColumns.filter(column => (column === null || column === void 0 ? void 0 : column.accessor) && (column === null || column === void 0 ? void 0 : column.header));
+            const validColumns = this.parsedColumns.filter(column => column === null || column === void 0 ? void 0 : column.accessor);
             // Update tableOptions based on parsed data and columns
             const hasColumns = validColumns && Array.isArray(validColumns) && validColumns.length > 0;
             const hasData = this.parsedData &&
@@ -244,22 +271,22 @@ export class NvDatagrid {
                 // No columns and no data
             }
             else if (hasColumns && !hasData) {
+                // Has columns but no data
                 tableOptions.columns = this.generateColumns(validColumns, tableOptions);
             }
             else {
                 // Both columns and data are available
-                // No columns and data is available
                 tableOptions.data = this.getTableData();
                 tableOptions.columns = this.generateColumns(validColumns, tableOptions);
             }
         }
         else {
-            // No columns and data is available
+            // No parsed columns and data is available
             const hasData = this.parsedData &&
                 Array.isArray(this.parsedData) &&
                 this.parsedData.length > 0;
             if (hasData) {
-                // No columns and data is available
+                // No parsed columns and data is available
                 const firstRow = this.parsedData[0];
                 const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
                     accessor: key,
@@ -272,26 +299,116 @@ export class NvDatagrid {
                 tableOptions.columns = this.generateColumns(arrayColumnsConfig, tableOptions);
             }
         }
+        if (this.enableGlobalFilter) {
+            tableOptions.getFilteredRowModel = getFilteredRowModel();
+            const globalFilter = this.globalFilterSearchTerm;
+            // Set the initial global filter value
+            tableOptions.state.globalFilter = globalFilter;
+            // Define the callback for global filter changes
+            tableOptions.onGlobalFilterChange = updater => {
+                const newFilter = typeof updater === 'function'
+                    ? updater(this.globalFilterSearchTerm)
+                    : updater;
+                this.globalFilterSearchTerm = newFilter; // Will automatically trigger the searchTerm watcher and update the table
+            };
+            tableOptions.globalFilterFn = this.globalFilterFn;
+        }
+        if (this.enablePagination) {
+            tableOptions.getPaginationRowModel = getPaginationRowModel();
+            const pagination = {
+                pageIndex: (_b = (_a = this.paginationState) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0,
+                pageSize: (_d = (_c = this.paginationState) === null || _c === void 0 ? void 0 : _c.pageSize) !== null && _d !== void 0 ? _d : 10,
+            };
+            // Set the initial pagination value with safeguards
+            tableOptions.state.pagination = pagination;
+            tableOptions.onPaginationChange = updater => {
+                const newPagination = typeof updater === 'function'
+                    ? updater(this.paginationState)
+                    : updater;
+                this.paginationState = newPagination;
+            };
+        }
         // Initialize the table
         this.table = createTable(tableOptions);
     }
+    /**
+     * Global filter function for the table.
+     * This function checks if the specified filter value is present in any of the row's original values,
+     * including nested objects and arrays. It is used to filter the rows based on the global filter value,
+     * allowing for case-insensitive matching.
+     *
+     * @param {Row<any>} row - The row object containing the data to be filtered.
+     * @param {string} _columnId - The ID of the column being filtered (not used in this function).
+     * @param {string} filterValue - The value to filter the rows by. This value is checked against the row's data.
+     * @returns {boolean} - Returns true if the row should be included in the filtered results, false otherwise.
+     *                     If the filter value is empty, all rows are included.
+     */
+    globalFilterFn(row, _columnId, filterValue) {
+        const safeFilterValue = String(filterValue).toLowerCase().trim();
+        // If no filter value, return true for all rows
+        if (!safeFilterValue)
+            return true;
+        // More robust filtering across all columns
+        const checkValue = (value) => {
+            if (typeof value === 'object' && value !== null) {
+                // If it's an array, check each item
+                if (Array.isArray(value)) {
+                    return value.some(item => checkValue(item));
+                }
+                // If it's an object, check each property
+                return Object.values(value).some(val => checkValue(val));
+            }
+            return String(value).toLowerCase().includes(safeFilterValue);
+        };
+        return checkValue(row.original);
+    }
     // Helper function to generate column definitions
     generateColumns(validColumns, tableOptions) {
         const columnHelper = createColumnHelper();
         if (validColumns.length > 0) {
             // Use defined columns
-            return validColumns.map(column => columnHelper.accessor(column.accessor, {
-                header: column.header,
-                cell: info => info.getValue(),
-                enableGlobalFilter: this.enableGlobalFilter,
-            }));
+            return validColumns.map(column => {
+                var _a, _b;
+                return columnHelper.accessor(column.accessor, {
+                    header: (_b = (this.renderTemplate(this.headerTemplateCache.get(column.accessor), (_a = column.header) !== null && _a !== void 0 ? _a : column.accessor, null) ||
+                        column.header)) !== null && _b !== void 0 ? _b : column.accessor,
+                    cell: (info) => {
+                        var _a, _b, _c;
+                        const value = info.getValue();
+                        const cellAccessors = column.accessor;
+                        const row = info.row;
+                        return ((_a = this.columnData.find(x => x.accessor === cellAccessors)) === null || _a === void 0 ? void 0 : _a.repeatTemplate) && Array.isArray(value)
+                            ? value.map((item) => {
+                                var _a, _b;
+                                return (_b = (_a = (this.renderTemplate(this.templateCache.get(cellAccessors), item, row) ||
+                                    item)) !== null && _a !== void 0 ? _a : value) !== null && _b !== void 0 ? _b : this.fallbackValue;
+                            })
+                            : (_c = (_b = (this.renderTemplate(this.templateCache.get(cellAccessors), value, row) ||
+                                value)) !== null && _b !== void 0 ? _b : value) !== null && _c !== void 0 ? _c : this.fallbackValue;
+                    },
+                    enableGlobalFilter: this.enableGlobalFilter,
+                });
+            });
         }
         else if (tableOptions.data && tableOptions.data.length > 0) {
             // Generate columns from data keys
             const sampleRow = tableOptions.data[0];
             return Object.keys(sampleRow).map(key => columnHelper.accessor(key, {
-                header: key.charAt(0).toUpperCase() + key.slice(1), // Capitalize key for header
-                cell: info => info.getValue(),
+                header: this.renderTemplate(this.headerTemplateCache.get(key), key.charAt(0).toUpperCase() + key.slice(1), null) || key.charAt(0).toUpperCase() + key.slice(1), // Capitalize key for header
+                cell: (info) => {
+                    var _a, _b, _c;
+                    const value = info.getValue();
+                    const cellAccessors = key;
+                    const row = info.row;
+                    return ((_a = this.columnData.find(x => x.accessor === cellAccessors)) === null || _a === void 0 ? void 0 : _a.repeatTemplate) && Array.isArray(value)
+                        ? value.map((item) => {
+                            var _a, _b;
+                            return (_b = (_a = (this.renderTemplate(this.templateCache.get(cellAccessors), item, row) ||
+                                item)) !== null && _a !== void 0 ? _a : value) !== null && _b !== void 0 ? _b : this.fallbackValue;
+                        })
+                        : (_c = (_b = (this.renderTemplate(this.templateCache.get(cellAccessors), value, row) ||
+                            value)) !== null && _b !== void 0 ? _b : value) !== null && _c !== void 0 ? _c : this.fallbackValue;
+                },
                 enableGlobalFilter: this.enableGlobalFilter,
             }));
         }
@@ -320,11 +437,11 @@ export class NvDatagrid {
         // Replace placeholders in text content, attributes, and properties
         element.querySelectorAll('*').forEach(el => {
             // Replace placeholders in text content
-            this.replacePlaceholdersTextContent(el, cellValue);
+            this.replacePlaceholdersTextContent(el, cellValue, row);
             // Replace placeholders in attributes
-            this.replacePlaceholdersAttributes(el, cellValue);
+            this.replacePlaceholdersAttributes(el, cellValue, row);
             // Replace placeholders in properties
-            this.replacePlaceholdersProperties(el, cellValue);
+            this.replacePlaceholdersProperties(el, cellValue, row);
         });
         // Handle `data-bind-event`
         element.querySelectorAll('[data-bind-event]').forEach(el => {
@@ -400,56 +517,151 @@ export class NvDatagrid {
                 }
             }
             // Handle single-level key lookup
-            return key in cellValue ? String(cellValue[key]) : this.fallbackValue;
+            if (key in cellValue) {
+                return String(cellValue[key]);
+            }
+            else if (Array.isArray(cellValue)) {
+                // Handle array of objects
+                const response = cellValue.map((item) => {
+                    if (typeof item !== 'object') {
+                        return item.toString();
+                    }
+                    else if (key in item) {
+                        return item[key];
+                    }
+                    else {
+                        return item.toString();
+                    }
+                });
+                return response.join(', ');
+            }
+            return this.fallbackValue;
         }
         // If cellValue is a primitive (string, number, boolean, etc.), return it as a string
         return (_a = cellValue === null || cellValue === void 0 ? void 0 : cellValue.toString()) !== null && _a !== void 0 ? _a : this.fallbackValue;
     }
-    replacePlaceholdersTextContent(element, cellValue) {
-        // ✅ Replace placeholders in text content
-        element.childNodes.forEach(node => {
-            if (node.nodeType === Node.TEXT_NODE) {
-                node.textContent = node.textContent.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue));
-            }
-        });
+    replacePlaceholdersTextContent(element, cellValue, row) {
+        if (!cellValue) {
+            // ✅ Replace placeholders in text content with the row original value
+            // but first get the original value
+            const originalValue = row.original;
+            element.childNodes.forEach(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    node.textContent = node.textContent.replace(/__([\w.]+)__/g, (_, key) => {
+                        if (key in originalValue) {
+                            return this.replaceKeyWithValue(key, originalValue[key]);
+                        }
+                        else {
+                            console.warn(`Key ${key} not found in originalValue`);
+                            return '';
+                        }
+                    });
+                }
+            });
+        }
+        else {
+            // ✅ Replace placeholders in text content
+            element.childNodes.forEach(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    node.textContent = node.textContent.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue));
+                }
+            });
+        }
     }
-    replacePlaceholdersAttributes(element, cellValue) {
-        // ✅ Replace placeholders in attributes
-        Array.from(element.attributes).forEach(attr => {
-            if (attr.value.includes('__')) {
-                attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue));
-            }
-        });
+    replacePlaceholdersAttributes(element, cellValue, row) {
+        if (!cellValue) {
+            // ✅ Replace placeholders in attributes with the row original value
+            // but first get the original value
+            const originalValue = row.original;
+            Array.from(element.attributes).forEach(attr => {
+                if (attr.value.includes('__')) {
+                    attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => {
+                        if (key in originalValue) {
+                            return this.replaceKeyWithValue(key, originalValue[key]);
+                        }
+                        else {
+                            console.warn(`Key ${key} not found in originalValue`);
+                            return '';
+                        }
+                    });
+                }
+            });
+        }
+        else {
+            // ✅ Replace placeholders in attributes
+            Array.from(element.attributes).forEach(attr => {
+                if (attr.value.includes('__')) {
+                    attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue));
+                }
+            });
+        }
     }
-    replacePlaceholdersProperties(element, cellValue) {
-        // ✅ Dynamically extract relevant properties
-        const properties = new Set();
-        // Collect only own enumerable properties
-        Object.keys(element).forEach(key => properties.add(key));
-        // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
-        let proto = Object.getPrototypeOf(element);
-        while (proto && proto !== HTMLElement.prototype) {
-            Object.keys(proto).forEach(key => properties.add(key));
-            proto = Object.getPrototypeOf(proto);
-        }
-        // ✅ Filter and copy only non-function properties and exclude irrelevant ones
-        properties.forEach(prop => {
-            if (typeof element[prop] !== 'function' && // Ignore methods
-                !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
-                !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
-            ) {
-                try {
+    replacePlaceholdersProperties(element, cellValue, row) {
+        if (!cellValue) {
+            // ✅ Replace placeholders in properties with the row original value
+            // but first get the original value
+            const originalValue = row.original;
+            // ✅ Dynamically extract relevant properties
+            const properties = new Set();
+            // Collect only own enumerable properties
+            Object.keys(originalValue).forEach(key => properties.add(key));
+            // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
+            let proto = Object.getPrototypeOf(originalValue);
+            while (proto && proto !== HTMLElement.prototype) {
+                Object.keys(proto).forEach(key => properties.add(key));
+                proto = Object.getPrototypeOf(proto);
+            }
+            // ✅ Filter and copy only non-function properties and exclude irrelevant ones
+            properties.forEach(prop => {
+                if (typeof element[prop] !== 'function' && // Ignore methods
+                    !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
+                    !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+                ) {
                     const propValue = element[prop];
-                    // ✅ Replace placeholders only if the value is a string
                     if (typeof propValue === 'string' && propValue.includes('__')) {
-                        element[prop] = propValue.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue)); // ✅ TypeScript safe
+                        element[prop] = propValue.replace(/__([\w.]+)__/g, (_, key) => {
+                            if (key in originalValue) {
+                                return this.replaceKeyWithValue(key, originalValue[key]);
+                            }
+                            else {
+                                console.warn(`Key ${key} not found in originalValue`);
+                                return '';
+                            }
+                        });
                     }
                 }
-                catch (error) {
-                    console.warn(`Could not assign property ${prop}:`, error.message);
-                }
+            });
+        }
+        else {
+            // ✅ Dynamically extract relevant properties
+            const properties = new Set();
+            // Collect only own enumerable properties
+            Object.keys(element).forEach(key => properties.add(key));
+            // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
+            let proto = Object.getPrototypeOf(element);
+            while (proto && proto !== HTMLElement.prototype) {
+                Object.keys(proto).forEach(key => properties.add(key));
+                proto = Object.getPrototypeOf(proto);
             }
-        });
+            // ✅ Filter and copy only non-function properties and exclude irrelevant ones
+            properties.forEach(prop => {
+                if (typeof element[prop] !== 'function' && // Ignore methods
+                    !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
+                    !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+                ) {
+                    try {
+                        const propValue = element[prop];
+                        // ✅ Replace placeholders only if the value is a string
+                        if (typeof propValue === 'string' && propValue.includes('__')) {
+                            element[prop] = propValue.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(key, cellValue)); // ✅ TypeScript safe
+                        }
+                    }
+                    catch (error) {
+                        console.warn(`Could not assign property ${prop}:`, error.message);
+                    }
+                }
+            });
+        }
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -483,14 +695,30 @@ export class NvDatagrid {
     handleParsedChange() {
         this.initializeTable();
     }
-    handleGlobalFilter(newValue) {
+    handleGlobalFilterSearchTerm(newValue) {
         if (!this.table) {
             console.warn('Table is not initialized yet.');
             return;
         }
-        // 🚨 Manually update state before calling filter
-        this.table.options.state = Object.assign(Object.assign({}, this.table.options.state), { globalFilter: newValue });
-        this.table.setGlobalFilter(newValue);
+        // Not working
+        /*// Set the global filter for the table
+        this.table.setGlobalFilter(newValue);*/
+        // Manually update the globalFilter state
+        this.table.options.state.globalFilter = newValue;
+    }
+    handlePaginationState(newValue, oldValue) {
+        if (!this.table) {
+            console.warn('Table is not initialized yet.');
+            return;
+        }
+        // Only update if there is a meaningful change
+        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+            // Not working
+            /*// Set the pagination for the table
+            this.table.setPagination(newValue);*/
+            // Manually update the pagination state
+            this.table.options.state.pagination = newValue;
+        }
     }
     //#endregion WATCHERS
     /****************************************************************************/
@@ -499,34 +727,39 @@ export class NvDatagrid {
         this.cacheTemplates();
         this.parseDataAndColumns();
         this.initializeTable();
+        if (this.enablePagination) {
+            // Ensure a valid page size
+            const effectivePageSize = this.pageSize > 0 ? this.pageSize : 10;
+            this.paginationState = {
+                pageIndex: Math.max(0, this.minPageIndex - 1),
+                pageSize: effectivePageSize,
+            };
+        }
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const headerGroups = !this.table || this.table === undefined || this.parsedColumns.length === 0
             ? []
             : (_a = this.table) === null || _a === void 0 ? void 0 : _a.getHeaderGroups();
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
-        return (h(Host, { key: '6768db58f6a19cbb64e2206957ca27c18c408e46' }, h("div", { key: 'e262922097ae61025e13f8fe685ed7b38063e82c', class: "hidden" }, h("slot", { key: '9025f410bc3e6b409d6225a53a97d13aa3629200' })), h("slot", { key: '684876205d7092a4edf325c8897e97a491b77c6a', name: "before" }), this.enableGlobalFilter && this.table && (h("div", { key: 'b2fe6dd4a97d978617d404134286e6048eb8ddc2', class: "search-container" }, h("input", { key: '82c5d3b73b0bff0c2415ad896a6a4504bb1bb92c', type: "text", value: (_d = this.globalFilter) !== null && _d !== void 0 ? _d : '', onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns...", class: "search-input", "aria-label": "Search all columns" }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (h(Host, { key: 'b3886397a5e6694611636d4da7d61ae5ccbe1903' }, h("div", { key: '8fa71d83f4cfa79cf7fb334bcf6115e4cf253c5d', class: "hidden" }, h("slot", { key: '9aad5956b5973cafc486f3a854a66ae86038ef4a' })), h("slot", { key: '7a1ca93223567faffabb3473df2176cd02654247', name: "before" }), this.enableGlobalFilter && this.table && (h("div", { key: '0020880c229d8ed9070c15182191e86b8b3fed1d', class: "search-container" }, h("input", { key: 'cefc47330a7d770c3668d1406930b9ac50992a10', type: "text", value: (_d = this.globalFilterSearchTerm) !== null && _d !== void 0 ? _d : '', onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns...", class: "search-input", "aria-label": "Search all columns" }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("div", null, h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", null, this.parsedColumns.length > 0 && headerGroups
             ? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (h("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return (h("th", { key: header.id }, header.isPlaceholder
                     ? null
-                    : this.renderTemplate(this.headerTemplateCache.get(header.id), {}) || header.column.columnDef.header));
+                    : this.flexRender(header.column.columnDef.header, header.getContext())));
             }))))
             : null)), h("tbody", null, !rows || rows.length === 0 || this.parsedData.length === 0 ? (h("tr", null, h("td", { colSpan: this.parsedColumns.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => {
             const rowId = row.id;
             const visibleCells = row === null || row === void 0 ? void 0 : row.getVisibleCells();
             return (h("tr", { key: rowId }, visibleCells.map(cell => {
-                const cellAccessors = cell.column.id;
-                const cellValue = cell.getValue();
-                return (h("td", { key: cell.id, "data-row-id": rowId }, this.renderTemplate(this.templateCache.get(cellAccessors), cellValue, row) ||
-                    (cellValue !== null && cellValue !== void 0 ? cellValue : this.fallbackValue)));
+                return (h("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
             })));
-        }))))), h("slot", { key: '4bda5737d7917a508b97cf38b764000f8c5d368d', name: "after" })));
+        })))), this.enablePagination && (h("div", { class: "flex items-center gap-2" }, h("button", { class: "border rounded p-1", disabled: !this.table.getCanPreviousPage(), onClick: this.table.firstPage }, "<<"), h("button", { class: "border rounded p-1", disabled: !this.table.getCanPreviousPage(), onClick: this.table.previousPage }, "<"), h("button", { class: "border rounded p-1", disabled: !this.table.getCanNextPage(), onClick: this.table.nextPage }, ">"), h("button", { class: "border rounded p-1", disabled: !this.table.getCanNextPage(), onClick: this.table.lastPage }, ">>"), h("span", { class: "flex items-center gap-1" }, h("div", null, "Page"), h("strong", null, this.table.getState().pagination.pageIndex + 1, " of", ' ', this.table.getPageCount().toLocaleString())), h("span", { class: "flex items-center gap-1" }, "| Go to page:", ' ', h("input", { type: "number", min: this.minPageIndex, max: this.table.getPageCount(), value: this.table.getState().pagination.pageIndex + 1, class: "border p-1 rounded w-16", "aria-label": "Go to page", onInput: this.handlePageIndexChange })), (_e = this.pageSizes) !== null && _e !== void 0 ? _e : (h("select", { "aria-label": "Rows per page", onChange: this.handlePageSizeChange }, this.pageSizes.map(pageSize => (h("option", { value: String(pageSize), selected: this.table.getState().pagination.pageSize === pageSize }, "Show ", pageSize))))))))), h("slot", { key: '2030fdc2b38a293e749f2ffd4645987e834fee76', name: "after" })));
     }
     static get is() { return "nv-datagrid"; }
     static get originalStyleUrls() {
@@ -753,6 +986,73 @@ export class NvDatagrid {
                 "attribute": "auto-generate-columns",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "enablePagination": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether to enable pagination for the data grid."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-pagination",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "10"
+                        }],
+                    "text": "The number of rows to display per page."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "page-size",
+                "reflect": true,
+                "defaultValue": "10"
+            },
+            "pageSizes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "[10, 20, 30, 40, 50]"
+                        }],
+                    "text": "The array of page sizes to display in the pagination dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[10, 20, 30, 40, 50]"
             }
         };
     }
@@ -761,7 +1061,9 @@ export class NvDatagrid {
             "table": {},
             "parsedColumns": {},
             "parsedData": {},
-            "globalFilter": {}
+            "globalFilterSearchTerm": {},
+            "columnData": {},
+            "paginationState": {}
         };
     }
     static get events() {
@@ -809,8 +1111,11 @@ export class NvDatagrid {
                 "propName": "parsedData",
                 "methodName": "handleParsedChange"
             }, {
-                "propName": "globalFilter",
-                "methodName": "handleGlobalFilter"
+                "propName": "globalFilterSearchTerm",
+                "methodName": "handleGlobalFilterSearchTerm"
+            }, {
+                "propName": "paginationState",
+                "methodName": "handlePaginationState"
             }];
     }
 }