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

package/dist/components/nv-breadcrumb.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-1c45c0f2.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { d as defineCustomElement$3 } from './p-057ae4f2.js';
-import { d as defineCustomElement$2 } from './p-a8b5969f.js';
+import { d as defineCustomElement$3 } from './p-e46c2e31.js';
+import { d as defineCustomElement$2 } from './p-3561c093.js';
 
-const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
+const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
 const NvBreadcrumbStyle0 = nvBreadcrumbCss;
 
 const NvBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NvBreadcrumb extends H {

package/dist/components/nv-breadcrumb.js.map

@@ -1 +1 @@
-{"file":"nv-breadcrumb.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,g1DAAg1D,CAAC;AACz2D,2BAAe,eAAe;;MCUjBA,cAAY;IALzB;;;;;;;;;;QAkBW,SAAI,GAA4B,SAAS,CAAC;KAyEpD;;;;IArDC,gBAAgB;;QAEd,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACrD,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CAAC;SACH;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,SAAS,EACnD,KAAK,EAAE,IAAI,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,IAE/C,IAAI,CAAC,IAAI,KAAK,WAAW,IACxB,cAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,UAAc,KAE3D,eAAa,CACd,EACA,IAAI,CAAC,OAAO,KACX,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAC,KAAK,GACH,CACf,EACA,IAAI,CAAC,IAAI,KAAK,WAAW,KACxB,mEACE,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,IAEnC,2DAAI,IAAI,EAAC,SAAS,IAChB,8DAAa,CACV,CACM,CACd,EACD,2EAAiB,WAAW,QAAS,CAChC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvBreadcrumb"],"sources":["src/components/nv-breadcrumb/nv-breadcrumb.scss?tag=nv-breadcrumb","src/components/nv-breadcrumb/nv-breadcrumb.tsx"],"sourcesContent":["@use \"../../styles/focus-ring\" as utils;\n\n@mixin root-styles() {\n  display: flex;\n  align-items: center;\n  color: var(--components-breadcrumb-text);\n  font-size: var(--font-size-sm);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--line-height-sm);\n}\n\n@mixin link-styles() {\n  display: inline-flex;\n  align-self: center;\n  color: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  text-decoration: none;\n  @include utils.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n  &:hover {\n    text-decoration: underline;\n    color: var(--components-breadcrumb-text-hover);\n  }\n}\n\n@mixin button-styles() {\n  height: 20px;\n  @include utils.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n  &:hover {\n    text-decoration: underline;\n    color: var(--components-breadcrumb-text-hover);\n  }\n}\n\n@mixin separator-styles() {\n  display: inline-flex;\n  padding-left: var(--breadcrumb-padding-y);\n}\n\n@mixin list-styles() {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-1-5);\n  padding: var(--spacing-1);\n\n  a,\n  button {\n    @include link-styles();\n  }\n}\n\nnv-breadcrumb {\n  @include root-styles();\n\n  ul {\n    @include list-styles();\n  }\n  & > a,\n  & > button {\n    @include link-styles();\n  }\n  span[data-scope=\"separator\"] {\n    @include separator-styles();\n  }\n}\n","import { Component, Prop, Host, h, Element, forceUpdate } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @slot default - Pass an icon, a link, or text to render the breadcrumb content.\n */\n@Component({\n  tag: 'nv-breadcrumb',\n  styleUrl: 'nv-breadcrumb.scss',\n  shadow: false,\n})\nexport class NvBreadcrumb {\n  @Element() el: HTMLNvBreadcrumbElement;\n  private popoverTrigger!: Element;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\n   * in a dropdown. Use default for a single item. When passing multiple items\n   * as collapsed, make sure to wrap you links in list tags\n   */\n  @Prop({ reflect: true })\n  readonly type: 'collapsed' | 'default' = 'default';\n\n  /**\n   * Add an optional tooltip to provide extra information about the breadcrumb.\n   */\n  @Prop({ reflect: true })\n  readonly tooltip: string;\n\n  /**\n   * Use this to highlight the breadcrumb as the current page in your\n   * navigation. It also makes the page clearer to screen readers with\n   * aria-current=\"location\".\n   */\n  @Prop({ reflect: true })\n  readonly current: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    // Force a re-render to pass the popoverTrigger ref to the popovers\n    if (this.type === 'collapsed') forceUpdate(this);\n  }\n\n  componentWillLoad() {\n    if (this.type === 'default' && this.tooltip) {\n      this.popoverTrigger = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === null,\n      );\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"listitem\"\n        aria-current={this.current ? 'location' : undefined}\n        class={clsx({ 'visually-hidden': this.current })}\n      >\n        {this.type === 'collapsed' ? (\n          <button ref={el => (this.popoverTrigger = el)}>...</button>\n        ) : (\n          <slot></slot>\n        )}\n        {this.tooltip && (\n          <nv-tooltip\n            message={this.tooltip}\n            triggerElement={this.popoverTrigger}\n            placement=\"top\"\n          ></nv-tooltip>\n        )}\n        {this.type === 'collapsed' && (\n          <nv-popover\n            triggerMode=\"click\"\n            groupName=\"breadcrumbs\"\n            triggerElement={this.popoverTrigger}\n          >\n            <ul slot=\"content\">\n              <slot></slot>\n            </ul>\n          </nv-popover>\n        )}\n        <span data-scope=\"separator\">/</span>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"version":3}
+{"file":"nv-breadcrumb.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,6+DAA6+D,CAAC;AACtgE,2BAAe,eAAe;;MCUjBA,cAAY;IALzB;;;;;;;;;;QAkBW,SAAI,GAA4B,SAAS,CAAC;KAyEpD;;;;IArDC,gBAAgB;;QAEd,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACrD,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CAAC;SACH;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,SAAS,EACnD,KAAK,EAAE,IAAI,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,IAE/C,IAAI,CAAC,IAAI,KAAK,WAAW,IACxB,cAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,UAAc,KAE3D,eAAa,CACd,EACA,IAAI,CAAC,OAAO,KACX,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAC,KAAK,GACH,CACf,EACA,IAAI,CAAC,IAAI,KAAK,WAAW,KACxB,mEACE,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,IAEnC,2DAAI,IAAI,EAAC,SAAS,IAChB,8DAAa,CACV,CACM,CACd,EACD,2EAAiB,WAAW,QAAS,CAChC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvBreadcrumb"],"sources":["src/components/nv-breadcrumb/nv-breadcrumb.scss?tag=nv-breadcrumb","src/components/nv-breadcrumb/nv-breadcrumb.tsx"],"sourcesContent":["@use \"../../styles/focus-ring\" as focus;\n@use \"../../styles/utils\" as utils;\n\n@mixin root-styles() {\n  display: flex;\n  align-items: center;\n  color: var(--components-breadcrumb-text);\n  font-size: var(--font-size-sm);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--line-height-sm);\n}\n\n@mixin link-styles() {\n  display: inline-flex;\n  align-self: center;\n  color: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  text-decoration: none;\n  @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n  &:hover {\n    text-decoration: underline;\n    color: var(--components-breadcrumb-text-hover);\n  }\n}\n\n@mixin button-styles() {\n  height: 20px;\n  @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n  &:hover {\n    text-decoration: underline;\n    color: var(--components-breadcrumb-text-hover);\n  }\n}\n\n@mixin separator-styles() {\n  display: inline-flex;\n  padding-left: var(--breadcrumb-padding-y);\n}\n\n@mixin list-styles() {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-1-5);\n  padding: var(--spacing-1);\n\n  a,\n  button {\n    @include link-styles();\n  }\n}\n\nnv-breadcrumb {\n  @include root-styles();\n\n  &.visually-hidden {\n    @include utils.visually-hidden();\n  }\n\n  ul {\n    @include list-styles();\n  }\n  & > a,\n  & > button {\n    @include link-styles();\n  }\n  span[data-scope=\"separator\"] {\n    @include separator-styles();\n  }\n}\n","import { Component, Prop, Host, h, Element, forceUpdate } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @slot default - Pass an icon, a link, or text to render the breadcrumb content.\n */\n@Component({\n  tag: 'nv-breadcrumb',\n  styleUrl: 'nv-breadcrumb.scss',\n  shadow: false,\n})\nexport class NvBreadcrumb {\n  @Element() el: HTMLNvBreadcrumbElement;\n  private popoverTrigger!: Element;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\n   * in a dropdown. Use default for a single item. When passing multiple items\n   * as collapsed, make sure to wrap you links in list tags\n   */\n  @Prop({ reflect: true })\n  readonly type: 'collapsed' | 'default' = 'default';\n\n  /**\n   * Add an optional tooltip to provide extra information about the breadcrumb.\n   */\n  @Prop({ reflect: true })\n  readonly tooltip: string;\n\n  /**\n   * Use this to highlight the breadcrumb as the current page in your\n   * navigation. It also makes the page clearer to screen readers with\n   * aria-current=\"location\".\n   */\n  @Prop({ reflect: true })\n  readonly current: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    // Force a re-render to pass the popoverTrigger ref to the popovers\n    if (this.type === 'collapsed') forceUpdate(this);\n  }\n\n  componentWillLoad() {\n    if (this.type === 'default' && this.tooltip) {\n      this.popoverTrigger = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === null,\n      );\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"listitem\"\n        aria-current={this.current ? 'location' : undefined}\n        class={clsx({ 'visually-hidden': this.current })}\n      >\n        {this.type === 'collapsed' ? (\n          <button ref={el => (this.popoverTrigger = el)}>...</button>\n        ) : (\n          <slot></slot>\n        )}\n        {this.tooltip && (\n          <nv-tooltip\n            message={this.tooltip}\n            triggerElement={this.popoverTrigger}\n            placement=\"top\"\n          ></nv-tooltip>\n        )}\n        {this.type === 'collapsed' && (\n          <nv-popover\n            triggerMode=\"click\"\n            groupName=\"breadcrumbs\"\n            triggerElement={this.popoverTrigger}\n          >\n            <ul slot=\"content\">\n              <slot></slot>\n            </ul>\n          </nv-popover>\n        )}\n        <span data-scope=\"separator\">/</span>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-button.js

@@ -1,4 +1,4 @@
-import { N as NvButton$1, d as defineCustomElement$1 } from './p-1a4f9c97.js';
+import { N as NvButton$1, d as defineCustomElement$1 } from './p-103756d6.js';
 
 const NvButton = NvButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-calendar.js

@@ -1,4 +1,4 @@
-import { N as NvCalendar$1, d as defineCustomElement$1 } from './p-3aa6f6dc.js';
+import { N as NvCalendar$1, d as defineCustomElement$1 } from './p-78e0e7b0.js';
 
 const NvCalendar = NvCalendar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-datagrid.js

@@ -3160,7 +3160,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-border-header);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-content-header)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-border-body);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-content-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}";
+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 NvDatagridStyle0 = nvDatagridCss;
 
 const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H {
@@ -3219,6 +3219,12 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
          * @default false
          */
         this.enableGlobalFilter = false;
+        /**
+         * Whether to automatically generate columns if none are provided.
+         * If columns are explicitly set, this property is ignored.
+         * @default false
+         */
+        this.autoGenerateColumns = false;
         this.debouncedFilter = debounce((value) => {
             this.globalFilter = value;
         }, 300);
@@ -3291,7 +3297,9 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
                 accessor: key,
                 header: key.charAt(0).toUpperCase() + key.slice(1),
             }));
