@oneblink/apps-react 8.14.0 → 9.0.0-beta.10

package/dist/components/formStore/table/useFormStoreTable.js

@@ -1,18 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { useFlexLayout, useResizeColumns, useTable, } from 'react-table';
+import { localisationService } from '../../../apps';
+import { useReactTable, getCoreRowModel, } from '@tanstack/react-table';
 import { format } from 'date-fns';
 import generateColumns from './generateColumns';
 import ActionedByTableCell from './ActionedByTableCell';
 import TableCellCopyButton from './TableCellCopyButton';
-import { localisationService } from '@oneblink/apps';
 import { FormStoreElementsContext } from '../OneBlinkFormStoreProvider';
 import getVersionedFormTableState from './getVersionedState';
 const defaultColumn = {
-    minWidth: 150,
-    width: 225,
+    minSize: 150,
+    size: 225,
 };
 const localStorageKey = (formId) => `REACT_TABLE_STATE_FORM_STORE_${formId}`;
 export default function useFormStoreTable({ form, formStoreRecords, parameters, onChangeParameters, onRefresh, submissionIdValidationMessage, }) {
+    var _a;
     // Resets parameters on form change
     React.useEffect(() => {
         onChangeParameters((currentParameters) => ({
@@ -40,249 +42,251 @@ export default function useFormStoreTable({ form, formStoreRecords, parameters,
             initialColumns: [
                 {
                     id: 'COMPLETED_AT',
-                    headerText: 'Completion Date Time',
-                    sorting: {
-                        property: 'dateTimeCompleted',
-                        direction: (_b = (_a = parameters.sorting) === null || _a === void 0 ? void 0 : _a.find(({ property }) => property === 'dateTimeCompleted')) === null || _b === void 0 ? void 0 : _b.direction,
-                    },
-                    filter: {
-                        type: 'DATETIME',
-                        value: (_c = parameters.filters) === null || _c === void 0 ? void 0 : _c.dateTimeCompleted,
-                        onChange: (newValue) => {
-                            onChangeParameters((currentParameters) => ({
-                                ...currentParameters,
-                                filters: {
-                                    ...currentParameters.filters,
-                                    dateTimeCompleted: newValue,
-                                },
-                            }), false);
+                    header: 'Completion Date Time',
+                    meta: {
+                        sorting: {
+                            property: 'dateTimeCompleted',
+                            direction: (_b = (_a = parameters.sorting) === null || _a === void 0 ? void 0 : _a.find(({ property }) => property === 'dateTimeCompleted')) === null || _b === void 0 ? void 0 : _b.direction,
+                        },
+                        filter: {
+                            type: 'DATETIME',
+                            value: (_c = parameters.filters) === null || _c === void 0 ? void 0 : _c.dateTimeCompleted,
+                            onChange: (newValue) => {
+                                onChangeParameters((currentParameters) => ({
+                                    ...currentParameters,
+                                    filters: {
+                                        ...currentParameters.filters,
+                                        dateTimeCompleted: newValue,
+                                    },
+                                }), false);
+                            },
                         },
                     },
-                    Cell: ({ row: { original: formStoreRecord }, }) => {
+                    cell: ({ row: { original: formStoreRecord } }) => {
                         if (!formStoreRecord.dateTimeCompleted) {
                             return null;
                         }
                         const text = format(new Date(formStoreRecord.dateTimeCompleted), localisationService.getDateFnsFormats().longDateTime);
-                        return (React.createElement(React.Fragment, null,
-                            text,
-                            React.createElement(TableCellCopyButton, { text: text })));
+                        return (_jsxs(_Fragment, { children: [text, _jsx(TableCellCopyButton, { text: text })] }));
                     },
                 },
                 {
                     id: 'SUBMITTED_AT',
-                    headerText: 'Submission Date Time',
-                    sorting: {
-                        property: 'dateTimeSubmitted',
-                        direction: (_e = (_d = parameters.sorting) === null || _d === void 0 ? void 0 : _d.find(({ property }) => property === 'dateTimeSubmitted')) === null || _e === void 0 ? void 0 : _e.direction,
-                    },
-                    filter: {
-                        type: 'DATETIME',
-                        value: (_f = parameters.filters) === null || _f === void 0 ? void 0 : _f.dateTimeSubmitted,
-                        onChange: (newValue) => {
-                            onChangeParameters((currentParameters) => ({
-                                ...currentParameters,
-                                filters: {
-                                    ...currentParameters.filters,
-                                    dateTimeSubmitted: newValue,
-                                },
-                            }), false);
+                    header: 'Submission Date Time',
+                    meta: {
+                        sorting: {
+                            property: 'dateTimeSubmitted',
+                            direction: (_e = (_d = parameters.sorting) === null || _d === void 0 ? void 0 : _d.find(({ property }) => property === 'dateTimeSubmitted')) === null || _e === void 0 ? void 0 : _e.direction,
+                        },
+                        filter: {
+                            type: 'DATETIME',
+                            value: (_f = parameters.filters) === null || _f === void 0 ? void 0 : _f.dateTimeSubmitted,
+                            onChange: (newValue) => {
+                                onChangeParameters((currentParameters) => ({
+                                    ...currentParameters,
+                                    filters: {
+                                        ...currentParameters.filters,
+                                        dateTimeSubmitted: newValue,
+                                    },
+                                }), false);
+                            },
                         },
                     },
-                    Cell: ({ row: { original: formStoreRecord }, }) => {
+                    cell: ({ row: { original: formStoreRecord } }) => {
                         const text = format(new Date(formStoreRecord.dateTimeSubmitted), localisationService.getDateFnsFormats().longDateTime);
-                        return (React.createElement(React.Fragment, null,
-                            text,
-                            React.createElement(TableCellCopyButton, { text: text })));
+                        return (_jsxs(_Fragment, { children: [text, _jsx(TableCellCopyButton, { text: text })] }));
                     },
                 },
                 {
                     id: 'SUBMITTED_BY',
-                    headerText: 'Submitted By',
-                    sorting: undefined,
-                    filter: {
-                        type: 'TEXT',
-                        value: (_g = parameters.filters) === null || _g === void 0 ? void 0 : _g.submittedBy,
-                        onChange: (newValue) => {
-                            onChangeParameters((currentParameters) => ({
-                                ...currentParameters,
-                                filters: {
-                                    ...currentParameters.filters,
-                                    submittedBy: newValue,
-                                },
-                            }), true);
+                    header: 'Submitted By',
+                    meta: {
+                        sorting: undefined,
+                        filter: {
+                            type: 'TEXT',
+                            value: (_g = parameters.filters) === null || _g === void 0 ? void 0 : _g.submittedBy,
+                            onChange: (newValue) => {
+                                onChangeParameters((currentParameters) => ({
+                                    ...currentParameters,
+                                    filters: {
+                                        ...currentParameters.filters,
+                                        submittedBy: newValue,
+                                    },
+                                }), true);
+                            },
                         },
                     },
-                    Cell: ({ row: { original: formStoreRecord }, }) => (React.createElement(ActionedByTableCell, { userProfile: formStoreRecord.user, developerKey: formStoreRecord.key, variant: "outlined" })),
+                    cell: ({ row: { original: formStoreRecord } }) => (_jsx(ActionedByTableCell, { userProfile: formStoreRecord.user, developerKey: formStoreRecord.key, variant: "outlined" })),
                 },
                 {
                     id: 'SUBMISSION_ID',
-                    headerText: 'Submission Id',
-                    sorting: undefined,
-                    filter: {
-                        type: 'SUBMISSION_ID',
-                        value: (_h = parameters.filters) === null || _h === void 0 ? void 0 : _h.submissionId,
-                        validationMessage: submissionIdValidationMessage,
-                        isInvalid: !!submissionIdValidationMessage,
-                        onChange: (newValue) => {
-                            onChangeParameters((currentParameters) => ({
-                                ...currentParameters,
-                                filters: {
-                                    ...currentParameters.filters,
-                                    submissionId: newValue,
-                                },
-                            }), true);
+                    header: 'Submission Id',
+                    meta: {
+                        sorting: undefined,
+                        filter: {
+                            type: 'SUBMISSION_ID',
+                            value: (_h = parameters.filters) === null || _h === void 0 ? void 0 : _h.submissionId,
+                            validationMessage: submissionIdValidationMessage,
+                            isInvalid: !!submissionIdValidationMessage,
+                            onChange: (newValue) => {
+                                onChangeParameters((currentParameters) => ({
+                                    ...currentParameters,
+                                    filters: {
+                                        ...currentParameters.filters,
+                                        submissionId: newValue,
+                                    },
+                                }), true);
+                            },
                         },
                     },
-                    Cell: ({ row: { original: formStoreRecord }, }) => (React.createElement(React.Fragment, null,
-                        formStoreRecord.submissionId,
-                        React.createElement(TableCellCopyButton, { text: formStoreRecord.submissionId }))),
+                    cell: ({ row: { original: formStoreRecord } }) => (_jsxs(_Fragment, { children: [formStoreRecord.submissionId, _jsx(TableCellCopyButton, { text: formStoreRecord.submissionId })] })),
                 },
                 {
                     id: 'EXTERNAL_ID',
-                    headerText: 'External Id',
-                    sorting: {
-                        property: 'externalId',
-                        direction: (_k = (_j = parameters.sorting) === null || _j === void 0 ? void 0 : _j.find(({ property }) => property === 'externalId')) === null || _k === void 0 ? void 0 : _k.direction,
-                    },
-                    filter: {
-                        type: 'TEXT',
-                        value: (_l = parameters.filters) === null || _l === void 0 ? void 0 : _l.externalId,
-                        onChange: (newValue) => {
-                            onChangeParameters((currentParameters) => ({
-                                ...currentParameters,
-                                filters: {
-                                    ...currentParameters.filters,
-                                    externalId: newValue,
-                                },
-                            }), true);
+                    header: 'External Id',
+                    meta: {
+                        sorting: {
+                            property: 'externalId',
+                            direction: (_k = (_j = parameters.sorting) === null || _j === void 0 ? void 0 : _j.find(({ property }) => property === 'externalId')) === null || _k === void 0 ? void 0 : _k.direction,
+                        },
+                        filter: {
+                            type: 'TEXT',
+                            value: (_l = parameters.filters) === null || _l === void 0 ? void 0 : _l.externalId,
+                            onChange: (newValue) => {
+                                onChangeParameters((currentParameters) => ({
+                                    ...currentParameters,
+                                    filters: {
+                                        ...currentParameters.filters,
+                                        externalId: newValue,
+                                    },
+                                }), true);
+                            },
                         },
                     },
-                    Cell: ({ row: { original: formStoreRecord }, }) => (React.createElement(React.Fragment, null,
-                        formStoreRecord.externalId,
-                        formStoreRecord.externalId && (React.createElement(TableCellCopyButton, { text: formStoreRecord.externalId })))),
+                    cell: ({ row: { original: formStoreRecord } }) => (_jsxs(_Fragment, { children: [formStoreRecord.externalId, formStoreRecord.externalId && (_jsx(TableCellCopyButton, { text: formStoreRecord.externalId }))] })),
                 },
                 {
                     id: 'TASK_GROUP',
-                    headerText: 'Task Group',
-                    sorting: {
-                        property: 'taskGroup.name',
-                        direction: (_o = (_m = parameters.sorting) === null || _m === void 0 ? void 0 : _m.find(({ property }) => property === 'taskGroup.name')) === null || _o === void 0 ? void 0 : _o.direction,
-                    },
-                    filter: {
-                        type: 'TEXT',
-                        value: (_q = (_p = parameters.filters) === null || _p === void 0 ? void 0 : _p.taskGroup) === null || _q === void 0 ? void 0 : _q.name,
-                        onChange: (newValue) => {
-                            onChangeParameters((currentParameters) => ({
-                                ...currentParameters,
-                                filters: {
-                                    ...currentParameters.filters,
-                                    taskGroup: newValue
-                                        ? {
-                                            name: newValue,
-                                        }
-                                        : undefined,
-                                },
-                            }), true);
+                    header: 'Task Group',
+                    meta: {
+                        sorting: {
+                            property: 'taskGroup.name',
+                            direction: (_o = (_m = parameters.sorting) === null || _m === void 0 ? void 0 : _m.find(({ property }) => property === 'taskGroup.name')) === null || _o === void 0 ? void 0 : _o.direction,
+                        },
+                        filter: {
+                            type: 'TEXT',
+                            value: (_q = (_p = parameters.filters) === null || _p === void 0 ? void 0 : _p.taskGroup) === null || _q === void 0 ? void 0 : _q.name,
+                            onChange: (newValue) => {
+                                onChangeParameters((currentParameters) => ({
+                                    ...currentParameters,
+                                    filters: {
+                                        ...currentParameters.filters,
+                                        taskGroup: newValue
+                                            ? {
+                                                name: newValue,
+                                            }
+                                            : undefined,
+                                    },
+                                }), true);
+                            },
                         },
                     },
-                    Cell: ({ row: { original: formStoreRecord }, }) => {
+                    cell: ({ row: { original: formStoreRecord } }) => {
                         var _a, _b, _c;
-                        return (React.createElement(React.Fragment, null, (_a = formStoreRecord.taskGroup) === null || _a === void 0 ? void 0 :
-                            _a.name,
-                            ((_b = formStoreRecord.taskGroup) === null || _b === void 0 ? void 0 : _b.name) && (React.createElement(TableCellCopyButton, { text: (_c = formStoreRecord.taskGroup) === null || _c === void 0 ? void 0 : _c.name }))));
+                        return (_jsxs(_Fragment, { children: [(_a = formStoreRecord.taskGroup) === null || _a === void 0 ? void 0 : _a.name, ((_b = formStoreRecord.taskGroup) === null || _b === void 0 ? void 0 : _b.name) && (_jsx(TableCellCopyButton, { text: (_c = formStoreRecord.taskGroup) === null || _c === void 0 ? void 0 : _c.name }))] }));
                     },
                 },
                 {
                     id: 'TASK_GROUP_INSTANCE',
-                    headerText: 'Task Group Instance',
-                    sorting: {
-                        property: 'taskGroupInstance.label',
-                        direction: (_s = (_r = parameters.sorting) === null || _r === void 0 ? void 0 : _r.find(({ property }) => property === 'taskGroupInstance.label')) === null || _s === void 0 ? void 0 : _s.direction,
-                    },
-                    filter: {
-                        type: 'TEXT',
-                        value: (_u = (_t = parameters.filters) === null || _t === void 0 ? void 0 : _t.taskGroupInstance) === null || _u === void 0 ? void 0 : _u.label,
-                        onChange: (newValue) => {
-                            onChangeParameters((currentParameters) => ({
-                                ...currentParameters,
-                                filters: {
-                                    ...currentParameters.filters,
-                                    taskGroupInstance: newValue
-                                        ? {
-                                            label: newValue,
-                                        }
-                                        : undefined,
-                                },
-                            }), true);
+                    header: 'Task Group Instance',
+                    meta: {
+                        sorting: {
+                            property: 'taskGroupInstance.label',
+                            direction: (_s = (_r = parameters.sorting) === null || _r === void 0 ? void 0 : _r.find(({ property }) => property === 'taskGroupInstance.label')) === null || _s === void 0 ? void 0 : _s.direction,
+                        },
+                        filter: {
+                            type: 'TEXT',
+                            value: (_u = (_t = parameters.filters) === null || _t === void 0 ? void 0 : _t.taskGroupInstance) === null || _u === void 0 ? void 0 : _u.label,
+                            onChange: (newValue) => {
+                                onChangeParameters((currentParameters) => ({
+                                    ...currentParameters,
+                                    filters: {
+                                        ...currentParameters.filters,
+                                        taskGroupInstance: newValue
+                                            ? {
+                                                label: newValue,
+                                            }
+                                            : undefined,
+                                    },
+                                }), true);
+                            },
                         },
                     },
-                    Cell: ({ row: { original: formStoreRecord }, }) => {
+                    cell: ({ row: { original: formStoreRecord } }) => {
                         var _a, _b, _c;
-                        return (React.createElement(React.Fragment, null, (_a = formStoreRecord.taskGroupInstance) === null || _a === void 0 ? void 0 :
-                            _a.label,
-                            ((_b = formStoreRecord.taskGroupInstance) === null || _b === void 0 ? void 0 : _b.label) && (React.createElement(TableCellCopyButton, { text: (_c = formStoreRecord.taskGroupInstance) === null || _c === void 0 ? void 0 : _c.label }))));
+                        return (_jsxs(_Fragment, { children: [(_a = formStoreRecord.taskGroupInstance) === null || _a === void 0 ? void 0 : _a.label, ((_b = formStoreRecord.taskGroupInstance) === null || _b === void 0 ? void 0 : _b.label) && (_jsx(TableCellCopyButton, { text: (_c = formStoreRecord.taskGroupInstance) === null || _c === void 0 ? void 0 : _c.label }))] }));
                     },
                 },
                 {
                     id: 'TASK',
-                    headerText: 'Task',
-                    sorting: {
-                        property: 'task.name',
-                        direction: (_w = (_v = parameters.sorting) === null || _v === void 0 ? void 0 : _v.find(({ property }) => property === 'task.name')) === null || _w === void 0 ? void 0 : _w.direction,
-                    },
-                    filter: {
-                        type: 'TEXT',
-                        value: (_y = (_x = parameters.filters) === null || _x === void 0 ? void 0 : _x.task) === null || _y === void 0 ? void 0 : _y.name,
-                        onChange: (newValue) => {
-                            onChangeParameters((currentParameters) => ({
-                                ...currentParameters,
-                                filters: {
-                                    ...currentParameters.filters,
-                                    task: newValue
-                                        ? {
-                                            name: newValue,
-                                        }
-                                        : undefined,
-                                },
-                            }), true);
+                    header: 'Task',
+                    meta: {
+                        sorting: {
+                            property: 'task.name',
+                            direction: (_w = (_v = parameters.sorting) === null || _v === void 0 ? void 0 : _v.find(({ property }) => property === 'task.name')) === null || _w === void 0 ? void 0 : _w.direction,
+                        },
+                        filter: {
+                            type: 'TEXT',
+                            value: (_y = (_x = parameters.filters) === null || _x === void 0 ? void 0 : _x.task) === null || _y === void 0 ? void 0 : _y.name,
+                            onChange: (newValue) => {
+                                onChangeParameters((currentParameters) => ({
+                                    ...currentParameters,
+                                    filters: {
+                                        ...currentParameters.filters,
+                                        task: newValue
+                                            ? {
+                                                name: newValue,
+                                            }
+                                            : undefined,
+                                    },
+                                }), true);
+                            },
                         },
                     },
-                    Cell: ({ row: { original: formStoreRecord }, }) => {
+                    cell: ({ row: { original: formStoreRecord } }) => {
                         var _a, _b, _c;
-                        return (React.createElement(React.Fragment, null, (_a = formStoreRecord.task) === null || _a === void 0 ? void 0 :
-                            _a.name,
-                            ((_b = formStoreRecord.task) === null || _b === void 0 ? void 0 : _b.name) && (React.createElement(TableCellCopyButton, { text: (_c = formStoreRecord.task) === null || _c === void 0 ? void 0 : _c.name }))));
+                        return (_jsxs(_Fragment, { children: [(_a = formStoreRecord.task) === null || _a === void 0 ? void 0 : _a.name, ((_b = formStoreRecord.task) === null || _b === void 0 ? void 0 : _b.name) && (_jsx(TableCellCopyButton, { text: (_c = formStoreRecord.task) === null || _c === void 0 ? void 0 : _c.name }))] }));
                     },
                 },
                 {
                     id: 'TASK_ACTION',
-                    headerText: 'Task Action',
-                    sorting: {
-                        property: 'taskAction.label',
-                        direction: (_0 = (_z = parameters.sorting) === null || _z === void 0 ? void 0 : _z.find(({ property }) => property === 'taskAction.label')) === null || _0 === void 0 ? void 0 : _0.direction,
-                    },
-                    filter: {
-                        type: 'TEXT',
-                        value: (_2 = (_1 = parameters.filters) === null || _1 === void 0 ? void 0 : _1.taskAction) === null || _2 === void 0 ? void 0 : _2.label,
-                        onChange: (newValue) => {
-                            onChangeParameters((currentParameters) => ({
-                                ...currentParameters,
-                                filters: {
-                                    ...currentParameters.filters,
-                                    taskAction: newValue
-                                        ? {
-                                            label: newValue,
-                                        }
-                                        : undefined,
-                                },
-                            }), true);
+                    header: 'Task Action',
+                    meta: {
+                        sorting: {
+                            property: 'taskAction.label',
+                            direction: (_0 = (_z = parameters.sorting) === null || _z === void 0 ? void 0 : _z.find(({ property }) => property === 'taskAction.label')) === null || _0 === void 0 ? void 0 : _0.direction,
+                        },
+                        filter: {
+                            type: 'TEXT',
+                            value: (_2 = (_1 = parameters.filters) === null || _1 === void 0 ? void 0 : _1.taskAction) === null || _2 === void 0 ? void 0 : _2.label,
+                            onChange: (newValue) => {
+                                onChangeParameters((currentParameters) => ({
+                                    ...currentParameters,
+                                    filters: {
+                                        ...currentParameters.filters,
+                                        taskAction: newValue
+                                            ? {
+                                                label: newValue,
+                                            }
+                                            : undefined,
+                                    },
+                                }), true);
+                            },
                         },
                     },
-                    Cell: ({ row: { original: formStoreRecord }, }) => {
+                    cell: ({ row: { original: formStoreRecord } }) => {
                         var _a, _b, _c;
-                        return (React.createElement(React.Fragment, null, (_a = formStoreRecord.taskAction) === null || _a === void 0 ? void 0 :
-                            _a.label,
-                            ((_b = formStoreRecord.taskAction) === null || _b === void 0 ? void 0 : _b.label) && (React.createElement(TableCellCopyButton, { text: (_c = formStoreRecord.taskAction) === null || _c === void 0 ? void 0 : _c.label }))));
+                        return (_jsxs(_Fragment, { children: [(_a = formStoreRecord.taskAction) === null || _a === void 0 ? void 0 : _a.label, ((_b = formStoreRecord.taskAction) === null || _b === void 0 ? void 0 : _b.label) && (_jsx(TableCellCopyButton, { text: (_c = formStoreRecord.taskAction) === null || _c === void 0 ? void 0 : _c.label }))] }));
                     },
                 },
             ],
@@ -301,24 +305,89 @@ export default function useFormStoreTable({ form, formStoreRecords, parameters,
                 formId: form.id,
             });
     });
-    const table = useTable({
+    const transformedSorting = React.useMemo(() => {
+        var _a;
+        return (_a = parameters.sorting) === null || _a === void 0 ? void 0 : _a.reduce((memo, { property, direction }) => {
+            const column = columns.find((column) => { var _a, _b; return ((_b = (_a = column.meta) === null || _a === void 0 ? void 0 : _a.sorting) === null || _b === void 0 ? void 0 : _b.property) === property; });
+            if (column === null || column === void 0 ? void 0 : column.id) {
+                memo.push({
+                    id: column.id,
+                    desc: direction === 'descending',
+                });
+            }
+            return memo;
+        }, []);
+    }, [parameters.sorting, columns]);
+    const onSortingChange = React.useCallback((updaterOrValue) => {
+        var _a, _b;
+        const sortingState = typeof updaterOrValue === 'function'
+            ? updaterOrValue(
+            // transform the parameters sorting state to the tanstack sorting state
+            (_b = (_a = parameters.sorting) === null || _a === void 0 ? void 0 : _a.reduce((memo, { property, direction }) => {
+                const column = columns.find((column) => { var _a, _b; return ((_b = (_a = column.meta) === null || _a === void 0 ? void 0 : _a.sorting) === null || _b === void 0 ? void 0 : _b.property) === property; });
+                if (column === null || column === void 0 ? void 0 : column.id) {
+                    memo.push({
+                        id: column.id,
+                        desc: direction === 'descending',
+                    });
+                }
+                return memo;
+            }, [])) !== null && _b !== void 0 ? _b : [])
+            : updaterOrValue;
+        onChangeParameters((currentParameters) => ({
+            ...currentParameters,
+            // transform the tanstack sorting state to the parameters sorting state
+            sorting: sortingState.reduce((memo, { id, desc }) => {
+                var _a, _b;
+                const column = columns.find((column) => column.id === id);
+                if ((_b = (_a = column === null || column === void 0 ? void 0 : column.meta) === null || _a === void 0 ? void 0 : _a.sorting) === null || _b === void 0 ? void 0 : _b.property) {
+                    memo.push({
+                        property: column.meta.sorting.property,
+                        direction: desc ? 'descending' : 'ascending',
+                    });
+                }
+                return memo;
+            }, []),
+        }), false);
+    }, [onChangeParameters, parameters.sorting, columns]);
+    const [columnVisibility, setColumnVisibility] = React.useState((initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility) || {});
+    // eslint-disable-next-line react-hooks/incompatible-library
+    const table = useReactTable({
+        meta: {
+            defaultHiddenColumnsVersion: initialState === null || initialState === void 0 ? void 0 : initialState.defaultHiddenColumnsVersion,
+            formId: form.id,
+        },
         columns,
+        columnResizeMode: 'onChange',
         data: formStoreRecords,
         defaultColumn,
-        autoResetHiddenColumns: false,
-        autoResetResize: false,
+        state: {
+            sorting: transformedSorting,
+            columnVisibility,
+        },
+        onColumnVisibilityChange: setColumnVisibility,
+        onSortingChange,
+        manualFiltering: true,
         initialState,
-    }, useFlexLayout, useResizeColumns);
+        getCoreRowModel: getCoreRowModel(),
+    });
+    const state = table.getState();
     React.useEffect(() => {
-        if (table.state.formId !== form.id) {
+        var _a, _b;
+        if (((_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.formId) !== form.id) {
             // If the form id changes, do not save the state from the previous form over the that of the new form
             return;
         }
-        if (!table.state.columnResizing.isResizingColumn) {
+        if (!state.columnSizing.isResizingColumn) {
             const storageKey = localStorageKey(form.id);
-            localStorage.setItem(storageKey, JSON.stringify(table.state));
+            const augmentedState = {
+                ...state,
+                hiddenColumns: Object.keys(state.columnVisibility),
+                formId: (_b = table.options.meta) === null || _b === void 0 ? void 0 : _b.formId,
+            };
+            localStorage.setItem(storageKey, JSON.stringify(augmentedState));
         }
-    }, [form.id, table.state]);
+    }, [form.id, state, (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.formId]);
     return {
         ...table,
         form,