@neo4j-ndl/react 4.0.0-alpha.0.608161c → 4.0.0-alpha.0.aeb5d94

package/lib/cjs/data-grid/stories/datagrid-keyboard-navigation.story.js

@@ -0,0 +1,138 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const react_table_1 = require("@tanstack/react-table");
+const react_2 = require("react");
+const staticData_1 = require("./staticData");
+const IndeterminateCheckbox = (_a) => {
+    var { isIndeterminate } = _a, restProps = __rest(_a, ["isIndeterminate"]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Checkbox, Object.assign({ isIndeterminate: isIndeterminate, ariaLabel: "Select all rows" }, restProps)));
+};
+const selectableColumn = {
+    cell: ({ row }) => ((0, jsx_runtime_1.jsx)(react_1.Checkbox, { ariaLabel: `row-${row.index}`, isChecked: row.getIsSelected() || false, onChange: row.getToggleSelectedHandler() })),
+    header: ({ table }) => ((0, jsx_runtime_1.jsx)(IndeterminateCheckbox, { isChecked: table.getIsAllRowsSelected() || false, onChange: table.getToggleAllRowsSelectedHandler(), isIndeterminate: table.getIsSomeRowsSelected() })),
+    id: 'select',
+    maxSize: 80,
+    size: 80,
+};
+const actionsColumn = (tableNav) => ({
+    cell: ({ row }) => {
+        const options = ['Edit', 'Delete', 'View'];
+        const dropdownOptions = options.map((o) => ({ label: o, value: o }));
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [selected, setSelected] = (0, react_2.useState)(dropdownOptions[0]);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { portalTarget } = (0, react_1.useDataGridContext)();
+        return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": `ndl-actions-cell-row-${row.index}`, className: "n-flex n-flex-row n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { tooltip: "Megaphone", onClick: () => {
+                        alert("Let's get loud 📣");
+                    }, htmlAttributes: {
+                        type: 'button',
+                    }, children: (0, jsx_runtime_1.jsx)(icons_1.MegaphoneIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.Select, { ariaLabel: `actions-select-row-${row.index}`, type: "select", selectProps: {
+                        menuPortalTarget: portalTarget,
+                        onChange: (e) => {
+                            if (!e)
+                                return;
+                            setSelected(e);
+                        },
+                        onKeyDown: (e) => {
+                            // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell
+                            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                                e.stopPropagation();
+                            }
+                        },
+                        onMenuClose: () => {
+                            console.info('Start listening to keyboard events for table navigation');
+                            tableNav.enable();
+                        },
+                        onMenuOpen: () => {
+                            console.info('Stop listening to keyboard events for table navigation');
+                            tableNav.disable();
+                        },
+                        options: dropdownOptions,
+                        value: selected,
+                    } })] }));
+    },
+    header: 'actions',
+    id: 'actions',
+});
+const allColumns = (tableNav) => {
+    const columnHelper = (0, react_table_1.createColumnHelper)();
+    const commonColumns = [
+        columnHelper.accessor('name', {
+            cell: (info) => info.getValue(),
+            footer: (info) => info.column.id,
+            header: () => 'Name',
+            maxSize: 300,
+            minSize: 180,
+            size: 220,
+        }),
+        columnHelper.accessor('age', {
+            cell: (info) => info.renderValue(),
+            footer: (info) => info.column.id,
+            header: () => 'Age',
+            minSize: 80,
+        }),
+    ];
+    return [selectableColumn, ...commonColumns, actionsColumn(tableNav)];
+};
+const Component = () => {
+    const [rowSelection, setRowSelection] = (0, react_2.useState)({});
+    const ref = (0, react_2.useRef)(null);
+    const tableNavRef = (0, react_2.useRef)(null);
+    const table = (0, react_table_1.useReactTable)({
+        columnResizeMode: 'onChange',
+        columns: allColumns(tableNavRef.current),
+        data: staticData_1.TABLE_DEMO_DATA,
+        enableSorting: false,
+        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+        getPaginationRowModel: (0, react_table_1.getPaginationRowModel)(),
+        initialState: {
+            pagination: {
+                pageSize: 5,
+            },
+        },
+        onRowSelectionChange: setRowSelection,
+        state: {
+            rowSelection,
+        },
+    });
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: false, isKeyboardNavigable: true, styling: {
+                borderStyle: 'all-sides',
+            }, tableNavRef: tableNavRef, tableInstance: table, ref: ref, portalTarget: document.body }) }));
+};
+exports.default = Component;
+//# sourceMappingURL=datagrid-keyboard-navigation.story.js.map

