@nova-design-system/nova-webcomponents 3.0.0 → 3.2.0

package/dist/components/nv-datagrid.js

@@ -1,5 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1c45c0f2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-679e0fa9.js';
 import { d as deepCopyElement, e as excludedProps } from './p-cb34aa4f.js';
+import { d as SortingPossibility } from './p-1f505531.js';
+import { d as defineCustomElement$3 } from './p-f0a5e7e4.js';
+import { d as defineCustomElement$2 } from './p-76a30bf1.js';
 
 /**
    * table-core
@@ -3199,6 +3202,92 @@ function getPaginationRowModel(opts) {
   }, getMemoOptions(table.options, 'debugTable'));
 }
 
+function getSortedRowModel() {
+  return table => memo(() => [table.getState().sorting, table.getPreSortedRowModel()], (sorting, rowModel) => {
+    if (!rowModel.rows.length || !(sorting != null && sorting.length)) {
+      return rowModel;
+    }
+    const sortingState = table.getState().sorting;
+    const sortedFlatRows = [];
+
+    // Filter out sortings that correspond to non existing columns
+    const availableSorting = sortingState.filter(sort => {
+      var _table$getColumn;
+      return (_table$getColumn = table.getColumn(sort.id)) == null ? void 0 : _table$getColumn.getCanSort();
+    });
+    const columnInfoById = {};
+    availableSorting.forEach(sortEntry => {
+      const column = table.getColumn(sortEntry.id);
+      if (!column) return;
+      columnInfoById[sortEntry.id] = {
+        sortUndefined: column.columnDef.sortUndefined,
+        invertSorting: column.columnDef.invertSorting,
+        sortingFn: column.getSortingFn()
+      };
+    });
+    const sortData = rows => {
+      // This will also perform a stable sorting using the row index
+      // if needed.
+      const sortedData = rows.map(row => ({
+        ...row
+      }));
+      sortedData.sort((rowA, rowB) => {
+        for (let i = 0; i < availableSorting.length; i += 1) {
+          var _sortEntry$desc;
+          const sortEntry = availableSorting[i];
+          const columnInfo = columnInfoById[sortEntry.id];
+          const sortUndefined = columnInfo.sortUndefined;
+          const isDesc = (_sortEntry$desc = sortEntry == null ? void 0 : sortEntry.desc) != null ? _sortEntry$desc : false;
+          let sortInt = 0;
+
+          // All sorting ints should always return in ascending order
+          if (sortUndefined) {
+            const aValue = rowA.getValue(sortEntry.id);
+            const bValue = rowB.getValue(sortEntry.id);
+            const aUndefined = aValue === undefined;
+            const bUndefined = bValue === undefined;
+            if (aUndefined || bUndefined) {
+              if (sortUndefined === 'first') return aUndefined ? -1 : 1;
+              if (sortUndefined === 'last') return aUndefined ? 1 : -1;
+              sortInt = aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;
+            }
+          }
+          if (sortInt === 0) {
+            sortInt = columnInfo.sortingFn(rowA, rowB, sortEntry.id);
+          }
+
+          // If sorting is non-zero, take care of desc and inversion
+          if (sortInt !== 0) {
+            if (isDesc) {
+              sortInt *= -1;
+            }
+            if (columnInfo.invertSorting) {
+              sortInt *= -1;
+            }
+            return sortInt;
+          }
+        }
+        return rowA.index - rowB.index;
+      });
+
+      // If there are sub-rows, sort them
+      sortedData.forEach(row => {
+        var _row$subRows;
+        sortedFlatRows.push(row);
+        if ((_row$subRows = row.subRows) != null && _row$subRows.length) {
+          row.subRows = sortData(row.subRows);
+        }
+      });
+      return sortedData;
+    };
+    return {
+      rows: sortData(rowModel.rows),
+      flatRows: sortedFlatRows,
+      rowsById: rowModel.rowsById
+    };
+  }, getMemoOptions(table.options, 'debugTable', 'getSortedRowModel', () => table._autoResetPageIndex()));
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Debounce function to prevent multiple calls in a short
@@ -3219,7 +3308,7 @@ function debounce(func, wait) {
     };
 }
 
-const nvDatagridCss = "nv-datagrid{display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}";
+const nvDatagridCss = "nv-datagrid{--nv-datagrid-border-default:var(\n    --components-form-field-border-default\n  );--nv-datagrid-border-hover:var(--components-form-field-border-hover);--nv-datagrid-border-focus:var(--components-form-field-border-default);--nv-datagrid-background-default:var(\n    --components-form-field-background-default\n  );--nv-datagrid-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-datagrid-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-datagrid-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-datagrid-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-datagrid-outline-color:var(--color-focus-brand);display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}nv-datagrid .cursor-pointer{cursor:pointer}nv-datagrid .select-none{-webkit-user-select:none;user-select:none}nv-datagrid .search-container{display:flex}nv-datagrid .checkbox-container{position:relative;color:var(--nv-datagrid-color-checked)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-datagrid-color-disabled)}nv-datagrid .checkbox-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-datagrid-border-default);background:var(--nv-datagrid-background-default)}nv-datagrid .checkbox-container input[type=checkbox]:hover{border-color:var(--nv-datagrid-border-hover)}nv-datagrid .checkbox-container input[type=checkbox]:focus{border-color:var(--nv-datagrid-border-focus)}nv-datagrid .checkbox-container input[type=checkbox]:focus,nv-datagrid .checkbox-container input[type=checkbox]:focus-within{outline:none}nv-datagrid .checkbox-container input[type=checkbox]:focus-visible,nv-datagrid .checkbox-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-datagrid-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-datagrid .checkbox-container input[type=checkbox]:checked,nv-datagrid .checkbox-container input[type=checkbox]:indeterminate{background:var(--nv-datagrid-background-checked);border-color:var(--nv-datagrid-background-checked)}nv-datagrid .checkbox-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-datagrid-background-disabled);border-color:var(--nv-datagrid-border-default)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-datagrid .checkbox-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}";
 const NvDatagridStyle0 = nvDatagridCss;
 
 const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H {
@@ -3227,6 +3316,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         super();
         this.__registerHost();
         this.action = createEvent(this, "action", 7);
+        this.selectedRows = createEvent(this, "selectedRows", 7);
         this.templateCache = new Map();
         this.headerTemplateCache = new Map();
         this.minPageIndex = 1;
@@ -3238,6 +3328,8 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         this.globalFilterSearchTerm = '';
         this.columnData = [];
         this.paginationState = null;
+        this.sorting = [];
+        this.rowSelectionState = {};
         //#endregion STATES
         /****************************************************************************/
         //#region PROPERTIES
