@nova-design-system/nova-webcomponents 3.0.0-beta.39 → 3.0.0-beta.41

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

@@ -1,29 +1,34 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { createTable, getCoreRowModel, createColumnHelper, } from "@tanstack/table-core";
+import { deepCopyElement, excludedProps } from "../../utils/dom.utils";
 /**
  * A flexible data grid component powered by `@tanstack/table-core`.
  * @slot default - Use this slot to insert HTML into the data grid content.
- * @slot head - Use this slot to insert HTML into the data grid header.
  * @slot before - Use this slot to insert HTML before the data grid.
  * @slot after - Use this slot to insert HTML after the data grid.
- * @slot body - Use this slot to insert HTML into the data grid body.
  *
  * @deprecated [EXPERIMENTAL]
  * @experimental - This component is still under development and is not ready for use.
  */
 export class NvDatagrid {
     constructor() {
+        this.templateCache = new Map();
+        this.headerTemplateCache = new Map();
         /****************************************************************************/
         //#region STATES
         this.table = null;
         this.parsedColumns = []; // Parsed array
         this.parsedData = []; // Parsed array
-        this.hasSlotHead = false;
-        this.hasSlotBody = false;
         //#endregion STATES
         /****************************************************************************/
         //#region PROPERTIES
+        /**
+         * The data to display in the data grid.
+         * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
+         * @default []
+         */
+        this.data = [];
         /**
          * The columns to display in the data grid.
          * @example
@@ -36,11 +41,10 @@ export class NvDatagrid {
          */
         this.columns = [];
         /**
-         * The data to display in the data grid.
-         * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
-         * @default []
+         * Fallback value to be displayed when data is not available
+         * @default 'N/A'
          */
-        this.data = [];
+        this.fallbackValue = 'N/A';
         /**
          * The message to display when there is no data available.
          * @default 'No data available'
@@ -54,39 +58,94 @@ export class NvDatagrid {
     }
     //#endregion PROPERTIES
     /****************************************************************************/
-    //#region WATCHERS
-    parseColumns(newValue, oldValue) {
-        this.parseColumnsArray(newValue, oldValue);
+    //#region METHODS
+    /**
+     * Caches templates for cells and headers upfront to improve performance.
+     */
+    cacheTemplates() {
+        const columns = Array.from(this.el.querySelectorAll('nv-datagridcolumn'));
+        columns.forEach((col) => {
+            const key = col.accessor;
+            const cellSlot = col.querySelector('[slot="cell"]');
+            if (cellSlot) {
+                const element = deepCopyElement(cellSlot);
+                this.templateCache.set(key, element);
+            }
+            const headerSlot = col.querySelector('[slot="header"]');
+            if (headerSlot) {
+                const element = deepCopyElement(headerSlot);
+                this.headerTemplateCache.set(key, element);
+            }
+            else {
+                const header = col.header;
+                if (header) {
+                    const headerDiv = document.createElement('div');
+                    headerDiv.textContent = header;
+                    this.headerTemplateCache.set(key, headerDiv);
+                }
+            }
+        });
     }
-    parseJsonColumns(newValue) {
-        try {
-            const newItems = newValue ? JSON.parse(newValue) : [];
-            this.parseColumnsArray(newItems, this.parsedColumns);
+    parseDataAndColumns() {
+        if (this.dataJson) {
+            this.parseJsonData(this.dataJson);
         }
-        catch (e) {
-            console.error('Invalid JSON format for columnsJson:', e.message);
-            this.parsedColumns = [];
+        else 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) {
+            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) : '' })));
+            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),
+            }));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
         }
     }
-    parseData(newValue, oldValue) {
-        this.parseDataArray(newValue, oldValue);
+    deepEqual(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
     }
-    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 = [];
+    /**
+     * Parses the data array and sets the state accordingly
+     * @param {any[]} newValue - The new value of the data array.
+     * @param {any[]} oldValue - The old value of the data array.
+     */
+    parseDataArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return; // Deep comparison
         }
+        this.parsedData = Array.isArray(newValue) ? newValue : [];
     }