package/lib/cjs/data-grid/stories/datagrid-keyboard-navigation.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid-keyboard-navigation.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-keyboard-navigation.story.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/data-grid/stories/datagrid-kitchen-sink.story.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const react_table_1 = require("@tanstack/react-table");
+const leva_1 = require("leva");
+const staticData_1 = require("./staticData");
+const columnHelper = (0, react_table_1.createColumnHelper)();
+const ColumnActions = {
+    columnActions: {
+        actions: [
+            {
+                onClick: () => {
+                    alert('Action triggered');
+                },
+                title: 'Example Column Action',
+            },
+        ],
+    },
+};
+const COMMON_COLUMNS = (options) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const columns = [
+        columnHelper.accessor('name', {
+            cell: (info) => info.getValue(),
+            maxSize: 300,
+            minSize: 180,
+            size: 220,
+        }),
+        columnHelper.accessor('age', Object.assign({ cell: (info) => info.getValue(), header: () => (0, jsx_runtime_1.jsx)("div", { children: "Age" }), minSize: 80 }, (options.shouldIncludeRowActionColumn
+            ? {
+                meta: Object.assign({}, ColumnActions),
+            }
+            : {}))),
+        columnHelper.accessor('cypherCommand', {
+            cell: (info) => info.getValue(),
+            minSize: 400,
+            size: 400,
+        }),
+    ];
+    if (options.shouldIncludeRowActionColumn) {
+        columns.push(columnHelper.display({
+            cell: (cell) => {
+                const isSpecialRow = cell.row.original.name === staticData_1.TABLE_DEMO_DATA[3].name || undefined;
+                return ((0, jsx_runtime_1.jsx)(react_1.DataGrid.ActionCell, { cell: cell, innerCleanIconButtonProps: {
+                        children: isSpecialRow && (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconSolid, {}),
+                        tooltip: `Actions for ${cell.row.original.name}`,
+                    }, innerMenuProps: isSpecialRow && {
+                        children: (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Custom icon and menu props" }),
+                    } }));
+            },
+            id: 'actions',
+            meta: {
+                isActionCell: {
+                    actions: [
+                        {
+                            onClick: (_event, cell) => {
+                                alert('Row Action triggered for row with index: ' +
+                                    cell.row.index);
+                            },
+                            title: 'Example Row Action',
+                        },
+                    ],
+                    onOpenChange: (open) => console.info(`onOpenChange: ${open}`),
+                },
+            },
+        }));
+    }
+    return columns;
+};
+const COMMON_TABLE_PROPS = {
+    columnResizeMode: 'onChange',
+    data: staticData_1.TABLE_DEMO_DATA,
+    // https://tanstack.com/table/v8/docs/guide/column-sizing#overview
+    defaultColumn: {
+        minSize: 80,
+    },
+    enableSorting: false,
+    getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+    getPaginationRowModel: (0, react_table_1.getPaginationRowModel)(),
+    initialState: {
+        pagination: {
+            pageSize: 5,
+        },
+    },
+    meta: {
+        actions: [
+            {
+                onClick: () => {
+                    alert('wowowow');
+                },
+                title: "Let's party",
+            },
+        ],
+    },
+};
+const Component = () => {
+    const { keyboard: isKeyboardNavigable, zebraStriping: hasZebraStriping, borderStyle, headerStyle, includeRowActionColumn: shouldIncludeRowActionColumn, } = (0, leva_1.useControls)({
+        borderStyle: {
+            options: ['all-sides', 'horizontal', 'vertical', 'none'],
+            value: 'all-sides',
+        },
+        headerStyle: {
+            options: ['filled', 'clean'],
+            value: 'filled',
+        },
+        includeRowActionColumn: false,
+        keyboard: false,
+        zebraStriping: false,
+    });
+    const table = (0, react_table_1.useReactTable)(Object.assign(Object.assign({}, COMMON_TABLE_PROPS), { columns: COMMON_COLUMNS({
+            shouldIncludeRowActionColumn,
+        }), enableSorting: true, getSortedRowModel: (0, react_table_1.getSortedRowModel)() }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[1000px] n-w-full n-bg-primary-bg-weak n-p-token-32", children: [(0, jsx_runtime_1.jsx)(leva_1.Leva, { isRoot: true }), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: isKeyboardNavigable, styling: {
+                    borderStyle: borderStyle,
+                    hasZebraStriping,
+                    headerStyle: headerStyle,
+                } })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=datagrid-kitchen-sink.story.js.map