@@ -3273,6 +3365,12 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
          * @default 'No data or columns available to display.'
          */
         this.noColumnsNoDataMessage = 'No data or columns available to display.';
+        /**
+         * Whether to automatically generate columns if none are provided.
+         * If columns are explicitly set, this property is ignored.
+         * @default false
+         */
+        this.autoGenerateColumns = false;
         /**
          * Whether to enable global filtering for the data grid.
          * This allows users to search across all columns for a specific value.
@@ -3282,11 +3380,9 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
          */
         this.enableGlobalFilter = false;
         /**
-         * Whether to automatically generate columns if none are provided.
-         * If columns are explicitly set, this property is ignored.
-         * @default false
+         * Position the global filter input field
          */
-        this.autoGenerateColumns = false;
+        this.globalFilterPosition = 'end';
         /**
          * Whether to enable pagination for the data grid.
          * @default false
@@ -3294,6 +3390,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         this.enablePagination = false;
         /**
          * The number of rows to display per page.
+         * If the number is not present in the property pageSizes it takes the first of the list.
          * @default 10
          */
         this.pageSize = 10;
@@ -3302,6 +3399,15 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
          * @default [10, 20, 30, 40, 50]
          */
         this.pageSizes = [10, 20, 30, 40, 50];
+        /**
+         * Whether to enable sorting for the data grid.
+         * @default false
+         */
+        this.enableSorting = false;
+        /**
+         * Whether to enable row selection for the data grid.
+         */
+        this.enableRowSelection = false;
         this.debouncedFilter = debounce((value) => {
             var _a;
             (_a = this.table) === null || _a === void 0 ? void 0 : _a.setGlobalFilter(value);
@@ -3334,8 +3440,32 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         };
         this.handlePageSizeChange = (event) => {
             const target = event.target;
+            let effectivePageSize = Number(target.value);
+            if (!this.pageSizes.includes(effectivePageSize) && this.pageSizes) {
+                effectivePageSize = this.pageSizes[0];
+            }
             // 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
+            this.paginationState = Object.assign(Object.assign({}, this.paginationState), { pageSize: effectivePageSize }); // This triggers the paginationState watcher
+        };
+        this.handleSortingClick = (event, header) => {
+            var _a;
+            if (!header.column.getCanSort()) {
+                return;
+            }
+            (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(event);
+        };
+        this.getSortTitle = (header) => {
+            if (!header.column.getCanSort())
+                return;
+            const nextOrder = header.column.getNextSortingOrder();
+            switch (nextOrder) {
+                case SortingPossibility.Asc:
+                    return 'Sort ascending';
+                case SortingPossibility.Desc:
+                    return 'Sort descending';
+                default:
+                    return 'Clear sort';
+            }
         };
     }
     //#endregion PROPERTIES
@@ -3371,34 +3501,37 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
                 header: col.header,
                 accessor: col.accessor,
                 repeatTemplate: col.hasAttribute('repeat-template'),
+                group: col.group,
             };
             this.columnData.push(colData);
         });