-    handleParsedChange() {
-        this.initializeTable();
+    /**
+     * Parses the columns array and sets the state accordingly
+     * @param {Column[]} newValue - The new value of the columns array.
+     * @param {Column[]} oldValue - The old value of the columns array.
+     */
+    parseColumnsArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        // Use a proper deep comparison function (e.g., Lodash's isEqual)
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return;
+        }
+        // Assign only after confirming changes
+        this.parsedColumns = safeNewValue;
     }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region METHODS
     initializeTable() {
         // Clear the previous table instance (if any)
         this.table = null;
@@ -121,172 +180,270 @@ export class NvDatagrid {
                 }, // Default: no column sizing info
             },
         };
-        // 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));
-        // Helper function to generate column definitions
-        const generateColumns = () => {
-            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(),
-                }));
-            }
-            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(),
-                }));
-            }
-            else {
+        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));
+            // Update tableOptions based on parsed data and columns
+            const hasColumns = validColumns && Array.isArray(validColumns) && validColumns.length > 0;
+            const hasData = this.parsedData &&
+                Array.isArray(this.parsedData) &&
+                this.parsedData.length > 0;
+            if (!hasColumns && !hasData) {
                 // No columns and no data
-                return [];
             }
-        };
-        const setTableData = () => {
-            if (this.parsedData &&
-                Array.isArray(this.parsedData) &&
-                this.parsedData.length > 0) {
-                return [...this.parsedData];
+            else if (hasColumns && !hasData) {
+                tableOptions.columns = this.generateColumns(validColumns, tableOptions);
             }
             else {
-                return [];
+                // Both columns and data are available
+                // No columns and data is available
+                tableOptions.data = this.getTableData();
+                tableOptions.columns = this.generateColumns(validColumns, tableOptions);
             }
-        };
-        // Update tableOptions based on parsed data and columns
-        const hasColumns = validColumns && Array.isArray(validColumns) && validColumns.length > 0;
-        const hasData = (this.parsedData &&
-            Array.isArray(this.parsedData) &&
-            this.parsedData.length > 0) ||
-            this.hasSlotBody;
-        if (!hasColumns && !hasData) {
+        }
+        // Initialize the table
+        this.table = createTable(tableOptions);
+    }
+    // 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(),
+            }));
+        }
+        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(),
+            }));
+        }
+        else {
             // No columns and no data
+            return [];
         }
-        else if (hasColumns && !hasData) {
-            tableOptions.columns = generateColumns();
+    }
+    getTableData() {
+        if (this.parsedData &&
+            Array.isArray(this.parsedData) &&
+            this.parsedData.length > 0) {
+            return [...this.parsedData];
         }
         else {
-            // Both columns and data are available
-            // No columns and data is available
-            tableOptions.data = setTableData();
-            tableOptions.columns = generateColumns();
+            return [];
         }
-        // Initialize the table
-        this.table = createTable(tableOptions);
     }