package/lib/cjs/data-grid/stories/datagrid-kitchen-sink.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid-kitchen-sink.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-kitchen-sink.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAClD,kDAA8D;AAC9D,uDAS+B;AAC/B,+BAAyC;AAGzC,6CAA+C;AAQ/C,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;AAE1D,MAAM,aAAa,GAAwC;IACzD,aAAa,EAAE;QACb,OAAO,EAAE;YACP;gBACE,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBAC5B,CAAC;gBACD,KAAK,EAAE,uBAAuB;aAC/B;SACF;KACF;CACF,CAAC;AAKF,MAAM,cAAc,GAAG,CAAC,OAA+B,EAAE,EAAE;IACzD,8DAA8D;IAC9D,MAAM,OAAO,GAAqC;QAChD,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,kBACzB,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,kDAAc,EAC5B,OAAO,EAAE,EAAE,IACR,CAAC,OAAO,CAAC,4BAA4B;YACtC,CAAC,CAAC;gBACE,IAAI,oBACC,aAAa,CACjB;aACF;YACH,CAAC,CAAC,EAAE,CAAC,EACP;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,IAAI,OAAO,CAAC,4BAA4B,EAAE,CAAC;QACzC,OAAO,CAAC,IAAI,CACV,YAAY,CAAC,OAAO,CAAC;YACnB,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;gBACb,MAAM,YAAY,GAChB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,KAAK,4BAAe,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC;gBAClE,OAAO,CACL,uBAAC,gBAAQ,CAAC,UAAU,IAClB,IAAI,EAAE,IAAI,EACV,yBAAyB,EAAE;wBACzB,QAAQ,EAAE,YAAY,IAAI,uBAAC,4BAAoB,KAAG;wBAClD,OAAO,EAAE,eAAe,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE;qBACjD,EACD,cAAc,EACZ,YAAY,IAAI;wBACd,QAAQ,EAAE,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,4BAA4B,GAAG;qBAC3D,GAEH,CACH,CAAC;YACJ,CAAC;YACD,EAAE,EAAE,SAAS;YACb,IAAI,EAAE;gBACJ,YAAY,EAAE;oBACZ,OAAO,EAAE;wBACP;4BACE,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;gCACxB,KAAK,CACH,2CAA2C;oCACzC,IAAI,CAAC,GAAG,CAAC,KAAK,CACjB,CAAC;4BACJ,CAAC;4BACD,KAAK,EAAE,oBAAoB;yBAC5B;qBACF;oBACD,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,IAAI,EAAE,CAAC;iBAC9D;aACF;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACzB,gBAAgB,EAAE,UAAU;IAC5B,IAAI,EAAE,4BAAe;IACrB,kEAAkE;IAClE,aAAa,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,aAAa,EAAE,KAAK;IACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;IAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;IAC9C,YAAY,EAAE;QACZ,UAAU,EAAE;YACV,QAAQ,EAAE,CAAC;SACZ;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE;YACP;gBACE,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gBACnB,CAAC;gBACD,KAAK,EAAE,aAAa;aACrB;SACF;KACF;CAC+C,CAAC;AAEnD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EACJ,QAAQ,EAAE,mBAAmB,EAC7B,aAAa,EAAE,gBAAgB,EAC/B,WAAW,EACX,WAAW,EACX,sBAAsB,EAAE,4BAA4B,GACrD,GAAG,IAAA,kBAAW,EAAC;QACd,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC;YACxD,KAAK,EAAE,WAAW;SACnB;QACD,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,KAAK,EAAE,QAAQ;SAChB;QACD,sBAAsB,EAAE,KAAK;QAC7B,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;KACrB,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,IAAA,2BAAa,kCACtB,kBAAkB,KACrB,OAAO,EAAE,cAAc,CAAC;YACtB,4BAA4B;SAC7B,CAAC,EACF,aAAa,EAAE,IAAI,EACnB,iBAAiB,EAAE,IAAA,+BAAiB,GAAE,IACtC,CAAC;IAEH,OAAO,CACL,iCAAK,SAAS,EAAC,yDAAyD,aACtE,uBAAC,WAAI,IAAC,MAAM,SAAG,EACf,uBAAC,gBAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,mBAAmB,EACxC,OAAO,EAAE;oBACP,WAAW,EAAE,WAA0B;oBACvC,gBAAgB;oBAChB,WAAW,EAAE,WAA0B;iBACxC,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/data-grid/stories/datagrid-no-pagination-table.story.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const react_table_1 = require("@tanstack/react-table");
+const staticData_1 = require("./staticData");
+const Component = () => {
+    const columnHelper = (0, react_table_1.createColumnHelper)();
+    const columns = [
+        columnHelper.accessor('name', {
+            cell: (info) => info.getValue(),
+            footer: (info) => info.column.id,
+            header: () => 'Name',
+            maxSize: 300,
+            minSize: 180,
+            size: 220,
+        }),
+        columnHelper.accessor('age', {
+            cell: (info) => info.renderValue(),
+            footer: (info) => info.column.id,
+            header: () => 'Age',
+            minSize: 80,
+        }),
+        columnHelper.accessor('cypherCommand', {
+            cell: (info) => info.getValue(),
+            footer: (info) => info.column.id,
+            header: () => 'Cypher Command',
+            minSize: 400,
+            size: 400,
+        }),
+    ];
+    const table = (0, react_table_1.useReactTable)({
+        columns,
+        data: staticData_1.PRUNED_TABLE_DEMO_DATA,
+        enableSorting: false,
+        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+    });
+    return ((0, jsx_runtime_1.jsx)(react_1.DataGrid, { components: { Navigation: null }, isResizable: false, tableInstance: table }));
+};
+exports.default = Component;
+//# sourceMappingURL=datagrid-no-pagination-table.story.js.map