-            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+            if (this.autoGenerateColumns) {
+                this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+            }
         }
     }
     deepEqual(a, b) {
@@ -3397,6 +3405,25 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
                 tableOptions.columns = this.generateColumns(validColumns, tableOptions);
             }
         }
+        else {
+            // No columns and data is available
+            const hasData = this.parsedData &&
+                Array.isArray(this.parsedData) &&
+                this.parsedData.length > 0;
+            if (hasData) {
+                // No columns and data is available
+                const firstRow = this.parsedData[0];
+                const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
+                    accessor: key,
+                    header: key.charAt(0).toUpperCase() + key.slice(1),
+                }));
+                if (this.autoGenerateColumns) {
+                    this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+                }
+                tableOptions.data = this.getTableData();
+                tableOptions.columns = this.generateColumns(arrayColumnsConfig, tableOptions);
+            }
+        }
         // Initialize the table
         this.table = createTable(tableOptions);
     }
@@ -3636,7 +3663,7 @@ 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: '7868fafcea6564f004d0dfba33202fbc2e333aa7' }, h("div", { key: 'c5ce9501ce02813d6ced36d19d721f7e6d65944a', class: "hidden" }, h("slot", { key: '5b7bb145e6f39b7c33931858a539fb9b74bc5146' })), h("slot", { key: 'd6ac67074eac07627507cbfd613e820894534c5e', name: "before" }), this.enableGlobalFilter && this.table && (h("div", { key: '8266540fb037b05705cfc109116ea4302264c093', class: "search-container" }, h("input", { key: '6833da19558eb0002d41af94a820386847c44c02', type: "text", value: (_d = this.globalFilter) !== null && _d !== void 0 ? _d : '', onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns...", class: "search-input", "aria-label": "Search all columns" }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (h(Host, { key: '6768db58f6a19cbb64e2206957ca27c18c408e46' }, h("div", { key: 'e262922097ae61025e13f8fe685ed7b38063e82c', class: "hidden" }, h("slot", { key: '9025f410bc3e6b409d6225a53a97d13aa3629200' })), h("slot", { key: '684876205d7092a4edf325c8897e97a491b77c6a', name: "before" }), this.enableGlobalFilter && this.table && (h("div", { key: 'b2fe6dd4a97d978617d404134286e6048eb8ddc2', class: "search-container" }, h("input", { key: '82c5d3b73b0bff0c2415ad896a6a4504bb1bb92c', type: "text", value: (_d = this.globalFilter) !== null && _d !== void 0 ? _d : '', onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns...", class: "search-input", "aria-label": "Search all columns" }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", null, this.parsedColumns.length > 0 && headerGroups
             ? 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
@@ -3651,7 +3678,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
                 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: '02165d2c679ed7424f8befdcd26e50031f4f3d84', name: "after" })));
+        }))))), h("slot", { key: '4bda5737d7917a508b97cf38b764000f8c5d368d', name: "after" })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -3673,6 +3700,7 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
         "noDataMessage": [513, "no-data-message"],
         "noColumnsNoDataMessage": [513, "no-columns-no-data-message"],
         "enableGlobalFilter": [516, "enable-global-filter"],
+        "autoGenerateColumns": [516, "auto-generate-columns"],
         "table": [32],
         "parsedColumns": [32],
         "parsedData": [32],