+        console.info('cacheTemplates this.columnData:', this.columnData);
     }
     parseDataAndColumns() {
-        if (this.dataJson) {
-            this.parseJsonData(this.dataJson);
-        }
-        else if (this.data && this.data.length > 0) {
+        if (this.data && this.data.length > 0) {
             this.parseDataArray(this.data, this.parsedData);
         }
-        if (this.columnsJson) {
-            this.parseJsonColumns(this.columnsJson, this.parsedColumns);
-        }
-        else if (this.columns && this.columns.length > 0) {
+        if (this.columns && this.columns.length > 0) {
             this.parseColumnsArray(this.columns, this.parsedColumns);
         }
         else if (this.headerTemplateCache.size > 0) {
             const headerKeys = Array.from(this.headerTemplateCache.keys());
-            const arrayColumnsConfig = headerKeys.map(key => (Object.assign({}, { accessor: key, header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '' })));
+            const arrayColumnsConfig = headerKeys.map(key => {
+                var _a, _b;
+                return (Object.assign({}, { accessor: key, header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '', group: (_b = (_a = this.columnData.find(x => x.accessor === key)) === null || _a === void 0 ? void 0 : _a.group) !== null && _b !== void 0 ? _b : 'ungrouped' }));
+            });
             this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
         }
         else if (this.parsedData.length > 0) {
             const firstRow = this.parsedData[0];
-            const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
-                accessor: key,
-                header: key.charAt(0).toUpperCase() + key.slice(1),
-            }));
+            const arrayColumnsConfig = Object.keys(firstRow).map(key => {
+                var _a, _b;
+                return ({
+                    accessor: key,
+                    header: key.charAt(0).toUpperCase() + key.slice(1),
+                    group: (_b = (_a = this.columnData.find(x => x.accessor === key)) === null || _a === void 0 ? void 0 : _a.group) !== null && _b !== void 0 ? _b : 'ungrouped',
+                });
+            });
             if (this.autoGenerateColumns) {
                 this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
             }
@@ -3441,6 +3574,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         var _a, _b, _c, _d;
         // Clear the previous table instance (if any)
         this.table = null;
+        console.info('initializeTable this.columnData:', this.columnData);
         // Set default options for the table
         const tableOptions = {
             columns: [],
@@ -3499,10 +3633,14 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
             if (hasData) {
                 // No parsed columns and data is available
                 const firstRow = this.parsedData[0];
-                const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
-                    accessor: key,
-                    header: key.charAt(0).toUpperCase() + key.slice(1),
-                }));
+                const arrayColumnsConfig = Object.keys(firstRow).map(key => {
+                    var _a, _b;
+                    return ({
+                        accessor: key,
+                        header: key.charAt(0).toUpperCase() + key.slice(1),
+                        group: (_b = (_a = this.columnData.find(x => x.accessor === key)) === null || _a === void 0 ? void 0 : _a.group) !== null && _b !== void 0 ? _b : 'ungrouped',
+                    });
+                });
                 if (this.autoGenerateColumns) {
                     this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
                 }
@@ -3526,9 +3664,14 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         }
         if (this.enablePagination) {
             tableOptions.getPaginationRowModel = getPaginationRowModel();
+            const pageIndex = (_b = (_a = this.paginationState) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0;
+            let effectivePageSize = (_d = (_c = this.paginationState) === null || _c === void 0 ? void 0 : _c.pageSize) !== null && _d !== void 0 ? _d : 10;
+            if (!this.pageSizes.includes(effectivePageSize) && this.pageSizes) {
+                effectivePageSize = this.pageSizes[0];
+            }
             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,
+                pageIndex: pageIndex,
+                pageSize: effectivePageSize,
             };
             // Set the initial pagination value with safeguards
             tableOptions.state.pagination = pagination;
@@ -3539,6 +3682,33 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
                 this.paginationState = newPagination;
             };
         }
