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

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

@@ -22,18 +22,9 @@ const NvDatagridDocs = {
             args: {
                 noDataMessage: 'No element available to display.',
                 columns: [
-                    {
-                        header: 'Name',
-                        accessor: 'name',
-                    },
-                    {
-                        header: 'Age',
-                        accessor: 'age',
-                    },
-                    {
-                        header: 'Email',
-                        accessor: 'email',
-                    },
+                    { header: 'Name', accessor: 'name' },
+                    { header: 'Age', accessor: 'age' },
+                    { header: 'Email', accessor: 'email' },
                 ],
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
@@ -50,13 +41,18 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: nameof(x => x.columnsJson),
+            name: 'ColumnGroup',
             args: {
-                columnsJson: `[
-          {"header":"Name","accessor":"name"},
-          {"header":"Age","accessor":"age"},
-          {"header":"Email","accessor":"email"}
-        ]`,
+                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 }),
         },
@@ -70,16 +66,6 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
-        {
-            name: nameof(x => x.dataJson),
-            args: {
-                dataJson: `[
-          { "name": "Alice", "age": "25", "email": "alice@mail.com", "roles": [{ "id": "1", "name": "Admin" }] },
-          { "name": "Bob", "age": "30", "email": "bob@mail.com", "roles": [{ "id": "2", "name": "User" }] }
-        ]`,
-            },
-            template: h("nv-datagrid", { "data-storybook-args": true }),
-        },
         {
             name: nameof(x => x.autoGenerateColumns),
             args: {
@@ -88,13 +74,11 @@ const NvDatagridDocs = {
                         name: 'Alice',
                         age: '25',
                         email: 'alice@mail.com',
-                        roles: [{ id: '1', name: 'Admin' }],
                     },
                     {
                         name: 'Bob',
                         age: '30',
                         email: 'bob@mail.com',
-                        roles: [{ id: '2', name: 'User' }],
                     },
                 ],
                 autoGenerateColumns: true,
@@ -102,7 +86,7 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'ColumnsArrayAndDataArray',
+            name: 'ColumnsAndData',
             args: {
                 columns: [
                     { header: 'Name', accessor: 'name' },
@@ -117,17 +101,40 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'ColumnsJSONAndDataJSON',
+            name: 'ColumnGroupAndData',
             args: {
-                columnsJson: `[
-          {"header":"Name","accessor":"name"},
-          {"header":"Age","accessor":"age"},
-          {"header":"Email","accessor":"email"}
-        ]`,
-                dataJson: `[
-          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
-          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
-        ]`,
+                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 }),
         },
@@ -141,6 +148,36 @@ 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: "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: {
@@ -181,6 +218,50 @@ 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: "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", { 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", { 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: nameof(x => x.enableGlobalFilter),
             args: {
@@ -575,7 +656,6 @@ const NvDatagridDocs = {
                     { name: 'Nathan', age: '120', email: 'nathan@mail.com' },
                 ],
                 enablePagination: true,
-                pageSize: 5,
                 pageSizes: [
                     5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
                     95, 100,
@@ -583,13 +663,114 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
+        {
+            name: nameof(x => x.enableSorting),
+            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' },
+                    { name: 'David', age: '40', email: 'david@mail.com' },
+                    { name: 'Eve', age: '45', email: 'eve@mail.com' },
+                    { name: 'Frank', age: '50', email: 'frank@mail.com' },
+                    { name: 'Grace', age: '55', email: 'grace@mail.com' },
+                    { name: 'Helen', age: '60', email: 'helen@mail.com' },
+                    { name: 'Ivy', age: '65', email: 'ivy@mail.com' },
+                    { name: 'Jack', age: '70', email: 'jack@mail.com' },
+                    { name: 'Kate', age: '75', email: 'kate@mail.com' },
+                    { name: 'Liam', age: '80', email: 'liam@mail.com' },
+                    { name: 'Mia', age: '85', email: 'mia@mail.com' },
+                    { name: 'Noah', age: '90', email: 'noah@mail.com' },
+                    { name: 'Olivia', age: '95', email: 'olivia@mail.com' },
+                    { name: 'Patrick', age: '5', email: 'patrick@mail.com' },
+                    { name: 'Quentin', age: '10', email: 'quentin@mail.com' },
+                    { name: 'Remi', age: '15', email: 'remi@mail.com' },
+                    { name: 'Samuel', age: '20', email: 'samuel@mail.com' },
+                    { name: 'Thomas', age: '25', email: 'thomas@mail.com' },
+                    { name: 'Ulysse', age: '30', email: 'ulysse@mail.com' },
+                    { name: 'Victor', age: '35', email: 'victor@mail.com' },
+                    { name: 'William', age: '40', email: 'william@mail.com' },
+                    { name: 'Xavier', age: '45', email: 'xavier@mail.com' },
+                    { name: 'Yann', age: '50', email: 'yann@mail.com' },
+                    { name: 'Zacharie', age: '55', email: 'zacharie@mail.com' },
+                    { name: 'Zoé', age: '60', email: 'zoe@mail.com' },
+                    { name: 'Ann', age: '60', email: 'ann@mail.com' },
+                    { name: 'Camille', age: '65', email: 'camille@mail.com' },
+                    { name: 'Damien', age: '70', email: 'damien@mail.com' },
+                    { name: 'Emilie', age: '75', email: 'emilie@mail.com' },
+                    { name: 'Florian', age: '80', email: 'florian@mail.com' },
+                    { name: 'Gael', age: '85', email: 'gael@mail.com' },
+                    { name: 'Hugo', age: '90', email: 'hugo@mail.com' },
+                    { name: 'Iris', age: '95', email: 'iris@mail.com' },
+                    { name: 'Jade', age: '100', email: 'jade@mail.com' },
+                    { name: 'Kévin', age: '105', email: 'kevin@mail.com' },
+                    { name: 'Léa', age: '110', email: 'lea@mail.com' },
+                    { name: 'Mathias', age: '115', email: 'mathias@mail.com' },
+                    { name: 'Nathan', age: '120', email: 'nathan@mail.com' },
+                ],
+                enableSorting: true,
+                autoGenerateColumns: true,
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.enableRowSelection),
+            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' },
+                    { name: 'David', age: '40', email: 'david@mail.com' },
+                    { name: 'Eve', age: '45', email: 'eve@mail.com' },
+                    { name: 'Frank', age: '50', email: 'frank@mail.com' },
+                    { name: 'Grace', age: '55', email: 'grace@mail.com' },
+                    { name: 'Helen', age: '60', email: 'helen@mail.com' },
+                    { name: 'Ivy', age: '65', email: 'ivy@mail.com' },
+                    { name: 'Jack', age: '70', email: 'jack@mail.com' },
+                    { name: 'Kate', age: '75', email: 'kate@mail.com' },
+                    { name: 'Liam', age: '80', email: 'liam@mail.com' },
+                    { name: 'Mia', age: '85', email: 'mia@mail.com' },
+                    { name: 'Noah', age: '90', email: 'noah@mail.com' },
+                    { name: 'Olivia', age: '95', email: 'olivia@mail.com' },
+                    { name: 'Patrick', age: '5', email: 'patrick@mail.com' },
+                    { name: 'Quentin', age: '10', email: 'quentin@mail.com' },
+                    { name: 'Remi', age: '15', email: 'remi@mail.com' },
+                    { name: 'Samuel', age: '20', email: 'samuel@mail.com' },
+                    { name: 'Thomas', age: '25', email: 'thomas@mail.com' },
+                    { name: 'Ulysse', age: '30', email: 'ulysse@mail.com' },
+                    { name: 'Victor', age: '35', email: 'victor@mail.com' },
+                    { name: 'William', age: '40', email: 'william@mail.com' },
+                    { name: 'Xavier', age: '45', email: 'xavier@mail.com' },
+                    { name: 'Yann', age: '50', email: 'yann@mail.com' },
+                    { name: 'Zacharie', age: '55', email: 'zacharie@mail.com' },
+                    { name: 'Zoé', age: '60', email: 'zoe@mail.com' },
+                    { name: 'Ann', age: '60', email: 'ann@mail.com' },
+                    { name: 'Camille', age: '65', email: 'camille@mail.com' },
+                    { name: 'Damien', age: '70', email: 'damien@mail.com' },
+                    { name: 'Emilie', age: '75', email: 'emilie@mail.com' },
+                    { name: 'Florian', age: '80', email: 'florian@mail.com' },
+                    { name: 'Gael', age: '85', email: 'gael@mail.com' },
+                    { name: 'Hugo', age: '90', email: 'hugo@mail.com' },
+                    { name: 'Iris', age: '95', email: 'iris@mail.com' },
+                    { name: 'Jade', age: '100', email: 'jade@mail.com' },
+                    { name: 'Kévin', age: '105', email: 'kevin@mail.com' },
+                    { name: 'Léa', age: '110', email: 'lea@mail.com' },
+                    { name: 'Mathias', age: '115', email: 'mathias@mail.com' },
+                    { name: 'Nathan', age: '120', email: 'nathan@mail.com' },
+                ],
+                enableRowSelection: true,
+                enablePagination: true,
+                autoGenerateColumns: true,
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
         {
             name: 'SlotBefore',
             args: {
                 columns: [
-                    { header: 'Name', accessor: 'name' },
-                    { header: 'Age', accessor: 'age' },
-                    { header: 'Email', accessor: 'email' },
+                    { header: 'Name', accessor: 'name', group: '' },
+                    { header: 'Age', accessor: 'age', group: '' },
+                    { header: 'Email', accessor: 'email', group: '' },
                 ],
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },
@@ -602,9 +783,9 @@ const NvDatagridDocs = {
             name: 'SlotAfter',
             args: {
                 columns: [
-                    { header: 'Name', accessor: 'name' },
-                    { header: 'Age', accessor: 'age' },
-                    { header: 'Email', accessor: 'email' },
+                    { header: 'Name', accessor: 'name', group: '' },
+                    { header: 'Age', accessor: 'age', group: '' },
+                    { header: 'Email', accessor: 'email', group: '' },
                 ],
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },
@@ -617,9 +798,9 @@ const NvDatagridDocs = {
             name: 'SlotBeforeAndAfter',
             args: {
                 columns: [
-                    { header: 'Name', accessor: 'name' },
-                    { header: 'Age', accessor: 'age' },
-                    { header: 'Email', accessor: 'email' },
+                    { header: 'Name', accessor: 'name', group: '' },
+                    { header: 'Age', accessor: 'age', group: '' },
+                    { header: 'Email', accessor: 'email', group: '' },
                 ],
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },