@nova-design-system/nova-webcomponents 3.0.0-beta.27 → 3.0.0-beta.29

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

@@ -0,0 +1,479 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { h, Host } from "@stencil/core";
+import { createTable, getCoreRowModel, createColumnHelper, } from "@tanstack/table-core";
+/**
+ * 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.
+ */
+export class NvDatagrid {
+    constructor() {
+        /****************************************************************************/
+        //#region STATES
+        this.table = null;
+        this.parsedColumns = []; // Parsed array
+        this.parsedData = []; // Parsed array
+        this.hasSlotHead = false;
+        this.hasSlotBody = false;
+        //#endregion STATES
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The columns to display in the data grid.
+         * @example
+         * [
+         *  {"header":"Name","accessor":"name"},
+         *  {"header":"Age","accessor":"age"},
+         *  {"header":"Email","accessor":"email"}
+         * ]
+         * @default []
+         */
+        this.columns = [];
+        /**
+         * The data to display in the data grid.
+         * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
+         * @default []
+         */
+        this.data = [];
+        /**
+         * The message to display when there is no data available.
+         * @default 'No data available'
+         */
+        this.noDataMessage = 'No data available';
+        /**
+         * The message to display when there are no columns or data available.
+         * @default 'No data or columns available to display.'
+         */
+        this.noColumnsNoDataMessage = 'No data or columns available to display.';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region WATCHERS
+    parseColumns(newValue, oldValue) {
+        this.parseColumnsArray(newValue, oldValue);
+    }
+    parseJsonColumns(newValue) {
+        try {
+            const newItems = newValue ? JSON.parse(newValue) : [];
+            this.parseColumnsArray(newItems, this.parsedColumns);
+        }
+        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();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region METHODS
+    initializeTable() {
+        // Clear the previous table instance (if any)
+        this.table = null;
+        // Set default options for the table
+        const tableOptions = {
+            columns: [],
+            data: [],
+            getCoreRowModel: getCoreRowModel(),
+            debugAll: true,
+            onStateChange: state => console.log('Table state changed:', state),
+            renderFallbackValue: 'No rows to display',
+            state: {
+                sorting: [], // Default: no active sorting
+                columnVisibility: {}, // Default: all columns visible
+                columnFilters: [], // Default: no column filters
+                columnPinning: {}, // Default: no column pinning
+                columnSizing: {}, // Default: no column sizing
+                columnOrder: [], // Default: as defined in the `columns`
+                pagination: null, // Default: no pagination
+                grouping: [], // Default: no active grouping
+                expanded: {}, // Default: no expanded rows
+                rowPinning: {}, // Default: no row pinning
+                rowSelection: {}, // Default: no row selection
+                globalFilter: null, // Default: no global filter
+                columnSizingInfo: {
+                    columnSizingStart: null,
+                    deltaOffset: null,
+                    deltaPercentage: null,
+                    isResizingColumn: false,
+                    startOffset: null,
+                    startSize: null,
+                }, // 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 {
+                // No columns and no data
+                return [];
+            }
+        };
+        const setTableData = () => {
+            if (this.parsedData &&
+                Array.isArray(this.parsedData) &&
+                this.parsedData.length > 0) {
+                return [...this.parsedData];
+            }
+            else {
+                return [];
+            }
+        };
+        // 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) {
+            // No columns and no data
+        }
+        else if (hasColumns && !hasData) {
+            tableOptions.columns = generateColumns();
+        }
+        else {
+            // Both columns and data are available
+            // No columns and data is available
+            tableOptions.data = setTableData();
+            tableOptions.columns = generateColumns();
+        }
+        // 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 : [];
+    }
+    /**
+     * 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 : [];
+    }
+    //#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);
+        }
+        else if (this.columns && this.columns.length > 0) {
+            this.parseColumns(this.columns, this.parsedColumns);
+        }
+        if (this.dataJson) {
+            this.parseJsonData(this.dataJson);
+        }
+        else if (this.data && this.data.length > 0) {
+            this.parseData(this.data, this.parsedData);
+        }
+    }
+    componentDidLoad() {
+        this.initializeTable();
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        var _a, _b, _c;
+        const headerGroups = !this.table ||
+            this.table === undefined ||
+            (this.parsedColumns.length === 0 && !this.hasSlotHead)
+            ? []
+            : (_a = this.table) === null || _a === void 0 ? void 0 : _a.getHeaderGroups();
+        const rows = !this.table ||
+            this.table === undefined ||
+            (this.parsedData.length === 0 && !this.hasSlotBody)
+            ? []
+            : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
+        return (h(Host, { key: '7f3244baba5487f57ba32b6f5e68cbb5794efce9' }, h("div", { key: '35cbeed33a37393ee16dbd06a43fd75e8affb0d6', class: "hidden" }, h("slot", { key: '03458f585639fb906e74c3124f74c38fb2d9d96f' }), h("slot", { key: 'e4862ff4ba814bd34c1d39081be83d11e3884b4a', name: "head" }), h("slot", { key: 'd0d77e8d159590531760052d842b4e461c6e0652', name: "body" })), h("slot", { key: '57150feaf6ac865d838e31edeae0af6d92a9dedb', 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 => {
+            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 => {
+                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: '35b4438cfaa83c045d49da21aeb4dc13356242ad', name: "after" })));
+    }
+    static get is() { return "nv-datagrid"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./nv-datagrid.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-datagrid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Column[]",
+                    "resolved": "Column[]",
+                    "references": {
+                        "Column": {
+                            "location": "import",
+                            "path": "../../interfaces/Column",
+                            "id": "src/interfaces/Column.tsx::Column"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "[\n {\"header\":\"Name\",\"accessor\":\"name\"},\n {\"header\":\"Age\",\"accessor\":\"age\"},\n {\"header\":\"Email\",\"accessor\":\"email\"}\n]"
+                        }, {
+                            "name": "default",
+                            "text": "[]"
+                        }],
+                    "text": "The columns to display in the data grid."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "columnsJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "`[{\"header\":\"Name\",\"accessor\":\"name\"},{\"header\":\"Age\",\"accessor\":\"age\"},{\"header\":\"Email\",\"accessor\":\"email\"}]`"
+                        }],
+                    "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "columns-json",
+                "reflect": true
+            },
+            "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": "[]"
+            },
+            "dataJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "`[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]`"
+                        }],
+                    "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "data-json",
+                "reflect": true
+            },
+            "noDataMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'No data available'"
+                        }],
+                    "text": "The message to display when there is no data available."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "no-data-message",
+                "reflect": false,
+                "defaultValue": "'No data available'"
+            },
+            "noColumnsNoDataMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'No data or columns available to display.'"
+                        }],
+                    "text": "The message to display when there are no columns or data available."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "no-columns-no-data-message",
+                "reflect": false,
+                "defaultValue": "'No data or columns available to display.'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "table": {},
+            "parsedColumns": {},
+            "parsedData": {},
+            "hasSlotHead": {},
+            "hasSlotBody": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "parseColumns"
+            }, {
+                "propName": "columnsJson",
+                "methodName": "parseJsonColumns"
+            }, {
+                "propName": "data",
+                "methodName": "parseData"
+            }, {
+                "propName": "dataJson",
+                "methodName": "parseJsonData"
+            }, {
+                "propName": "parsedColumns",
+                "methodName": "handleParsedChange"
+            }, {
+                "propName": "parsedData",
+                "methodName": "handleParsedChange"
+            }];
+    }
+}
+//# sourceMappingURL=nv-datagrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-datagrid.js","sourceRoot":"","sources":["../../../src/components/nv-datagrid/nv-datagrid.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Prop, h, State, Host, Watch, Element } from '@stencil/core';\nimport {\n  createTable,\n  Table,\n  TableOptionsResolved,\n  getCoreRowModel,\n  createColumnHelper,\n} from '@tanstack/table-core';\nimport { Column } from '../../interfaces/Column';\n\n/**\n * A flexible data grid component powered by `@tanstack/table-core`.\n * @slot default - Use this slot to insert HTML into the data grid content.\n * @slot head - Use this slot to insert HTML into the data grid header.\n * @slot before - Use this slot to insert HTML before the data grid.\n * @slot after - Use this slot to insert HTML after the data grid.\n * @slot body - Use this slot to insert HTML into the data grid body.\n */\n@Component({\n  tag: 'nv-datagrid',\n  styleUrl: './nv-datagrid.scss',\n  shadow: false,\n})\nexport class NvDatagrid {\n  @Element() el: HTMLNvDatagridElement;\n\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  private table: Table<any> | null = null;\n\n  @State()\n  parsedColumns: Column[] = []; // Parsed array\n\n  @State()\n  parsedData: any[] = []; // Parsed array\n\n  @State()\n  hasSlotHead: boolean = false;\n\n  @State()\n  hasSlotBody: boolean = false;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The columns to display in the data grid.\n   * @example\n   * [\n   *  {\"header\":\"Name\",\"accessor\":\"name\"},\n   *  {\"header\":\"Age\",\"accessor\":\"age\"},\n   *  {\"header\":\"Email\",\"accessor\":\"email\"}\n   * ]\n   * @default []\n   */\n  @Prop()\n  readonly columns: Column[] = [];\n\n  /**\n   * The columns to display in the data grid.\n   * It 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\"}]`).\n   * If both `columns` and `columnsJson` are provided, `columns` takes precedence.\n   * @example `[{\"header\":\"Name\",\"accessor\":\"name\"},{\"header\":\"Age\",\"accessor\":\"age\"},{\"header\":\"Email\",\"accessor\":\"email\"}]`\n   */\n  @Prop({ reflect: true })\n  readonly columnsJson?: string;\n\n  /**\n   * The data to display in the data grid.\n   * @example [{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]\n   * @default []\n   */\n  @Prop()\n  readonly data: any[] = [];\n\n  /**\n   * The data to display in the data grid.\n   * It 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 }]`).\n   * If both `data` and `dataJson` are provided, `data` takes precedence.\n   * @example `[{ \"name\": \"Alice\", \"age\": 25 }, { \"name\": \"Bob\", \"age\": 30 }]`\n   */\n  @Prop({ reflect: true })\n  readonly dataJson?: string;\n\n  /**\n   * The message to display when there is no data available.\n   * @default 'No data available'\n   */\n  @Prop()\n  readonly noDataMessage: string = 'No data available';\n\n  /**\n   * The message to display when there are no columns or data available.\n   * @default 'No data or columns available to display.'\n   */\n  @Prop()\n  readonly noColumnsNoDataMessage: string =\n    'No data or columns available to display.';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('columns')\n  parseColumns(newValue: Column[], oldValue: Column[]) {\n    this.parseColumnsArray(newValue, oldValue);\n  }\n\n  @Watch('columnsJson')\n  parseJsonColumns(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseColumnsArray(newItems, this.parsedColumns);\n    } catch (e) {\n      console.error('Invalid JSON format for columnsJson:', e.message);\n      this.parsedColumns = [];\n    }\n  }\n\n  @Watch('data')\n  parseData(newValue: any[], oldValue: any[]) {\n    this.parseDataArray(newValue, oldValue);\n  }\n\n  @Watch('dataJson')\n  parseJsonData(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseDataArray(newItems, this.parsedData);\n    } catch (e) {\n      console.error('Invalid JSON format for dataJson:', e.message);\n      this.parsedData = [];\n    }\n  }\n\n  @Watch('parsedColumns')\n  @Watch('parsedData')\n  handleParsedChange() {\n    this.initializeTable();\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private initializeTable(): void {\n    // Clear the previous table instance (if any)\n    this.table = null;\n\n    // Set default options for the table\n    const tableOptions: TableOptionsResolved<any> = {\n      columns: [],\n      data: [],\n      getCoreRowModel: getCoreRowModel(),\n      debugAll: true,\n      onStateChange: state => console.log('Table state changed:', state),\n      renderFallbackValue: 'No rows to display',\n      state: {\n        sorting: [], // Default: no active sorting\n        columnVisibility: {}, // Default: all columns visible\n        columnFilters: [], // Default: no column filters\n        columnPinning: {}, // Default: no column pinning\n        columnSizing: {}, // Default: no column sizing\n        columnOrder: [], // Default: as defined in the `columns`\n        pagination: null, // Default: no pagination\n        grouping: [], // Default: no active grouping\n        expanded: {}, // Default: no expanded rows\n        rowPinning: {}, // Default: no row pinning\n        rowSelection: {}, // Default: no row selection\n        globalFilter: null, // Default: no global filter\n        columnSizingInfo: {\n          columnSizingStart: null,\n          deltaOffset: null,\n          deltaPercentage: null,\n          isResizingColumn: false,\n          startOffset: null,\n          startSize: null,\n        }, // Default: no column sizing info\n      },\n    };\n\n    // Validate and generate column definitions\n    const validColumns = this.parsedColumns.filter(\n      column => column?.accessor && column?.header,\n    );\n\n    // Helper function to generate column definitions\n    const generateColumns = (): any[] => {\n      const columnHelper = createColumnHelper<any>();\n\n      if (validColumns.length > 0) {\n        // Use defined columns\n        return validColumns.map(column =>\n          columnHelper.accessor(column.accessor, {\n            header: column.header,\n            cell: info => info.getValue(),\n          }),\n        );\n      } else if (tableOptions.data && tableOptions.data.length > 0) {\n        // Generate columns from data keys\n        const sampleRow = tableOptions.data[0];\n        return Object.keys(sampleRow).map(key =>\n          columnHelper.accessor(key, {\n            header: key.charAt(0).toUpperCase() + key.slice(1), // Capitalize key for header\n            cell: info => info.getValue(),\n          }),\n        );\n      } else {\n        // No columns and no data\n        return [];\n      }\n    };\n\n    const setTableData = (): any[] => {\n      if (\n        this.parsedData &&\n        Array.isArray(this.parsedData) &&\n        this.parsedData.length > 0\n      ) {\n        return [...this.parsedData];\n      } else {\n        return [];\n      }\n    };\n\n    // Update tableOptions based on parsed data and columns\n    const hasColumns =\n      validColumns && Array.isArray(validColumns) && validColumns.length > 0;\n    const hasData =\n      (this.parsedData &&\n        Array.isArray(this.parsedData) &&\n        this.parsedData.length > 0) ||\n      this.hasSlotBody;\n\n    if (!hasColumns && !hasData) {\n      // No columns and no data\n    } else if (hasColumns && !hasData) {\n      tableOptions.columns = generateColumns();\n    } else {\n      // Both columns and data are available\n      // No columns and data is available\n      tableOptions.data = setTableData();\n      tableOptions.columns = generateColumns();\n    }\n\n    // Initialize the table\n    this.table = createTable(tableOptions);\n  }\n\n  /**\n   * Parses the columns array.\n   * @param {Column[]} newValue - The new value of the columns array.\n   * @param {Column[]} oldValue - The old value of the columns array.\n   */\n  private parseColumnsArray(newValue: Column[], oldValue: Column[]) {\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n    this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n  }\n\n  /**\n   * Parses the data array.\n   * @param {any[]} newValue - The new value of the data array.\n   * @param {any[]} oldValue - The old value of the data array.\n   */\n  private parseDataArray(newValue: any[], oldValue: any[]) {\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n    this.parsedData = Array.isArray(newValue) ? newValue : [];\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n\n    if (this.hasSlotHead) {\n      const headSlot = this.el.querySelector('[slot=\"head\"]');\n      const headSlotRows = this.hasSlotHead\n        ? Array.from(headSlot.querySelectorAll('nv-datagridrow'))\n        : [];\n\n      const mappedRows = headSlotRows.map(row => {\n        const cells = Array.from(row.querySelectorAll('nv-datagridcolumn'));\n\n        return cells.map(cell => ({\n          header: cell.getAttribute('header') || '',\n          accessor: cell.getAttribute('accessor') || '',\n        }));\n      });\n\n      // Flatten the nested arrays into a single array of columns\n      const flatMappedColumns = mappedRows.flat();\n\n      this.parsedColumns = flatMappedColumns;\n    }\n\n    this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n    if (this.hasSlotBody) {\n      const bodySlot = this.el.querySelector('[slot=\"body\"]');\n      const bodySlotRows = this.hasSlotBody\n        ? Array.from(bodySlot.querySelectorAll('nv-datagridrow'))\n        : [];\n\n      const mappedRows = bodySlotRows.map(row => {\n        const cells = Array.from(row.querySelectorAll('nv-datagriddatacell'));\n\n        return cells.map(cell => {\n          return {\n            accessor: cell.accessor,\n            value: cell.innerHTML,\n          };\n        });\n      });\n\n      // Flatten the nested arrays into a single array of data\n      const flatMappedData = mappedRows.map(row =>\n        row.reduce((acc, cell) => {\n          acc[cell.accessor] = cell.value;\n          return acc;\n        }, {}),\n      );\n\n      this.parsedData = flatMappedData;\n    }\n\n    if (this.columnsJson) {\n      this.parseJsonColumns(this.columnsJson);\n    } else if (this.columns && this.columns.length > 0) {\n      this.parseColumns(this.columns, this.parsedColumns);\n    }\n\n    if (this.dataJson) {\n      this.parseJsonData(this.dataJson);\n    } else if (this.data && this.data.length > 0) {\n      this.parseData(this.data, this.parsedData);\n    }\n  }\n\n  componentDidLoad() {\n    this.initializeTable();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const headerGroups =\n      !this.table ||\n      this.table === undefined ||\n      (this.parsedColumns.length === 0 && !this.hasSlotHead)\n        ? []\n        : this.table?.getHeaderGroups();\n\n    const rows =\n      !this.table ||\n      this.table === undefined ||\n      (this.parsedData.length === 0 && !this.hasSlotBody)\n        ? []\n        : this.table?.getRowModel()?.rows;\n\n    return (\n      <Host>\n        <div class=\"hidden\">\n          <slot></slot>\n          <slot name=\"head\"></slot>\n          <slot name=\"body\"></slot>\n        </div>\n\n        <slot name=\"before\"></slot>\n\n        {this.parsedColumns.length === 0 &&\n        this.parsedData.length === 0 &&\n        !this.hasSlotHead &&\n        !this.hasSlotBody ? (\n          <p>{this.noColumnsNoDataMessage}</p>\n        ) : (\n          <table>\n            {this.parsedColumns.length > 0 && headerGroups.length > 0 && (\n              <thead>\n                {this.parsedColumns.length > 0 && headerGroups\n                  ? headerGroups?.map(headerGroup => (\n                      <tr key={headerGroup.id}>\n                        {headerGroup.headers.map(header => (\n                          <th key={header.id}>\n                            {header.isPlaceholder\n                              ? null\n                              : header.column.columnDef.header}\n                          </th>\n                        ))}\n                      </tr>\n                    ))\n                  : null}\n              </thead>\n            )}\n            <tbody>\n              {!rows || rows.length === 0 ? (\n                <tr>\n                  <td colSpan={this.parsedColumns.length || 12}>\n                    {this.noDataMessage}\n                  </td>\n                </tr>\n              ) : (\n                rows.map(row => {\n                  const rowId = row.id;\n                  const visibleCells = row?.getVisibleCells();\n\n                  const cells = visibleCells\n                    ?.map(cell => {\n                      const cellValue = cell.getValue();\n                      return `<td key=\"${cell.id}\" data-row-id=\"${rowId}\">${cellValue}</td>`;\n                    })\n                    .join('');\n\n                  return <tr key={rowId} innerHTML={cells}></tr>;\n                })\n              )}\n            </tbody>\n          </table>\n        )}\n\n        <slot name=\"after\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"]}

package/dist/collection/components/nv-datagridbody/nv-datagridbody.docs.js

@@ -0,0 +1,8 @@
+const NvDatagridbodyDocs = {
+    component: 'nv-datagridbody',
+    subcomponents: ['nv-datagridrow', 'nv-datagriddatacell'],
+    composedComponents: ['nv-datagridrow', 'nv-datagriddatacell'],
+    skip: true,
+};
+export default NvDatagridbodyDocs;
+//# sourceMappingURL=nv-datagridbody.docs.js.map

package/dist/collection/components/nv-datagridbody/nv-datagridbody.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-datagridbody.docs.js","sourceRoot":"","sources":["../../../src/components/nv-datagridbody/nv-datagridbody.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,kBAAkB,GAAwC;IAC9D,SAAS,EAAE,iBAAiB;IAC5B,aAAa,EAAE,CAAC,gBAAgB,EAAE,qBAAqB,CAAC;IACxD,kBAAkB,EAAE,CAAC,gBAAgB,EAAE,qBAAqB,CAAC;IAC7D,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvDatagridbodyDocs: NovaDocs<Components.NvDatagridbody> = {\n  component: 'nv-datagridbody',\n  subcomponents: ['nv-datagridrow', 'nv-datagriddatacell'],\n  composedComponents: ['nv-datagridrow', 'nv-datagriddatacell'],\n  skip: true,\n};\n\nexport default NvDatagridbodyDocs;\n"]}

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

@@ -0,0 +1,23 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot default - Use this slot to insert HTML into the data grid body.
+ */
+export class NvDatagridbody {
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'c24bf0e6d18d00b39b6e0382b0268ee24e6e7567' }, h("tbody", { key: '1fae4b6126134317bd2dc7d4819ed861e8915761' }, h("slot", { key: 'a6a537e6ed6c8b831da5294c1bce7010038b6291' }))));
+    }
+    static get is() { return "nv-datagridbody"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-datagridbody.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-datagridbody.css"]
+        };
+    }
+}
+//# sourceMappingURL=nv-datagridbody.js.map