+        if (this.enableSorting) {
+            tableOptions.getSortedRowModel = getSortedRowModel();
+            tableOptions.enableSorting = this.enableSorting;
+            tableOptions.state.sorting = this.sorting;
+            tableOptions.onSortingChange = updater => {
+                const newSorting = typeof updater === 'function' ? updater(this.sorting) : updater;
+                this.sorting = newSorting; // Will automatically trigger the searchTerm watcher and update the table
+            };
+        }
+        if (this.enableRowSelection) {
+            tableOptions.state.rowSelection = this.rowSelectionState;
+            tableOptions.onRowSelectionChange = updater => {
+                const newRowSelectionState = typeof updater === 'function'
+                    ? updater(this.rowSelectionState)
+                    : updater;
+                this.rowSelectionState = newRowSelectionState;
+                // Emit the original rows instead of IDs
+                const selectedRows = Object.keys(newRowSelectionState)
+                    .filter(rowId => newRowSelectionState[rowId])
+                    .map(rowId => {
+                    // Assuming rowId corresponds to the index in parsedData
+                    const index = parseInt(rowId, 10); // Convert rowId to an integer index
+                    return this.parsedData[index]; // Get the original row data
+                });
+                this.selectedRows.emit(selectedRows); // Emit the original rows
+            };
+        }
         // Initialize the table
         this.table = createTable(tableOptions);
     }
@@ -3573,60 +3743,165 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         };
         return checkValue(row.original);
     }