package/lib/cjs/data-grid/stories/datagrid-no-pagination-table.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid-no-pagination-table.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-no-pagination-table.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAI+B;AAE/B,6CAAsD;AAQtD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,OAAO;QACP,IAAI,EAAE,mCAAsB;QAC5B,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;KACnC,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,gBAAQ,IACP,UAAU,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,EAChC,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,GACpB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/cjs/data-grid/stories/datagrid-percentage-width-columns.story.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const react_table_1 = require("@tanstack/react-table");
+const staticData_1 = require("./staticData");
+const Component = () => {
+    const columnHelper = (0, react_table_1.createColumnHelper)();
+    const columns = [
+        columnHelper.accessor('name', {
+            cell: (info) => info.getValue(),
+            footer: (info) => info.column.id,
+            header: () => 'Name',
+            size: 200, // 200 / 1000 = 20% of the table width
+        }),
+        columnHelper.accessor('age', {
+            cell: (info) => info.renderValue(),
+            footer: (info) => info.column.id,
+            header: () => 'Age',
+            minSize: 100, // 100 / 1000 = 10% of the table width
+        }),
+        columnHelper.accessor('cypherCommand', {
+            cell: (info) => info.getValue(),
+            footer: (info) => info.column.id,
+            header: () => 'Cypher Command',
+            size: 700, // 700 / 1000 = 70% of the table width
+        }),
+    ];
+    const table = (0, react_table_1.useReactTable)({
+        columnResizeMode: 'onChange',
+        columns: columns,
+        data: staticData_1.TABLE_DEMO_DATA.slice(0, 5),
+        debugColumns: true,
+        debugHeaders: true,
+        debugTable: true,
+        enableSorting: false,
+        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+        getSortedRowModel: (0, react_table_1.getSortedRowModel)(),
+    });
+    // Disable resizing of columns and enable automatic resizing of columns, to allow for percentage width columns
+    const isResizable = false;
+    const isAutoResizingColumns = true;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { components: {
+                Navigation: null,
+            }, isAutoResizingColumns: isAutoResizingColumns, isKeyboardNavigable: false, isResizable: isResizable, styling: {
+                borderStyle: 'all-sides',
+                hasHoverEffects: false,
+                hasZebraStriping: false,
+            }, tableInstance: table }) }));
+};
+exports.default = Component;
+//# sourceMappingURL=datagrid-percentage-width-columns.story.js.map

package/lib/cjs/data-grid/stories/datagrid-percentage-width-columns.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid-percentage-width-columns.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-percentage-width-columns.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAK+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,IAAI,EAAE,GAAG,EAAE,sCAAsC;SAClD,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,GAAG,EAAE,sCAAsC;SACrD,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,IAAI,EAAE,GAAG,EAAE,sCAAsC;SAClD,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,4BAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACjC,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;KACvC,CAAC,CAAC;IAEH,8GAA8G;IAC9G,MAAM,WAAW,GAAG,KAAK,CAAC;IAC1B,MAAM,qBAAqB,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,gCAAK,SAAS,EAAC,0CAA0C,YACvD,uBAAC,gBAAQ,IACP,UAAU,EAAE;gBACV,UAAU,EAAE,IAAI;aACjB,EACD,qBAAqB,EAAE,qBAAqB,EAC5C,mBAAmB,EAAE,KAAK,EAC1B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,KAAK;gBACtB,gBAAgB,EAAE,KAAK;aACxB,EACD,aAAa,EAAE,KAAK,GACpB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}