package/dist/collection/components/nv-datagridbody/nv-datagridbody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-datagridbody.js","sourceRoot":"","sources":["../../../src/components/nv-datagridbody/nv-datagridbody.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,cAAc;IACzB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,8DAAa,CACP,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;CAIF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the data grid body.\n */\n@Component({\n  tag: 'nv-datagridbody',\n  styleUrl: 'nv-datagridbody.scss',\n  shadow: false,\n})\nexport class NvDatagridbody {\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <tbody>\n          <slot></slot>\n        </tbody>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"]}

package/dist/collection/components/nv-datagridcolumn/nv-datagridcolumn.docs.js

@@ -0,0 +1,6 @@
+const NvDatagridcolumnDocs = {
+    component: 'nv-datagridcolumn',
+    skip: true,
+};
+export default NvDatagridcolumnDocs;
+//# sourceMappingURL=nv-datagridcolumn.docs.js.map

package/dist/collection/components/nv-datagridcolumn/nv-datagridcolumn.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-datagridcolumn.docs.js","sourceRoot":"","sources":["../../../src/components/nv-datagridcolumn/nv-datagridcolumn.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,oBAAoB,GAA0C;IAClE,SAAS,EAAE,mBAAmB;IAC9B,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvDatagridcolumnDocs: NovaDocs<Components.NvDatagridcolumn> = {\n  component: 'nv-datagridcolumn',\n  skip: true,\n};\n\nexport default NvDatagridcolumnDocs;\n"]}