+    createIconSpan(checked, indeterminate) {
+        const span = document.createElement('span');
+        span.className = 'icon';
+        if (checked && !indeterminate) {
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+            svg.setAttribute('width', '14');
+            svg.setAttribute('height', '14');
+            svg.setAttribute('viewBox', '0 0 14 14');
+            svg.setAttribute('fill', 'none');
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', 'M11.6667 3.5L5.25004 9.91667L2.33337 7');
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+            svg.appendChild(path);
+            span.appendChild(svg);
+        }
+        if (indeterminate) {
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.classList.add('indeterminate-svg');
+            svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+            svg.setAttribute('viewBox', '0 0 14 14');
+            svg.setAttribute('fill', 'none');
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', 'M2.9165 7H11.0832');
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+            svg.appendChild(path);
+            span.appendChild(svg);
+        }
+        return span;
+    }
+    createIndeterminateCheckbox(options = {}) {
+        const { indeterminate, checked = false, disabled = false, className = '', onChange, } = options;
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.checked = checked;
+        input.disabled = disabled;
+        input.className = `${className} cursor-pointer`.trim();
+        if (typeof indeterminate === 'boolean') {
+            input.indeterminate = !checked && indeterminate;
+        }
+        if (onChange) {
+            input.addEventListener('change', onChange);
+        }
+        const iconSpan = this.createIconSpan(checked, indeterminate);
+        const container = document.createElement('div');
+        container.className = 'checkbox-container';
+        container.appendChild(input);
+        container.appendChild(iconSpan);
+        return container;
+    }
     // Helper function to generate column definitions
     generateColumns(validColumns, tableOptions) {
+        console.info('generateColumns this.columnData:', this.columnData);
+        console.info('generateColumns validColumns:', validColumns);
+        let processedColumns = validColumns || [];
         const columnHelper = createColumnHelper();
-        if (validColumns.length > 0) {
-            // Use defined columns
-            return validColumns.map(column => {
+        // If no columns provided or autoGenerateColumns is true, generate them from data
+        if ((!validColumns && tableOptions.data && tableOptions.data.length > 0) ||
+            (validColumns.length <= 0 &&
+                tableOptions.data &&
+                tableOptions.data.length > 0)) {
+            const sampleRow = tableOptions.data[0];
+            processedColumns = Object.keys(sampleRow).map(key => {
                 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,
+                return ({
+                    header: key.charAt(0).toUpperCase() + key.slice(1),
+                    accessor: key,
+                    group: (_b = (_a = this.columnData.find(x => x.accessor === key)) === null || _a === void 0 ? void 0 : _a.group) !== null && _b !== void 0 ? _b : 'ungrouped',
+                    headerSlot: null,
+                    cellSlot: null,
                 });
             });
         }
-        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: 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
+        // Group columns by their group property
+        const groupedColumns = processedColumns.reduce((acc, column) => {
+            let group = column.group || 'ungrouped';
+            if (group == 'ungrouped') {
+                group = group + processedColumns.findIndex(x => x == column);
+            }
+            if (!acc[group]) {
+                acc[group] = [];
+            }
+            acc[group].push(column);
+            return acc;
+        }, {});
+        // Transform each column into a ColumnDef
+        const createColumnDef = (column) => {
+            var _a, _b, _c;
+            return columnHelper.accessor(column.accessor, {
+                header: (_c = (_b = this.renderTemplate(this.headerTemplateCache.get(column.accessor), (_a = column.header) !== null && _a !== void 0 ? _a : column.accessor, null)) !== null && _b !== void 0 ? _b : column.header) !== null && _c !== void 0 ? _c : column.accessor,
                 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)
+                    return ((_a = this.columnData.find(x => x.accessor === column.accessor)) === 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;
+                            var _a, _b, _c;
+                            return (_c = (_b = (_a = this.renderTemplate(this.templateCache.get(column.accessor), item, row)) !== null && _a !== void 0 ? _a : item) !== null && _b !== void 0 ? _b : value) !== null && _c !== void 0 ? _c : 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;
+                        : (_c = (_b = this.renderTemplate(this.templateCache.get(column.accessor), value, row)) !== null && _b !== void 0 ? _b : value) !== null && _c !== void 0 ? _c : this.fallbackValue;
                 },
-                enableGlobalFilter: this.enableGlobalFilter,
-            }));
-        }
-        else {
-            // No columns and no data
-            return [];
+                sortUndefined: 'last',
+                sortDescFirst: false,
+                enableSorting: this.enableSorting, // Explicitly set enableSorting based on the sorting prop
+                enableGlobalFilter: this.enableGlobalFilter, // Explicity set enableGlobalFilter based on the globalFiltering prop
+            });
+        };
+        // Create the final column structure
+        let generatedColumns = Object.entries(groupedColumns)
+            .map(([groupName, groupColumns]) => {
+            if (groupName.includes('ungrouped')) {
+                return groupColumns.map(createColumnDef);
+            }
+            return {
+                id: groupName,
+                header: groupName,
+                columns: groupColumns.map(createColumnDef),
+                enableSorting: this.enableSorting, // Also apply to column groups
+                enableGlobalFilter: this.enableGlobalFilter, // Also apply to column groups
+            };
+        })
+            .flat();
+        if (this.enableRowSelection) {
+            const rowSelection = columnHelper.accessor('select', {
+                header: ({ table }) => {
+                    return (h("div", { class: "flex px-1", ref: el => {
+                            const checkbox = this.createIndeterminateCheckbox({
+                                checked: table === null || table === void 0 ? void 0 : table.getIsAllRowsSelected(),
+                                indeterminate: table === null || table === void 0 ? void 0 : table.getIsSomeRowsSelected(),
+                                onChange: table === null || table === void 0 ? void 0 : table.getToggleAllRowsSelectedHandler(),
+                            });
+                            if (el) {
+                                el.innerHTML = ''; // Remove existing content
+                                el.appendChild(checkbox); // Append new checkbox
+                            }
+                        } }));
+                },
+                cell: ({ row }) => {
+                    return (h("div", { class: "flex px-1", ref: el => {
+                            const checkbox = this.createIndeterminateCheckbox({
+                                checked: row === null || row === void 0 ? void 0 : row.getIsSelected(),
+                                disabled: !(row === null || row === void 0 ? void 0 : row.getCanSelect()),
+                                indeterminate: row === null || row === void 0 ? void 0 : row.getIsSomeSelected(),
+                                onChange: row === null || row === void 0 ? void 0 : row.getToggleSelectedHandler(),
+                            });
+                            if (el) {
+                                el.innerHTML = ''; // Remove existing content
+                                el.appendChild(checkbox); // Append new checkbox
+                            }
+                        } }));
+                },
+                enableGlobalFilter: false,
+                enableSorting: false,
+            });
+            generatedColumns = [rowSelection, ...generatedColumns];
         }
+        return generatedColumns;
     }
     getTableData() {
         if (this.parsedData &&
@@ -3874,35 +4149,55 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
             });
         }
     }
+    getArrowSorting(header) {
+        if (!header.column.getCanSort())
+            return null;
+        const sortState = header.column.getIsSorted();
+        if (sortState === SortingPossibility.Asc) {
+            return (h("div", { class: "inline-flex align-middle" }, h("nv-icon", { name: "arrow-up" })));
+        }
+        if (sortState === SortingPossibility.Desc) {
+            return (h("div", { class: "inline-flex align-middle" }, h("nv-icon", { name: "arrow-down" })));
+        }
+        return null;
+    }
+    getHeaderCell(header) {
+        const isSortable = header.column.getCanSort();
+        const sortTitle = this.getSortTitle(header);
+        const content = header.isPlaceholder
+            ? null
+            : header.column.columnDef.header
+                ? this.flexRender(header.column.columnDef.header, header.getContext())
+                : null; // Ensure content is not null
+        const sortIcon = this.getArrowSorting(header);
+        const handleClick = this.createSortingClickHandler(header);
+        if (this.enableRowSelection) {
+            return (h("th", { key: header.id, colSpan: header.colSpan }, content, " "));
+        }
+        const returnHtml = (h("th", { key: header.id, colSpan: header.colSpan }, h("button", { type: "button", class: isSortable
+                ? 'w-full text-left cursor-pointer select-none bg-transparent border-none p-0 m-0 focus:outline-none'
+                : 'w-full text-left bg-transparent border-none p-0 m-0 cursor-default', onClick: handleClick, title: sortTitle }, h("span", { class: "inline-flex items-center gap-1" }, content, sortIcon))));
+        return returnHtml;
+    }
+    // 👇 Helper method to avoid arrow function in JSX
+    createSortingClickHandler(header) {
+        return (e) => {
+            this.handleSortingClick(e, header);
+        };
+    }
+    getPagination() {
+        var _a;
+        return (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 })), ((_a = this.pageSizes) === null || _a === void 0 ? void 0 : _a.length) > 0 && (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))))))));
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region WATCHERS
     parseColumns(newValue, oldValue = []) {
         this.parseColumnsArray(newValue, oldValue);
     }
-    parseJsonColumns(newValue, oldValue) {
-        try {
-            const newItems = newValue ? JSON.parse(newValue) : [];
-            this.parseColumnsArray(newItems, oldValue);
-        }
-        catch (e) {
-            console.error('Invalid JSON format for columnsJson:', e.message);
-            this.parsedColumns = [];
-        }
-    }
     parseData(newValue, oldValue = []) {
         this.parseDataArray(newValue, oldValue);
     }
-    parseJsonData(newValue) {
-        try {
-            const newItems = newValue ? JSON.parse(newValue) : [];
-            this.parseDataArray(newItems, this.parsedData);
-        }
-        catch (e) {
-            console.error('Invalid JSON format for dataJson:', e.message);
-            this.parsedData = [];
-        }
-    }
     handleParsedChange() {
         this.initializeTable();
     }
@@ -3931,6 +4226,39 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
             this.table.options.state.pagination = newValue;
         }
     }
