@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

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

@@ -6,10 +6,12 @@ const NvDatagridDocs = {
     subcomponents: ['nv-datagridcolumn', 'nv-iconbutton', 'nv-badge'],
     composedComponents: ['nv-datagridcolumn'],
     stories: [
+        // Default
         {
             name: 'Default',
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // noColumnsNoDataMessage
         {
             name: nameof(x => x.noColumnsNoDataMessage),
             args: {
@@ -17,6 +19,7 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // noDataMessage
         {
             name: nameof(x => x.noDataMessage),
             args: {
@@ -29,33 +32,7 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
-        {
-            name: nameof(x => x.columns),
-            args: {
-                columns: [
-                    { header: 'Name', accessor: 'name' },
-                    { header: 'Age', accessor: 'age' },
-                    { header: 'Email', accessor: 'email' },
-                ],
-            },
-            template: h("nv-datagrid", { "data-storybook-args": true }),
-        },
-        {
-            name: 'ColumnGroup',
-            args: {
-                columns: [
-                    { header: 'FirstName', accessor: 'firstName', group: 'Name' },
-                    { header: 'LastName', accessor: 'lastName', group: 'Name' },
-                    { header: 'Age', accessor: 'age' },
-                    { header: 'Email', accessor: 'email' },
-                    { header: 'Street', accessor: 'street', group: 'Address' },
-                    { header: 'StreetNr', accessor: 'streetNr', group: 'Address' },
-                    { header: 'ZipCode', accessor: 'zipCode', group: 'Address' },
-                    { header: 'City', accessor: 'city', group: 'Address' },
-                ],
-            },
-            template: h("nv-datagrid", { "data-storybook-args": true }),
-        },
+        // data
         {
             name: nameof(x => x.data),
             args: {
@@ -66,6 +43,7 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // autoGenerateColumns
         {
             name: nameof(x => x.autoGenerateColumns),
             args: {
@@ -85,23 +63,9 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // columns
         {
-            name: 'ColumnsAndData',
-            args: {
-                columns: [
-                    { header: 'Name', accessor: 'name' },
-                    { header: 'Age', accessor: 'age' },
-                    { header: 'Email', accessor: 'email' },
-                ],
-                data: [
-                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
-                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
-                ],
-            },
-            template: h("nv-datagrid", { "data-storybook-args": true }),
-        },
-        {
-            name: 'ColumnGroupAndData',
+            name: nameof(x => x.columns),
             args: {
                 columns: [
                     { header: 'FirstName', accessor: 'firstName', group: 'Name' },
@@ -113,155 +77,10 @@ const NvDatagridDocs = {
                     { header: 'ZipCode', accessor: 'zipCode', group: 'Address' },
                     { header: 'City', accessor: 'city', group: 'Address' },
                 ],
-                data: [
-                    {
-                        firstName: 'Alice',
-                        lastName: 'Dupont',
-                        age: '25',
-                        email: 'alice@mail.com',
-                        street: 'SomeStreet',
-                        streetNr: '1',
-                        zipCode: '1000',
-                        city: 'Bruxelles',
-                    },
-                    {
-                        firstName: 'Bob',
-                        lastName: 'Debouwer',
-                        age: '30',
-                        email: 'bob@mail.com',
-                        street: 'AnyStreet',
-                        streetNr: '203',
-                        zipCode: '1000',
-                        city: 'Bruxelles',
-                    },
-                ],
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
-        {
-            name: 'WithDataAndTemplate',
-            args: {
-                data: [
-                    { id: 1, name: 'John Doe', age: 25, email: 'john.doe@mail.com' },
-                    { id: 2, name: 'Jane Doe', age: 30, email: 'jane.doe@mail.com' },
-                ],
-            },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
-        },
-        {
-            name: 'WithDataAndTemplateAndColumnGroup',
-            args: {
-                data: [
-                    {
-                        id: 1,
-                        firstName: 'Alice',
-                        lastName: 'Dupont',
-                        age: '25',
-                        email: 'alice@mail.com',
-                        street: 'SomeStreet',
-                        streetNr: '1',
-                        zipCode: '1000',
-                        city: 'Bruxelles',
-                    },
-                    {
-                        id: 2,
-                        firstName: 'Bob',
-                        lastName: 'Debouwer',
-                        age: '30',
-                        email: 'bob@mail.com',
-                        street: 'AnyStreet',
-                        streetNr: '203',
-                        zipCode: '1000',
-                        city: 'Bruxelles',
-                    },
-                ],
-            },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "firstName", header: "FirstName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "FirstName")), h("div", { slot: "cell" }, h("strong", null, "__firstName__"))), h("nv-datagridcolumn", { accessor: "lastName", header: "LastName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "LastName")), h("div", { slot: "cell" }, h("strong", null, "__lastName__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "street", header: "Street", group: "Address" }), h("nv-datagridcolumn", { accessor: "streetNr", header: "Street Number", group: "Address" }), h("nv-datagridcolumn", { accessor: "zipCode", header: "Zip Code", group: "Address" }), h("nv-datagridcolumn", { accessor: "city", header: "City", group: "Address" }), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
-        },
-        {
-            name: 'WithDataAndTemplateComplexData',
-            args: {
-                data: [
-                    {
-                        id: 1,
-                        name: 'John Doe',
-                        age: 25,
-                        email: 'john.doe@mail.com',
-                        address: { city: 'New York', country: 'USA' },
-                        status: { label: 'success', color: '1', icon: 'check' },
-                    },
-                    {
-                        id: 2,
-                        name: 'Jane Doe',
-                        age: 30,
-                        email: 'jane.doe@mail.com',
-                        address: { city: 'Los Angeles', country: 'USA' },
-                        status: { label: 'warning', color: '2', icon: 'alert-circle' },
-                    },
-                    {
-                        id: 3,
-                        name: 'John Smith',
-                        age: 35,
-                        email: 'john.smith@mail.com',
-                        address: { city: 'London', country: 'UK' },
-                        status: { label: 'error', color: '3', icon: 'loader' },
-                    },
-                    {
-                        id: 4,
-                        name: 'Jane Smith',
-                        age: 40,
-                        email: 'jane.smith@mail.com',
-                        address: { city: 'Paris', country: 'France' },
-                        status: { label: 'info', color: '5', icon: 'info-circle' },
-                    },
-                ],
-            },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { "data-class": "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__", "lead-icon": "__status.icon__" }, "__status.label__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
-        },
-        {
-            name: 'WithDataAndTemplateComplexDataAndColumnGroup',
-            args: {
-                data: [
-                    {
-                        id: 1,
-                        firstName: 'John',
-                        lastName: 'Doe',
-                        age: 25,
-                        email: 'john.doe@mail.com',
-                        address: { city: 'New York', country: 'USA' },
-                        status: { label: 'success', color: '1', icon: 'check' },
-                    },
-                    {
-                        id: 2,
-                        firstName: 'Jane',
-                        lastName: 'Doe',
-                        age: 30,
-                        email: 'jane.doe@mail.com',
-                        address: { city: 'Los Angeles', country: 'USA' },
-                        status: { label: 'warning', color: '2', icon: 'alert-circle' },
-                    },
-                    {
-                        id: 3,
-                        firstName: 'John',
-                        lastName: 'Smith',
-                        age: 35,
-                        email: 'john.smith@mail.com',
-                        address: { city: 'London', country: 'UK' },
-                        status: { label: 'error', color: '3', icon: 'loader' },
-                    },
-                    {
-                        id: 4,
-                        firstName: 'Jane',
-                        lastName: 'Smith',
-                        age: 40,
-                        email: 'jane.smith@mail.com',
-                        address: { city: 'Paris', country: 'France' },
-                        status: { label: 'info', color: '5', icon: 'info-circle' },
-                    },
-                ],
-            },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "firstName", header: "FirstName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "FirstName")), h("div", { slot: "cell" }, h("strong", null, "__firstName__"))), h("nv-datagridcolumn", { accessor: "lastName", header: "LastName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "LastName")), h("div", { slot: "cell" }, h("strong", null, "__lastName__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address", group: "Contact" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address", group: "Contact" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { "data-class": "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__", "lead-icon": "__status.icon__" }, "__status.label__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
-        },
+        // enableGlobalFilter
         {
             name: nameof(x => x.enableGlobalFilter),
             args: {
@@ -511,6 +330,7 @@ const NvDatagridDocs = {
             },
             template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }), h("nv-datagridcolumn", { accessor: "age", header: "Age" }), h("nv-datagridcolumn", { accessor: "email", header: "Email" }), h("nv-datagridcolumn", { accessor: "address", header: "Address" }, h("div", { slot: "cell" }, h("span", null, "__address.city__"), h("span", null, "__address.country__"))))),
         },
+        // enablePagination
         {
             name: nameof(x => x.enablePagination),
             args: {
@@ -560,6 +380,7 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // pageSize
         {
             name: nameof(x => x.pageSize),
             args: {
@@ -610,6 +431,7 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // pageSizes
         {
             name: nameof(x => x.pageSizes),
             args: {
@@ -663,6 +485,7 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // enableSorting
         {
             name: nameof(x => x.enableSorting),
             args: {
@@ -713,6 +536,7 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // enableRowSelection
         {
             name: nameof(x => x.enableRowSelection),
             args: {
@@ -764,51 +588,248 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // fallbackValue
         {
-            name: 'SlotBefore',
+            name: nameof(x => x.fallbackValue),
             args: {
+                fallbackValue: 'N/A',
                 columns: [
-                    { header: 'Name', accessor: 'name', group: '' },
-                    { header: 'Age', accessor: 'age', group: '' },
-                    { header: 'Email', accessor: 'email', group: '' },
+                    { header: 'Name', accessor: 'name' },
+                    { header: 'Age', accessor: 'age' },
+                    { header: 'Status', accessor: 'status' },
+                ],
+                data: [
+                    { name: 'Alice', age: '25', status: 'N/A' },
+                    { name: 'Bob', age: 'N/A', status: 'Active' },
                 ],
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        // globalFilterPosition
+        {
+            name: nameof(x => x.globalFilterPosition),
+            args: {
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },
                     { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                    { name: 'Charlie', age: '35', email: 'charlie@mail.com' },
                 ],
+                enableGlobalFilter: true,
+                globalFilterPosition: 'start',
+                autoGenerateColumns: true,
             },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"))),
+            template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // state
         {
-            name: 'SlotAfter',
+            name: nameof(x => x.state),
             args: {
-                columns: [
-                    { header: 'Name', accessor: 'name', group: '' },
-                    { header: 'Age', accessor: 'age', group: '' },
-                    { header: 'Email', accessor: 'email', group: '' },
-                ],
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },
                     { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                    { name: 'Charlie', age: '35', email: 'charlie@mail.com' },
+                    { name: 'David', age: '40', email: 'david@mail.com' },
+                    { name: 'Eve', age: '45', email: 'eve@mail.com' },
                 ],
+                enablePagination: true,
+                enableSorting: true,
+                enableGlobalFilter: true,
+                autoGenerateColumns: true,
+                state: {
+                    globalFilterSearchTerm: '',
+                    paginationState: {
+                        pageIndex: 0,
+                        pageSize: 10,
+                    },
+                    sortingState: [{ id: 'name', desc: false }],
+                },
             },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "after" }, "After"))),
+            template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // ColumnsAndData
         {
-            name: 'SlotBeforeAndAfter',
+            name: 'ColumnsAndData',
             args: {
                 columns: [
-                    { header: 'Name', accessor: 'name', group: '' },
-                    { header: 'Age', accessor: 'age', group: '' },
-                    { header: 'Email', accessor: 'email', group: '' },
+                    { header: 'Name', accessor: 'name' },
+                    { header: 'Age', accessor: 'age' },
+                    { header: 'Email', accessor: 'email' },
                 ],
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },
                     { name: 'Bob', age: '30', email: 'bob@mail.com' },
                 ],
             },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"), h("div", { slot: "after" }, "After"))),
+            template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        // ColumnGroupAndData
+        {
+            name: 'ColumnGroupAndData',
+            args: {
+                columns: [
+                    { header: 'FirstName', accessor: 'firstName', group: 'Name' },
+                    { header: 'LastName', accessor: 'lastName', group: 'Name' },
+                    { header: 'Age', accessor: 'age' },
+                    { header: 'Email', accessor: 'email' },
+                    { header: 'Street', accessor: 'street', group: 'Address' },
+                    { header: 'StreetNr', accessor: 'streetNr', group: 'Address' },
+                    { header: 'ZipCode', accessor: 'zipCode', group: 'Address' },
+                    { header: 'City', accessor: 'city', group: 'Address' },
+                ],
+                data: [
+                    {
+                        firstName: 'Alice',
+                        lastName: 'Dupont',
+                        age: '25',
+                        email: 'alice@mail.com',
+                        street: 'SomeStreet',
+                        streetNr: '1',
+                        zipCode: '1000',
+                        city: 'Bruxelles',
+                    },
+                    {
+                        firstName: 'Bob',
+                        lastName: 'Debouwer',
+                        age: '30',
+                        email: 'bob@mail.com',
+                        street: 'AnyStreet',
+                        streetNr: '203',
+                        zipCode: '1000',
+                        city: 'Bruxelles',
+                    },
+                ],
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        // WithDataAndTemplate
+        {
+            name: 'WithDataAndTemplate',
+            args: {
+                data: [
+                    { id: 1, name: 'John Doe', age: 25, email: 'john.doe@mail.com' },
+                    { id: 2, name: 'Jane Doe', age: 30, email: 'jane.doe@mail.com' },
+                ],
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
+        },
+        // WithDataAndTemplateAndColumnGroup
+        {
+            name: 'WithDataAndTemplateAndColumnGroup',
+            args: {
+                data: [
+                    {
+                        id: 1,
+                        firstName: 'Alice',
+                        lastName: 'Dupont',
+                        age: '25',
+                        email: 'alice@mail.com',
+                        street: 'SomeStreet',
+                        streetNr: '1',
+                        zipCode: '1000',
+                        city: 'Bruxelles',
+                    },
+                    {
+                        id: 2,
+                        firstName: 'Bob',
+                        lastName: 'Debouwer',
+                        age: '30',
+                        email: 'bob@mail.com',
+                        street: 'AnyStreet',
+                        streetNr: '203',
+                        zipCode: '1000',
+                        city: 'Bruxelles',
+                    },
+                ],
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "firstName", header: "FirstName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "FirstName")), h("div", { slot: "cell" }, h("strong", null, "__firstName__"))), h("nv-datagridcolumn", { accessor: "lastName", header: "LastName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "LastName")), h("div", { slot: "cell" }, h("strong", null, "__lastName__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "street", header: "Street", group: "Address" }), h("nv-datagridcolumn", { accessor: "streetNr", header: "Street Number", group: "Address" }), h("nv-datagridcolumn", { accessor: "zipCode", header: "Zip Code", group: "Address" }), h("nv-datagridcolumn", { accessor: "city", header: "City", group: "Address" }), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
+        },
+        // WithDataAndTemplateComplexData
+        {
+            name: 'WithDataAndTemplateComplexData',
+            args: {
+                data: [
+                    {
+                        id: 1,
+                        name: 'John Doe',
+                        age: 25,
+                        email: 'john.doe@mail.com',
+                        address: { city: 'New York', country: 'USA' },
+                        status: { label: 'success', color: '1', icon: 'check' },
+                    },
+                    {
+                        id: 2,
+                        name: 'Jane Doe',
+                        age: 30,
+                        email: 'jane.doe@mail.com',
+                        address: { city: 'Los Angeles', country: 'USA' },
+                        status: { label: 'warning', color: '2', icon: 'alert-circle' },
+                    },
+                    {
+                        id: 3,
+                        name: 'John Smith',
+                        age: 35,
+                        email: 'john.smith@mail.com',
+                        address: { city: 'London', country: 'UK' },
+                        status: { label: 'error', color: '3', icon: 'loader' },
+                    },
+                    {
+                        id: 4,
+                        name: 'Jane Smith',
+                        age: 40,
+                        email: 'jane.smith@mail.com',
+                        address: { city: 'Paris', country: 'France' },
+                        status: { label: 'info', color: '5', icon: 'info-circle' },
+                    },
+                ],
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { "data-class": "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__", "lead-icon": "__status.icon__" }, "__status.label__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
+        },
+        // WithDataAndTemplateComplexDataAndColumnGroup
+        {
+            name: 'WithDataAndTemplateComplexDataAndColumnGroup',
+            args: {
+                data: [
+                    {
+                        id: 1,
+                        firstName: 'John',
+                        lastName: 'Doe',
+                        age: 25,
+                        email: 'john.doe@mail.com',
+                        address: { city: 'New York', country: 'USA' },
+                        status: { label: 'success', color: '1', icon: 'check' },
+                    },
+                    {
+                        id: 2,
+                        firstName: 'Jane',
+                        lastName: 'Doe',
+                        age: 30,
+                        email: 'jane.doe@mail.com',
+                        address: { city: 'Los Angeles', country: 'USA' },
+                        status: { label: 'warning', color: '2', icon: 'alert-circle' },
+                    },
+                    {
+                        id: 3,
+                        firstName: 'John',
+                        lastName: 'Smith',
+                        age: 35,
+                        email: 'john.smith@mail.com',
+                        address: { city: 'London', country: 'UK' },
+                        status: { label: 'error', color: '3', icon: 'loader' },
+                    },
+                    {
+                        id: 4,
+                        firstName: 'Jane',
+                        lastName: 'Smith',
+                        age: 40,
+                        email: 'jane.smith@mail.com',
+                        address: { city: 'Paris', country: 'France' },
+                        status: { label: 'info', color: '5', icon: 'info-circle' },
+                    },
+                ],
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "firstName", header: "FirstName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "FirstName")), h("div", { slot: "cell" }, h("strong", null, "__firstName__"))), h("nv-datagridcolumn", { accessor: "lastName", header: "LastName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "LastName")), h("div", { slot: "cell" }, h("strong", null, "__lastName__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address", group: "Contact" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address", group: "Contact" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { "data-class": "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__", "lead-icon": "__status.icon__" }, "__status.label__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
+        },
+        // WithDataAndTemplateAndMultipleElements
         {
             name: 'WithDataAndTemplateAndMultipleElements',
             args: {
@@ -831,6 +852,7 @@ const NvDatagridDocs = {
             },
             template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "roles", header: "Role(s)" }, h("div", { slot: "cell" }, h("span", null, "__roles__"))))),
         },
+        // WithDataAndTemplateAndMultipleComplexElements
         {
             name: 'WithDataAndTemplateAndMultipleComplexElements',
             args: {
@@ -856,6 +878,7 @@ const NvDatagridDocs = {
             },
             template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "roles", header: "Role(s)" }, h("div", { slot: "cell" }, h("span", null, "__roles.name__"))))),
         },
+        // WithDataAndTemplateAndMultipleComplexElementsRepeatTemplate
         {
             name: 'WithDataAndTemplateAndMultipleComplexElementsRepeatTemplate',
             args: {
@@ -881,91 +904,72 @@ const NvDatagridDocs = {
             },
             template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "roles", header: "Role(s)", "repeat-template": true }, h("div", { slot: "cell" }, h("nv-badge", { label: "__roles.name__" }))))),
         },
+        // SlotDefault
         {
-            name: 'StateBinding',
-            description: 'Demonstrates the state binding functionality of the datagrid component, showing how to maintain grid state (pagination, sorting, filtering) across component re-renders.',
+            name: 'SlotDefault',
+            description: 'Use this slot to insert HTML into the data grid content.',
             args: {
+                columns: [
+                    { header: 'Name', accessor: 'name', group: '' },
+                    { header: 'Age', accessor: 'age', group: '' },
+                    { header: 'Email', accessor: 'email', group: '' },
+                ],
                 data: [
-                    {
-                        id: 1,
-                        name: 'Alice',
-                        age: 25,
-                        email: 'alice@mail.com',
-                        role: 'Admin',
-                    },
-                    { id: 2, name: 'Bob', age: 30, email: 'bob@mail.com', role: 'User' },
-                    {
-                        id: 3,
-                        name: 'Charlie',
-                        age: 35,
-                        email: 'charlie@mail.com',
-                        role: 'User',
-                    },
-                    {
-                        id: 4,
-                        name: 'David',
-                        age: 40,
-                        email: 'david@mail.com',
-                        role: 'Admin',
-                    },
-                    { id: 5, name: 'Eve', age: 45, email: 'eve@mail.com', role: 'User' },
-                    {
-                        id: 6,
-                        name: 'Frank',
-                        age: 50,
-                        email: 'frank@mail.com',
-                        role: 'Guest',
-                    },
-                    {
-                        id: 7,
-                        name: 'Grace',
-                        age: 55,
-                        email: 'grace@mail.com',
-                        role: 'Admin',
-                    },
-                    {
-                        id: 8,
-                        name: 'Helen',
-                        age: 60,
-                        email: 'helen@mail.com',
-                        role: 'User',
-                    },
-                    { id: 9, name: 'Ivy', age: 65, email: 'ivy@mail.com', role: 'Guest' },
-                    {
-                        id: 10,
-                        name: 'Jack',
-                        age: 70,
-                        email: 'jack@mail.com',
-                        role: 'User',
-                    },
-                    {
-                        id: 11,
-                        name: 'Kate',
-                        age: 75,
-                        email: 'kate@mail.com',
-                        role: 'Admin',
-                    },
-                    {
-                        id: 12,
-                        name: 'Liam',
-                        age: 80,
-                        email: 'liam@mail.com',
-                        role: 'User',
-                    },
+                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
+                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                ],
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }), h("nv-datagridcolumn", { accessor: "age", header: "Age" }), h("nv-datagridcolumn", { accessor: "email", header: "Email" }))),
+        },
+        // SlotBefore
+        {
+            name: 'SlotBefore',
+            description: 'Use this slot to insert HTML before the data grid.',
+            args: {
+                columns: [
+                    { header: 'Name', accessor: 'name', group: '' },
+                    { header: 'Age', accessor: 'age', group: '' },
+                    { header: 'Email', accessor: 'email', group: '' },
+                ],
+                data: [
+                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
+                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
                 ],
-                enablePagination: true,
-                enableSorting: true,
-                enableGlobalFilter: true,
-                state: {
-                    globalFilterSearchTerm: '',
-                    paginationState: {
-                        pageIndex: 1,
-                        pageSize: 10,
-                    },
-                    sortingState: [{ id: 'name', desc: false }],
-                },
             },
-            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Email" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "role", header: "Role" }, h("div", { slot: "cell" }, h("nv-badge", { color: "2", label: "__role__" }))))),
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"))),
+        },
+        // SlotAfter
+        {
+            name: 'SlotAfter',
+            description: 'Use this slot to insert HTML after the data grid.',
+            args: {
+                columns: [
+                    { header: 'Name', accessor: 'name', group: '' },
+                    { header: 'Age', accessor: 'age', group: '' },
+                    { header: 'Email', accessor: 'email', group: '' },
+                ],
+                data: [
+                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
+                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                ],
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "after" }, "After"))),
+        },
+        // SlotBeforeAndAfter
+        {
+            name: 'SlotBeforeAndAfter',
+            args: {
+                columns: [
+                    { header: 'Name', accessor: 'name', group: '' },
+                    { header: 'Age', accessor: 'age', group: '' },
+                    { header: 'Email', accessor: 'email', group: '' },
+                ],
+                data: [
+                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
+                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                ],
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"), h("div", { slot: "after" }, "After"))),
         },
     ],
 };