@nova-design-system/nova-webcomponents 3.0.0-beta.25 → 3.0.0-beta.28

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

@@ -0,0 +1,225 @@
+import { h } from "@stencil/core";
+const NvDatagridDocs = {
+    component: 'nv-datagrid',
+    subcomponents: [
+        'nv-datagridhead',
+        'nv-datagridbody',
+        'nv-datagridrow',
+        'nv-datagridcolumn',
+        'nv-datagriddatacell',
+        'nv-icon',
+        'nv-iconbutton',
+    ],
+    composedComponents: [
+        'nv-datagridhead',
+        'nv-datagridbody',
+        'nv-datagridrow',
+        'nv-datagridcolumn',
+        'nv-datagriddatacell',
+        'nv-icon',
+        'nv-iconbutton',
+    ],
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        {
+            name: 'No Columns No Data Message',
+            args: {
+                noColumnsNoDataMessage: 'Nothing to display.',
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        {
+            name: 'No Data Message',
+            args: {
+                noDataMessage: 'No element available to display.',
+                columnsJson: `[
+          {"header":"Name","accessor":"name"},
+          {"header":"Age","accessor":"age"},
+          {"header":"Email","accessor":"email"}
+        ]`,
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns Array And Empty Data',
+            args: {
+                columns: [
+                    { header: 'Name', accessor: 'name' },
+                    { header: 'Age', accessor: 'age' },
+                    { header: 'Email', accessor: 'email' },
+                ],
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns JSON And Empty Data',
+            args: {
+                columnsJson: `[
+          {"header":"Name","accessor":"name"},
+          {"header":"Age","accessor":"age"},
+          {"header":"Email","accessor":"email"}
+        ]`,
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Data Array And Empty Columns',
+            args: {
+                columns: [
+                    { header: 'Product', accessor: 'product' },
+                    { header: 'Price', accessor: 'price' },
+                    { header: 'Quantity', accessor: 'quantity' },
+                ],
+                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: 'Data JSON And Empty Columns',
+            args: {
+                dataJson: `[
+          { "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: 'Columns Array And Data Array',
+            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: 'Columns JSON And Data JSON',
+            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" }
+        ]`,
+            },
+            template: h("nv-datagrid", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns Decomposed And Empty Data',
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridhead", { slot: "head" }, h("nv-datagridrow", null, h("nv-datagridcolumn", { header: "Name", accessor: "name" }), h("nv-datagridcolumn", { header: "Age", accessor: "age" }), h("nv-datagridcolumn", { header: "Email", accessor: "email" }))))),
+        },
+        {
+            name: 'Columns Decomposed And Data Array',
+            args: {
+                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("nv-datagridhead", { slot: "head" }, h("nv-datagridrow", null, h("nv-datagridcolumn", { header: "Name", accessor: "name" }), h("nv-datagridcolumn", { header: "Age", accessor: "age" }), h("nv-datagridcolumn", { header: "Email", accessor: "email" }))))),
+        },
+        {
+            name: 'Columns Decomposed And Data JSON',
+            args: {
+                dataJson: `[
+          { "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-datagridhead", { slot: "head" }, h("nv-datagridrow", null, h("nv-datagridcolumn", { header: "Name", accessor: "name" }), h("nv-datagridcolumn", { header: "Age", accessor: "age" }), h("nv-datagridcolumn", { header: "Email", accessor: "email" }))))),
+        },
+        {
+            name: 'Data Decomposed And Empty Columns',
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridbody", { slot: "body" }, h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Alice"), h("nv-datagriddatacell", { accessor: "age" }, "25"), h("nv-datagriddatacell", { accessor: "email" }, "alice@mail.com")), h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Bob"), h("nv-datagriddatacell", { accessor: "age" }, "30"), h("nv-datagriddatacell", { accessor: "email" }, "bob@mail.com"))))),
+        },
+        {
+            name: 'Data Decomposed And Columns Array',
+            args: {
+                columns: [
+                    { header: 'Name', accessor: 'name' },
+                    { header: 'Age', accessor: 'age' },
+                    { header: 'Email', accessor: 'email' },
+                ],
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridbody", { slot: "body" }, h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Alice"), h("nv-datagriddatacell", { accessor: "age" }, "25"), h("nv-datagriddatacell", { accessor: "email" }, "alice@mail.com")), h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Bob"), h("nv-datagriddatacell", { accessor: "age" }, "30"), h("nv-datagriddatacell", { accessor: "email" }, "bob@mail.com"))))),
+        },
+        {
+            name: 'Data Decomposed And Columns JSON',
+            args: {
+                columnsJson: `[
+          {"header":"Name","accessor":"name"},
+          {"header":"Age","accessor":"age"},
+          {"header":"Email","accessor":"email"}
+        ]`,
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridbody", { slot: "body" }, h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Alice"), h("nv-datagriddatacell", { accessor: "age" }, "25"), h("nv-datagriddatacell", { accessor: "email" }, "alice@mail.com")), h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Bob"), h("nv-datagriddatacell", { accessor: "age" }, "30"), h("nv-datagriddatacell", { accessor: "email" }, "bob@mail.com"))))),
+        },
+        {
+            name: 'Columns Decomposed And Data Decomposed',
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridhead", { slot: "head" }, h("nv-datagridrow", null, h("nv-datagridcolumn", { header: "Name", accessor: "name" }), h("nv-datagridcolumn", { header: "Age", accessor: "age" }), h("nv-datagridcolumn", { header: "Email", accessor: "email" }))), h("nv-datagridbody", { slot: "body" }, h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Alice"), h("nv-datagriddatacell", { accessor: "age" }, "25"), h("nv-datagriddatacell", { accessor: "email" }, h("nv-icon", { name: "mail" }), h("a", { href: "mailto:alice@mail.com", class: "text-amber-500" }, "alice@mail.com"))), h("nv-datagridrow", null, h("nv-datagriddatacell", { accessor: "name" }, "Bob"), h("nv-datagriddatacell", { accessor: "age" }, "30"), h("nv-datagriddatacell", { accessor: "email" }, h("nv-iconbutton", { name: "mail" }, "bob@mail.com")))))),
+        },
+        {
+            name: 'Slot Before',
+            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" }
+        ]`,
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"))),
+        },
+        {
+            name: 'Slot After',
+            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" }
+        ]`,
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "after" }, "After"))),
+        },
+        {
+            name: 'Slot Before And After',
+            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" }
+        ]`,
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"), h("div", { slot: "after" }, "After"))),
+        },
+    ],
+};
+export default NvDatagridDocs;
+//# sourceMappingURL=nv-datagrid.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-datagrid.docs.js","sourceRoot":"","sources":["../../../src/components/nv-datagrid/nv-datagrid.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvDatagridDocs: NovaDocs<Components.NvDatagrid> = {\n  component: 'nv-datagrid',\n  subcomponents: [\n    'nv-datagridhead',\n    'nv-datagridbody',\n    'nv-datagridrow',\n    'nv-datagridcolumn',\n    'nv-datagriddatacell',\n    'nv-icon',\n    'nv-iconbutton',\n  ],\n  composedComponents: [\n    'nv-datagridhead',\n    'nv-datagridbody',\n    'nv-datagridrow',\n    'nv-datagridcolumn',\n    'nv-datagriddatacell',\n    'nv-icon',\n    'nv-iconbutton',\n  ],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'No Columns No Data Message',\n      args: {\n        noColumnsNoDataMessage: 'Nothing to display.',\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'No Data Message',\n      args: {\n        noDataMessage: 'No element available to display.',\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Array And Empty Data',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns JSON And Empty Data',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Data Array And Empty Columns',\n      args: {\n        columns: [\n          { header: 'Product', accessor: 'product' },\n          { header: 'Price', accessor: 'price' },\n          { header: 'Quantity', accessor: 'quantity' },\n        ],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Data JSON And Empty Columns',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Array And Data Array',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns JSON And Data JSON',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Decomposed And Empty Data',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Array',\n      args: {\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data JSON',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Empty Columns',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns Array',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns JSON',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Decomposed',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                <nv-icon name=\"mail\"></nv-icon>\n                <a href=\"mailto:alice@mail.com\" class=\"text-amber-500\">\n                  alice@mail.com\n                </a>\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                <nv-iconbutton name=\"mail\">bob@mail.com</nv-iconbutton>\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot Before',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"before\">Before</div>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot After',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"after\">After</div>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot Before And After',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"before\">Before</div>\n          <div slot=\"after\">After</div>\n        </nv-datagrid>\n      ),\n    },\n  ],\n};\n\nexport default NvDatagridDocs;\n"]}