+    handleSorting(newValue) {
+        if (!this.table) {
+            console.warn('Table is not initialized yet.');
+            return;
+        }
+        // Not working
+        /*// Set the sorting for the table
+        this.table.setSorting(newValue);*/
+        // Manually update the sorting state
+        this.table.options.state.sorting = newValue;
+    }
+    handlePageSize(newValue) {
+        let effectivePageSize = newValue;
+        if (!this.pageSizes.includes(effectivePageSize) && this.pageSizes) {
+            effectivePageSize = this.pageSizes[0];
+        }
+        // Simply use `setPageSize` to update the page size directly
+        this.paginationState = Object.assign(Object.assign({}, this.paginationState), { pageSize: effectivePageSize }); // This triggers the paginationState watcher
+    }
+    handleRowSelectionState(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 rowSelection for the table
+            this.table.setRowSelection(newValue);*/
+            // Manually update the row selection state
+            this.table.options.state.rowSelection = newValue;
+        }
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -3940,7 +4268,10 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         this.initializeTable();
         if (this.enablePagination) {
             // Ensure a valid page size
-            const effectivePageSize = this.pageSize > 0 ? this.pageSize : 10;
+            let effectivePageSize = this.pageSize > 0 ? this.pageSize : 10;
+            if (!this.pageSizes.includes(effectivePageSize) && this.pageSizes) {
+                effectivePageSize = this.pageSizes[0];
+            }
             this.paginationState = {
                 pageIndex: Math.max(0, this.minPageIndex - 1),
                 pageSize: effectivePageSize,
@@ -3958,11 +4289,9 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         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: '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
+        return (h(Host, { key: '90be657fa9c7f8755391f8d91418399de742ae1f' }, h("div", { key: 'f28596438b7c9c22b34789236c5faa644938d1dc', class: "hidden" }, h("slot", { key: 'fdc1670cc6bafb5f1efa8c63d41acbfd15659de6' })), h("slot", { key: '65afa2282af4842bcb23f8baa592545fe3b74fa3', name: "before" }), this.enableGlobalFilter && this.table && (h("div", { key: '8628a23712471690b6a6239a289dd8263aed423c', class: `search-container justify-${this.globalFilterPosition}` }, h("nv-fieldtext", { key: '42c56dd6ba426e2045c02b3754fae3562632c49f', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "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.flexRender(header.column.columnDef.header, header.getContext())));
+                return this.getHeaderCell(header);
             }))))
             : 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;
@@ -3970,60 +4299,76 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
             return (h("tr", { key: rowId }, visibleCells.map(cell => {
                 return (h("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
             })));
-        })))), 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" })));
+        }))), this.table && this.enableRowSelection ? (h("tfoot", null, h("tr", null, h("td", { colSpan: 20 }, this.enableRowSelection && this.table ? (h("div", null, this.rowSelectionState &&
+            Object.keys(this.rowSelectionState).length > 0 ? (h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), h("slot", { key: 'e1641d8fd103b0802e1df4f0848f0de921260065', name: "after" })));
     }
     get el() { return this; }
     static get watchers() { return {
         "columns": ["parseColumns"],
-        "columnsJson": ["parseJsonColumns"],
         "data": ["parseData"],
-        "dataJson": ["parseJsonData"],
         "parsedColumns": ["handleParsedChange"],
         "parsedData": ["handleParsedChange"],
         "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm"],
-        "paginationState": ["handlePaginationState"]
+        "paginationState": ["handlePaginationState"],
+        "sorting": ["handleSorting"],
+        "pageSize": ["handlePageSize"],
+        "rowSelectionState": ["handleRowSelectionState"]
     }; }
     static get style() { return NvDatagridStyle0; }
 }, [4, "nv-datagrid", {
         "data": [16],
         "columns": [16],
-        "dataJson": [513, "data-json"],
-        "columnsJson": [513, "columns-json"],
         "fallbackValue": [513, "fallback-value"],
         "noDataMessage": [513, "no-data-message"],
         "noColumnsNoDataMessage": [513, "no-columns-no-data-message"],
-        "enableGlobalFilter": [516, "enable-global-filter"],
         "autoGenerateColumns": [516, "auto-generate-columns"],
+        "enableGlobalFilter": [516, "enable-global-filter"],
+        "globalFilterPosition": [513, "global-filter-position"],
         "enablePagination": [516, "enable-pagination"],
         "pageSize": [514, "page-size"],
         "pageSizes": [16],
+        "enableSorting": [516, "enable-sorting"],
+        "enableRowSelection": [516, "enable-row-selection"],
         "table": [32],
         "parsedColumns": [32],
         "parsedData": [32],
         "globalFilterSearchTerm": [32],
         "columnData": [32],
-        "paginationState": [32]
+        "paginationState": [32],
+        "sorting": [32],
+        "rowSelectionState": [32]
     }, undefined, {
         "columns": ["parseColumns"],
-        "columnsJson": ["parseJsonColumns"],
         "data": ["parseData"],
-        "dataJson": ["parseJsonData"],
         "parsedColumns": ["handleParsedChange"],
         "parsedData": ["handleParsedChange"],
         "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm"],
-        "paginationState": ["handlePaginationState"]
+        "paginationState": ["handlePaginationState"],
+        "sorting": ["handleSorting"],
+        "pageSize": ["handlePageSize"],
+        "rowSelectionState": ["handleRowSelectionState"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nv-datagrid"];
+    const components = ["nv-datagrid", "nv-fieldtext", "nv-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "nv-datagrid":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, NvDatagrid$1);
             }
             break;
+        case "nv-fieldtext":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nv-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 defineCustomElement$1();