@nova-design-system/nova-webcomponents 3.0.0-beta.46 → 3.0.0

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

@@ -21,11 +21,20 @@ const NvDatagridDocs = {
             name: nameof(x => x.noDataMessage),
             args: {
                 noDataMessage: 'No element available to display.',
-                columnsJson: `[
-          {"header":"Name","accessor":"name"},
-          {"header":"Age","accessor":"age"},
-          {"header":"Email","accessor":"email"}
-        ]`,
+                columns: [
+                    {
+                        header: 'Name',
+                        accessor: 'name',
+                    },
+                    {
+                        header: 'Age',
+                        accessor: 'age',
+                    },
+                    {
+                        header: 'Email',
+                        accessor: 'email',
+                    },
+                ],
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
@@ -74,10 +83,20 @@ const NvDatagridDocs = {
         {
             name: nameof(x => x.autoGenerateColumns),
             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" }] }
-        ]`,
+                data: [
+                    {
+                        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,
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
@@ -115,121 +134,569 @@ const NvDatagridDocs = {
         {
             name: 'WithDataAndTemplate',
             args: {
-                dataJson: `[
-        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com"},
-        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com"}
-        ]`,
+                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: 'WithDataAndTemplateComplexData',
             args: {
-                dataJson: `[
-        {"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"}}
-        ]`,
+                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", { 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: {
-                dataJson: `[
-          { "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" }
-        ]`,
+                data: [
+                    {
+                        name: 'Alice',
+                        age: '25',
+                        email: 'alice@mail.com',
+                        address: { city: 'New York', country: 'USA' },
+                    },
+                    {
+                        name: 'Bob',
+                        age: '30',
+                        email: 'bob@mail.com',
+                        address: { city: 'Los Angeles', country: 'USA' },
+                    },
+                    {
+                        name: 'Charlie',
+                        age: '35',
+                        email: 'charlie@mail.com',
+                        address: { city: 'Chicago', country: 'USA' },
+                    },
+                    {
+                        name: 'David',
+                        age: '40',
+                        email: 'david@mail.com',
+                        address: { city: 'Houston', country: 'USA' },
+                    },
+                    {
+                        name: 'Eve',
+                        age: '45',
+                        email: 'eve@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Frank',
+                        age: '50',
+                        email: 'frank@mail.com',
+                        address: { city: 'Seattle', country: 'USA' },
+                    },
+                    {
+                        name: 'Grace',
+                        age: '55',
+                        email: 'grace@mail.com',
+                        address: { city: 'Miami', country: 'USA' },
+                    },
+                    {
+                        name: 'Helen',
+                        age: '60',
+                        email: 'helen@mail.com',
+                        address: { city: 'Atlanta', country: 'USA' },
+                    },
+                    {
+                        name: 'Ivy',
+                        age: '65',
+                        email: 'ivy@mail.com',
+                        address: { city: 'Washington', country: 'USA' },
+                    },
+                    {
+                        name: 'Jack',
+                        age: '70',
+                        email: 'jack@mail.com',
+                        address: { city: 'Boston', country: 'USA' },
+                    },
+                    {
+                        name: 'Kate',
+                        age: '75',
+                        email: 'kate@mail.com',
+                        address: { city: 'San Diego', country: 'USA' },
+                    },
+                    {
+                        name: 'Liam',
+                        age: '80',
+                        email: 'liam@mail.com',
+                        address: { city: 'Philadelphia', country: 'USA' },
+                    },
+                    {
+                        name: 'Mia',
+                        age: '85',
+                        email: 'mia@mail.com',
+                        address: { city: 'Phoenix', country: 'USA' },
+                    },
+                    {
+                        name: 'Noah',
+                        age: '90',
+                        email: 'noah@mail.com',
+                        address: { city: 'San Antonio', country: 'USA' },
+                    },
+                    {
+                        name: 'Olivia',
+                        age: '95',
+                        email: 'olivia@mail.com',
+                        address: { city: 'San Jose', country: 'USA' },
+                    },
+                    {
+                        name: 'Patrick',
+                        age: '5',
+                        email: 'patrick@mail.com',
+                        address: { city: 'Austin', country: 'USA' },
+                    },
+                    {
+                        name: 'Quentin',
+                        age: '10',
+                        email: 'quentin@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Remi',
+                        age: '15',
+                        email: 'remi@mail.com',
+                        address: { city: 'San Diego', country: 'USA' },
+                    },
+                    {
+                        name: 'Samuel',
+                        age: '20',
+                        email: 'samuel@mail.com',
+                        address: { city: 'San Antonio', country: 'USA' },
+                    },
+                    {
+                        name: 'Thomas',
+                        age: '25',
+                        email: 'thomas@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Ulysse',
+                        age: '30',
+                        email: 'ulysse@mail.com',
+                        address: { city: 'Boston', country: 'USA' },
+                    },
+                    {
+                        name: 'Victor',
+                        age: '35',
+                        email: 'victor@mail.com',
+                        address: { city: 'San Diego', country: 'USA' },
+                    },
+                    {
+                        name: 'William',
+                        age: '40',
+                        email: 'william@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Xavier',
+                        age: '45',
+                        email: 'xavier@mail.com',
+                        address: { city: 'San Diego', country: 'USA' },
+                    },
+                    {
+                        name: 'Yann',
+                        age: '50',
+                        email: 'yann@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Zacharie',
+                        age: '55',
+                        email: 'zacharie@mail.com',
+                        address: { city: 'San Diego', country: 'USA' },
+                    },
+                    {
+                        name: 'Zoé',
+                        age: '60',
+                        email: 'zoe@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Ann',
+                        age: '60',
+                        email: 'ann@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Camille',
+                        age: '65',
+                        email: 'camille@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Damien',
+                        age: '70',
+                        email: 'damien@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Emilie',
+                        age: '75',
+                        email: 'emilie@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Florian',
+                        age: '80',
+                        email: 'florian@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Gael',
+                        age: '85',
+                        email: 'gael@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Hugo',
+                        age: '90',
+                        email: 'hugo@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Iris',
+                        age: '95',
+                        email: 'iris@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Jade',
+                        age: '100',
+                        email: 'jade@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Kévin',
+                        age: '105',
+                        email: 'kevin@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Léa',
+                        age: '110',
+                        email: 'lea@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Mathias',
+                        age: '115',
+                        email: 'mathias@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                    {
+                        name: 'Nathan',
+                        age: '120',
+                        email: 'nathan@mail.com',
+                        address: { city: 'San Francisco', country: 'USA' },
+                    },
+                ],
                 enableGlobalFilter: true,
             },
+            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__"))))),
+        },
+        {
+            name: nameof(x => x.enablePagination),
+            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' },
+                ],
+                enablePagination: true,
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.pageSize),
+            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' },
+                ],
+                enablePagination: true,
+                pageSize: 20,
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.pageSizes),
+            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' },
+                ],
+                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,
+                ],
+            },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
             name: 'SlotBefore',
             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: '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"))),
         },
         {
             name: 'SlotAfter',
             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: '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: "after" }, "After"))),
         },
         {
             name: 'SlotBeforeAndAfter',
             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: '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"))),
         },
         {
             name: 'WithDataAndTemplateAndMultipleElements',
             args: {
-                dataJson: `[
-        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com","roles":["Admin","User"]},
-        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com","roles":["User"]}
-        ]`,
+                data: [
+                    {
+                        id: 1,
+                        name: 'John Doe',
+                        age: 25,
+                        email: 'john.doe@mail.com',
+                        roles: ['Admin', 'User'],
+                    },
+                    {
+                        id: 2,
+                        name: 'Jane Doe',
+                        age: 30,
+                        email: 'jane.doe@mail.com',
+                        roles: ['User'],
+                    },
+                ],
             },
             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: 'WithDataAndTemplateAndMultipleComplexElements',
             args: {
-                dataJson: `[
-        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com","roles":[{"id":"1","name":"Admin"},{"id":"2","name":"User"}]},
-        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com","roles":[{"id":"2","name":"User"}]}
-        ]`,
+                data: [
+                    {
+                        id: 1,
+                        name: 'John Doe',
+                        age: 25,
+                        email: 'john.doe@mail.com',
+                        roles: [
+                            { id: '1', name: 'Admin' },
+                            { id: '2', name: 'User' },
+                        ],
+                    },
+                    {
+                        id: 2,
+                        name: 'Jane Doe',
+                        age: 30,
+                        email: 'jane.doe@mail.com',
+                        roles: [{ id: '2', name: 'User' }],
+                    },
+                ],
             },
             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__"))))),
         },
         {
             name: 'WithDataAndTemplateAndMultipleComplexElementsRepeatTemplate',
             args: {
-                dataJson: `[
-        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com","roles":[{"id":"1","name":"Admin"},{"id":"2","name":"User"}]},
-        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com","roles":[{"id":"2","name":"User"}]}
-        ]`,
+                data: [
+                    {
+                        id: 1,
+                        name: 'John Doe',
+                        age: 25,
+                        email: 'john.doe@mail.com',
+                        roles: [
+                            { id: '1', name: 'Admin' },
+                            { id: '2', name: 'User' },
+                        ],
+                    },
+                    {
+                        id: 2,
+                        name: 'Jane Doe',
+                        age: 30,
+                        email: 'jane.doe@mail.com',
+                        roles: [{ id: '2', name: 'User' }],
+                    },
+                ],
             },
             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__" }))))),
         },