-    /**
-     * Parses the columns array.
-     * @param {Column[]} newValue - The new value of the columns array.
-     * @param {Column[]} oldValue - The old value of the columns array.
-     */
-    parseColumnsArray(newValue, oldValue) {
-        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
-            return; // Deep comparison
-        this.parsedColumns = Array.isArray(newValue) ? newValue : [];
+    renderTemplate(template, cellValue, row) {
+        if (!template) {
+            return null;
+        }
+        // Handle <template> elements correctly
+        const templateContent = template instanceof HTMLTemplateElement ? template.content : template;
+        const element = deepCopyElement(templateContent);
+        // Replace placeholders in text content, attributes, and properties
+        element.querySelectorAll('*').forEach(el => {
+            // Replace placeholders in text content
+            this.replacePlaceholdersTextContent(el, cellValue);
+            // Replace placeholders in attributes
+            this.replacePlaceholdersAttributes(el, cellValue);
+            // Replace placeholders in properties
+            this.replacePlaceholdersProperties(el, cellValue);
+        });
+        // Handle `data-bind-event`
+        element.querySelectorAll('[data-bind-event]').forEach(el => {
+            const bindEvent = el.getAttribute('data-bind-event') || '';
+            const splitted = bindEvent.split(':');
+            if (!bindEvent.includes(':') || splitted.length < 2) {
+                console.warn('Invalid data-bind-event format:', bindEvent);
+                return;
+            }
+            const eventType = splitted[0];
+            const keyAction = splitted[1];
+            const details = splitted.length > 2 ? splitted[2] : null;
+            el.addEventListener(eventType, () => {
+                var _a;
+                const keys = (_a = details === null || details === void 0 ? void 0 : details.split(',')) !== null && _a !== void 0 ? _a : [];
+                // Convert keys into a single object instead of an array of objects
+                const keyValue = keys.reduce((acc, key) => {
+                    var _a;
+                    if (row === null || row === void 0 ? void 0 : row.original) {
+                        if (key in row.original) {
+                            acc[key] = (_a = row.original) === null || _a === void 0 ? void 0 : _a[key];
+                        }
+                    }
+                    return acc;
+                }, {});
+                const action = { keyAction, details: keyValue };
+                this.action.emit(action);
+            });
+        });
+        // Ensure Web Components are properly connected
+        setTimeout(() => {
+            element.querySelectorAll('*').forEach(child => {
+                if (typeof child.connectedCallback === 'function') {
+                    child.connectedCallback();
+                }
+            });
+        }, 0);
+        return (h("div", { ref: el => {
+                if (el) {
+                    el.innerHTML = ''; // Remove existing content
+                    el.appendChild(element); // Append new element
+                }
+            } }));
     }
-    /**
-     * Parses the data array.
-     * @param {any[]} newValue - The new value of the data array.
-     * @param {any[]} oldValue - The old value of the data array.
-     */
-    parseDataArray(newValue, oldValue) {
-        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
-            return; // Deep comparison
-        this.parsedData = Array.isArray(newValue) ? newValue : [];
+    replaceKeyWithValue(key, cellValue) {
+        var _a;
+        // Handle undefined or null values by returning the fallback
+        if (cellValue === undefined || cellValue === null) {
+            return this.fallbackValue;
+        }
+        // If cellValue is an object, attempt to retrieve the value
+        if (typeof cellValue === 'object') {
+            // Handle nested key paths (e.g., "user.name")
+            if (key.includes('.')) {
+                const resolvedValue = key.split('.').reduce((acc, keyPart) => {
+                    if (acc && acc[keyPart] !== undefined) {
+                        return acc[keyPart];
+                    }
+                    else {
+                        return undefined;
+                    }
+                }, cellValue);
+                if (resolvedValue !== undefined) {
+                    return String(resolvedValue);
+                }
+                else {
+                    const firstLevelKey = key.split('.')[0];
+                    const rest = key.substring(firstLevelKey.length + 1);
+                    const response = this.replaceKeyWithValue(rest, cellValue);
+                    if (response !== this.fallbackValue) {
+                        return response;
+                    }
+                }
+            }
+            // Handle single-level key lookup
+            return key in cellValue ? String(cellValue[key]) : 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));
+            }
+        });
+    }
+    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));
+            }
+        });
+    }
+    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 {
+                    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
     /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        this.hasSlotHead = !!this.el.querySelector('[slot="head"]');
-        if (this.hasSlotHead) {
-            const headSlot = this.el.querySelector('[slot="head"]');
-            const headSlotRows = this.hasSlotHead
-                ? Array.from(headSlot.querySelectorAll('nv-datagridrow'))
-                : [];
-            const mappedRows = headSlotRows.map(row => {
-                const cells = Array.from(row.querySelectorAll('nv-datagridcolumn'));
-                return cells.map(cell => ({
-                    header: cell.getAttribute('header') || '',
-                    accessor: cell.getAttribute('accessor') || '',
-                }));
-            });
-            // Flatten the nested arrays into a single array of columns
-            const flatMappedColumns = mappedRows.flat();
-            this.parsedColumns = flatMappedColumns;
-        }
-        this.hasSlotBody = !!this.el.querySelector('[slot="body"]');
-        if (this.hasSlotBody) {
-            const bodySlot = this.el.querySelector('[slot="body"]');
-            const bodySlotRows = this.hasSlotBody
-                ? Array.from(bodySlot.querySelectorAll('nv-datagridrow'))
-                : [];
-            const mappedRows = bodySlotRows.map(row => {
-                const cells = Array.from(row.querySelectorAll('nv-datagriddatacell'));
-                return cells.map(cell => {
-                    return {
-                        accessor: cell.accessor,
-                        value: cell.innerHTML,
-                    };
-                });
-            });
-            // Flatten the nested arrays into a single array of data
-            const flatMappedData = mappedRows.map(row => row.reduce((acc, cell) => {
-                acc[cell.accessor] = cell.value;
-                return acc;
-            }, {}));
-            this.parsedData = flatMappedData;
-        }
-        if (this.columnsJson) {
-            this.parseJsonColumns(this.columnsJson);
+    //#region WATCHERS
+    parseColumns(newValue, oldValue = []) {
+        this.parseColumnsArray(newValue, oldValue);
+    }
+    parseJsonColumns(newValue, oldValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseColumnsArray(newItems, oldValue);
         }
-        else if (this.columns && this.columns.length > 0) {
-            this.parseColumns(this.columns, this.parsedColumns);
+        catch (e) {
+            console.error('Invalid JSON format for columnsJson:', e.message);
+            this.parsedColumns = [];
         }
-        if (this.dataJson) {
-            this.parseJsonData(this.dataJson);
+    }
+    parseData(newValue, oldValue = []) {
+        this.parseDataArray(newValue, oldValue);
+    }
+    parseJsonData(newValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseDataArray(newItems, this.parsedData);
         }
-        else if (this.data && this.data.length > 0) {
-            this.parseData(this.data, this.parsedData);
+        catch (e) {
+            console.error('Invalid JSON format for dataJson:', e.message);
+            this.parsedData = [];
         }
     }
-    componentDidLoad() {
+    handleParsedChange() {
         this.initializeTable();
     }
-    //#endregion LIFECYCLE
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.cacheTemplates();
+        this.parseDataAndColumns();
+    }
+    //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
         var _a, _b, _c;
-        const headerGroups = !this.table ||
-            this.table === undefined ||
-            (this.parsedColumns.length === 0 && !this.hasSlotHead)
+        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 && !this.hasSlotBody)
+        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: '805687f552a530cac492f16da4858c242f822761' }, h("div", { key: '11b8431c85062307803bf60b942a8cf6b3edbe78', class: "hidden" }, h("slot", { key: '62c100b7f84bfaac9ecdaf94ea8babde114d2adf' }), h("slot", { key: 'b1e0b9f472304c6eceb8c1df9129a051a3d6f132', name: "head" }), h("slot", { key: '7fda39320d01a98055b53b64c554fe657988efd1', name: "body" })), h("slot", { key: 'c681fbdfd0a9c91add3c1e45fe476d878380c93e', name: "before" }), this.parsedColumns.length === 0 &&
-            this.parsedData.length === 0 &&
-            !this.hasSlotHead &&
-            !this.hasSlotBody ? (h("p", null, this.noColumnsNoDataMessage)) : (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 => (h("th", { key: header.id }, header.isPlaceholder
-                ? null
-                : header.column.columnDef.header))))))
-            : null)), h("tbody", null, !rows || rows.length === 0 ? (h("tr", null, h("td", { colSpan: this.parsedColumns.length || 12 }, this.noDataMessage))) : (rows.map(row => {
+        return (h(Host, { key: '03dc8123cf740c6b5eeb59f10443a2ec1b279f28' }, h("div", { key: '263fef353246dba3adb0a44b4e80ff5a4c2e97eb', class: "hidden" }, h("slot", { key: '3d2f02044ad8e09fb010cb0486f63b48e1048acf' })), h("slot", { key: 'e5b458c755eb6887d1fdb959b8883f4d48c5b2f9', name: "before" }), 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
+            ? 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));
+            }))))
+            : 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();
-            const cells = visibleCells === null || visibleCells === void 0 ? void 0 : visibleCells.map(cell => {
+            return (h("tr", { key: rowId }, visibleCells.map(cell => {
+                const cellAccessors = cell.column.id;
                 const cellValue = cell.getValue();
-                return `<td key="${cell.id}" data-row-id="${rowId}">${cellValue}</td>`;
-            }).join('');
-            return h("tr", { key: rowId, innerHTML: cells });
-        }))))), h("slot", { key: '58df089ceaabef8b2e7e139322e47be986cce063', name: "after" })));
+                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)));
+            })));
+        }))))), h("slot", { key: 'e80f9b8a5dbda4c05b719a99c173e2f106449668', name: "after" })));
     }
     static get is() { return "nv-datagrid"; }
     static get originalStyleUrls() {
@@ -301,6 +458,30 @@ export class NvDatagrid {
     }
     static get properties() {
         return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]"
+                        }, {
+                            "name": "default",
+                            "text": "[]"
+                        }],
+                    "text": "The data to display in the data grid."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
             "columns": {
                 "type": "unknown",
                 "mutable": false,
@@ -331,7 +512,7 @@ export class NvDatagrid {
                 "setter": false,
                 "defaultValue": "[]"
             },
-            "columnsJson": {
+            "dataJson": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -344,40 +525,38 @@ export class NvDatagrid {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "`[{\"header\":\"Name\",\"accessor\":\"name\"},{\"header\":\"Age\",\"accessor\":\"age\"},{\"header\":\"Email\",\"accessor\":\"email\"}]`"
+                            "text": "`[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]`"
                         }],
-                    "text": "The columns to display in the data grid.\nIt can be passed directly as an array of objects or as a JSON string\n(e.g., `[{\"header\":\"Name\",\"accessor\":\"name\"},{\"header\":\"Age\",\"accessor\":\"age\"},{\"header\":\"Email\",\"accessor\":\"email\"}]`).\nIf both `columns` and `columnsJson` are provided, `columns` takes precedence."
+                    "text": "The data to display in the data grid.\nIt can be passed directly as an array of objects or as a JSON string.\nIf both `data` and `dataJson` are provided, `data` takes precedence."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "columns-json",
+                "attribute": "data-json",
                 "reflect": true
             },
-            "data": {
-                "type": "unknown",
+            "columnsJson": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any[]",
-                    "resolved": "any[]",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]"
-                        }, {
-                            "name": "default",
-                            "text": "[]"
+                            "text": "`[{\"header\":\"Name\",\"accessor\":\"name\"},{\"header\":\"Age\",\"accessor\":\"age\"},{\"header\":\"Email\",\"accessor\":\"email\"}]`"
                         }],
-                    "text": "The data to display in the data grid."
+                    "text": "The columns to display in the data grid.\nIt can be passed directly as an array of objects or as a JSON string.\nIf both `columns` and `columnsJson` are provided, `columns` takes precedence."
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[]"
+                "attribute": "columns-json",
+                "reflect": true
             },
-            "dataJson": {
+            "fallbackValue": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -386,18 +565,19 @@ export class NvDatagrid {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "example",
-                            "text": "`[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]`"
+                            "name": "default",
+                            "text": "'N/A'"
                         }],
-                    "text": "The data to display in the data grid.\nIt can be passed directly as an array of objects or as a JSON string\n(e.g., `[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]`).\nIf both `data` and `dataJson` are provided, `data` takes precedence."
+                    "text": "Fallback value to be displayed when data is not available"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "data-json",
-                "reflect": true
+                "attribute": "fallback-value",
+                "reflect": true,
+                "defaultValue": "'N/A'"
             },
             "noDataMessage": {
                 "type": "string",
@@ -419,7 +599,7 @@ export class NvDatagrid {
                 "getter": false,
                 "setter": false,
                 "attribute": "no-data-message",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'No data available'"
             },
             "noColumnsNoDataMessage": {
@@ -442,7 +622,7 @@ export class NvDatagrid {
                 "getter": false,
                 "setter": false,
                 "attribute": "no-columns-no-data-message",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'No data or columns available to display.'"
             }
         };
@@ -451,11 +631,33 @@ export class NvDatagrid {
         return {
             "table": {},
             "parsedColumns": {},
-            "parsedData": {},
-            "hasSlotHead": {},
-            "hasSlotBody": {}
+            "parsedData": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "action",
+                "name": "action",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "*************************************************************************"
+                },
+                "complexType": {
+                    "original": "ActionEvent",
+                    "resolved": "ActionEvent",
+                    "references": {
+                        "ActionEvent": {
+                            "location": "import",
+                            "path": "../../interfaces/actionEvent",
+                            "id": "src/interfaces/actionEvent.tsx::ActionEvent"
+                        }
+                    }
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{