hrm_ui_lib 2.1.0 → 2.2.0

package/components/TableV2/Table.js

@@ -1,319 +1,123 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useCallback, useMemo } from 'react';
 import { flexRender } from '@tanstack/react-table';
-import { DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { DndContext, DragOverlay, closestCenter } from '@dnd-kit/core';
 import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { ColumnHeader } from './ColumnHeader.js';
+import { ColumnHeader } from './ColumnHeader';
 import Skeleton from 'react-loading-skeleton';
-import { useTableControl } from './hooks/useTableControl.js';
-import { Text } from '../Text/Text.js';
-import classNames from 'classnames';
-import { Empty } from '../Empty/Empty.js';
-import { B as Button } from '../../Alert-BslI0aA0.js';
-import { IconChevronDown } from '../SVGIcons/IconChevronDown.js';
-import { IconChevronUp } from '../SVGIcons/IconChevronUp.js';
-import '@babel/runtime/helpers/extends';
-import '../SVGIcons/IconArrowDown.js';
-import '../SVGIcons/IconArrowSort.js';
-import '../SVGIcons/IconArrowUp.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import './IndeterminateCheckbox.js';
-import '../Alert/consts.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../helperComponents/Loader/Loader.js';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-import './loadTableSettings.js';
-import './hooks/useTableColumnSettings.js';
-import './constants/index.js';
-import '../Image/Image.js';
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ColumnId = /*#__PURE__*/function (ColumnId) {
-  ColumnId["Select"] = "select";
-  ColumnId["Actions"] = "actions";
-  ColumnId["Expand"] = "expand";
-  return ColumnId;
-}(ColumnId || {});
-var ExpandColumn = function ExpandColumn(_ref) {
-  var _row$original, _row$original2;
-  var row = _ref.row,
-    expandedRows = _ref.expandedRows,
-    onToggle = _ref.onToggle;
-  var hasSubRows = ((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.subRows) && ((_row$original2 = row.original) === null || _row$original2 === void 0 || (_row$original2 = _row$original2.subRows) === null || _row$original2 === void 0 ? void 0 : _row$original2.length) > 0;
-  if (!hasSubRows) return null;
-  return /*#__PURE__*/React.createElement(Button, {
-    type: "tertiary",
-    size: "medium",
-    className: classNames('advanced-table__expand-button'),
-    iconProps: {
-      Component: expandedRows.has(row.id) ? IconChevronUp : IconChevronDown
-    },
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      onToggle(row.id);
-    }
-  });
+import { useTableControl } from './hooks/useTableControl';
+import { Text } from '../Text';
+import classnames from 'classnames';
+import { Empty } from '../Empty';
+import { Button } from '../Button';
+import { IconChevronDown } from '../SVGIcons/IconChevronDown';
+import { IconChevronUp } from '../SVGIcons/IconChevronUp';
+import 'react-loading-skeleton/dist/skeleton.css';
+var ColumnId;
+(function (ColumnId) {
+    ColumnId["Select"] = "select";
+    ColumnId["Actions"] = "actions";
+    ColumnId["Expand"] = "expand";
+})(ColumnId || (ColumnId = {}));
+const ExpandColumn = ({ row, expandedRows, onToggle }) => {
+    var _a, _b, _c;
+    const hasSubRows = ((_a = row.original) === null || _a === void 0 ? void 0 : _a.subRows) && ((_c = (_b = row.original) === null || _b === void 0 ? void 0 : _b.subRows) === null || _c === void 0 ? void 0 : _c.length) > 0;
+    if (!hasSubRows)
+        return null;
+    return (_jsx(Button, { type: "tertiary", size: "medium", className: classnames('advanced-table__expand-button'), iconProps: {
+            Component: expandedRows.has(row.id) ? IconChevronUp : IconChevronDown
+        }, onClick: (e) => {
+            e.stopPropagation();
+            onToggle(row.id);
+        } }));
 };
-function Table(_ref2) {
-  var data = _ref2.data,
-    columns = _ref2.columns,
-    isLoading = _ref2.isLoading,
-    hasError = _ref2.hasError,
-    _ref2$isActionsVisibl = _ref2.isActionsVisible,
-    isActionsVisible = _ref2$isActionsVisibl === void 0 ? false : _ref2$isActionsVisibl,
-    _ref2$totalCount = _ref2.totalCount,
-    totalCount = _ref2$totalCount === void 0 ? 0 : _ref2$totalCount,
-    emptyTitle = _ref2.emptyTitle,
-    emptySubTitle = _ref2.emptySubTitle,
-    emptyIllustration = _ref2.emptyIllustration,
-    _ref2$withSelect = _ref2.withSelect,
-    withSelect = _ref2$withSelect === void 0 ? false : _ref2$withSelect,
-    _ref2$withBorder = _ref2.withBorder,
-    withBorder = _ref2$withBorder === void 0 ? true : _ref2$withBorder,
-    defaultPageIndex = _ref2.defaultPageIndex,
-    defaultPageSize = _ref2.defaultPageSize,
-    defaultHiddenColumns = _ref2.defaultHiddenColumns,
-    _ref2$collapsibleRows = _ref2.collapsibleRows,
-    collapsibleRows = _ref2$collapsibleRows === void 0 ? false : _ref2$collapsibleRows,
-    renderExpandedContent = _ref2.renderExpandedContent,
-    renderHeader = _ref2.renderHeader,
-    renderFooter = _ref2.renderFooter,
-    onSortChange = _ref2.onSortChange,
-    onRowClick = _ref2.onRowClick,
-    tableSettings = _ref2.tableSettings,
-    onRowSelection = _ref2.onRowSelection,
-    onColumnSizing = _ref2.onColumnSizing,
-    onPaginationChange = _ref2.onPaginationChange;
-  var _useState = useState(new Set()),
-    _useState2 = _slicedToArray(_useState, 2),
-    expandedRows = _useState2[0],
-    setExpandedRows = _useState2[1];
-  var handleToggleRow = useCallback(function (rowId) {
-    setExpandedRows(function (prev) {
-      var next = new Set(prev);
-      if (next.has(rowId)) {
-        next["delete"](rowId);
-      } else {
-        next.add(rowId);
-      }
-      return next;
-    });
-  }, []);
-  var expandColumn = useMemo(function () {
-    return {
-      id: ColumnId.Expand,
-      accessorKey: 'expand',
-      header: function header() {
-        return /*#__PURE__*/React.createElement("span", {
-          style: {
-            display: 'none'
-          }
-        }, "Expand");
-      },
-      size: 50,
-      minSize: 50,
-      maxSize: 50,
-      cell: function cell(_ref3) {
-        var row = _ref3.row;
-        return /*#__PURE__*/React.createElement(ExpandColumn, {
-          row: row,
-          expandedRows: expandedRows,
-          onToggle: handleToggleRow
+export function Table({ data, columns, isLoading, hasError, isActionsVisible = false, totalCount = 0, emptyTitle, emptySubTitle, emptyIllustration, withSelect = false, withBorder = true, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows = false, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }) {
+    const [expandedRows, setExpandedRows] = useState(new Set());
+    const handleToggleRow = useCallback((rowId) => {
+        setExpandedRows((prev) => {
+            const next = new Set(prev);
+            if (next.has(rowId)) {
+                next.delete(rowId);
+            }
+            else {
+                next.add(rowId);
+            }
+            return next;
         });
-      },
-      meta: {
-        enableHiding: false,
-        enableColumnDragging: false,
-        enablePinning: true,
-        enableResizing: false,
-        headerVisible: false,
-        enableSorting: false
-      }
-    };
-  }, [expandedRows, handleToggleRow]);
-  var _useTableControl = useTableControl({
-      data: data,
-      tableSettings: tableSettings,
-      columns: collapsibleRows ? [expandColumn].concat(_toConsumableArray(columns)) : columns,
-      withSelect: withSelect,
-      totalCount: totalCount,
-      defaultPageIndex: defaultPageIndex,
-      defaultPageSize: defaultPageSize,
-      defaultHiddenColumns: defaultHiddenColumns,
-      onSortChange: onSortChange,
-      onRowSelection: onRowSelection,
-      onColumnSizing: onColumnSizing,
-      onPaginationChange: onPaginationChange
-    }),
-    table = _useTableControl.table,
-    sensors = _useTableControl.sensors,
-    handleDragStart = _useTableControl.handleDragStart,
-    handleDragEnd = _useTableControl.handleDragEnd,
-    handleDragCancel = _useTableControl.handleDragCancel,
-    activeHeader = _useTableControl.activeHeader;
-  var header = renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader(table);
-  var footer = renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter(table);
-  var getCommonPinningStyles = function getCommonPinningStyles(column) {
-    var isPinned = column.getIsPinned();
-    return {
-      left: isPinned === 'left' ? "".concat(column.getStart('left'), "px") : undefined,
-      right: isPinned === 'right' ? "".concat(column.getAfter('right'), "px") : undefined,
-      position: isPinned ? 'sticky' : 'relative',
-      backgroundColor: isPinned ? 'white' : undefined,
-      minWidth: column.getSize(),
-      zIndex: isPinned ? 1 : 0
+    }, []);
+    const expandColumn = useMemo(() => ({
+        id: ColumnId.Expand,
+        accessorKey: 'expand',
+        header: () => _jsx("span", { style: { display: 'none' }, children: "Expand" }),
+        size: 50,
+        minSize: 50,
+        maxSize: 50,
+        cell: ({ row }) => (_jsx(ExpandColumn, { row: row, expandedRows: expandedRows, onToggle: handleToggleRow })),
+        meta: {
+            enableHiding: false,
+            enableColumnDragging: false,
+            enablePinning: true,
+            enableResizing: false,
+            headerVisible: false,
+            enableSorting: false
+        }
+    }), [expandedRows, handleToggleRow]);
+    const { table, sensors, handleDragStart, handleDragEnd, handleDragCancel, activeHeader } = useTableControl({
+        data,
+        tableSettings,
+        columns: collapsibleRows ? [expandColumn, ...columns] : columns,
+        withSelect,
+        totalCount,
+        defaultPageIndex,
+        defaultPageSize,
+        defaultHiddenColumns,
+        onSortChange,
+        onRowSelection,
+        onColumnSizing,
+        onPaginationChange
+    });
+    const header = renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader(table);
+    const footer = renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter(table);
+    const getCommonPinningStyles = (column) => {
+        const isPinned = column.getIsPinned();
+        return {
+            left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+            right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+            position: isPinned ? 'sticky' : 'relative',
+            backgroundColor: isPinned ? 'white' : undefined,
+            minWidth: column.getSize(),
+            zIndex: isPinned ? 1 : 0
+        };
     };
-  };
-  var handleRowClick = function handleRowClick(column, row) {
-    if (column.id !== ColumnId.Actions && column.id !== ColumnId.Select && onRowClick) {
-      onRowClick(row);
-    }
-  };
-  var tableStyle = useMemo(function () {
-    return {
-      minWidth: data !== null && data !== void 0 && data.length ? table.getCenterTotalSize() : undefined
+    const handleRowClick = (column, row) => {
+        if (column.id !== ColumnId.Actions && column.id !== ColumnId.Select && onRowClick) {
+            onRowClick(row);
+        }
     };
-  }, [data === null || data === void 0 ? void 0 : data.length, table]);
-  var skeletonRowSize = useMemo(function () {
-    return Array.from({
-      length: table.getState().pagination.pageSize
-    });
-  }, [table.getState().pagination.pageSize]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('advanced-table', {
-      'with-border': withBorder
-    })
-  }, header, /*#__PURE__*/React.createElement("div", {
-    className: classNames('advanced-table__inner scrollbar scrollbar--horizontal scrollbar--vertical')
-  }, /*#__PURE__*/React.createElement(DndContext, {
-    sensors: sensors,
-    collisionDetection: closestCenter,
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd,
-    onDragCancel: handleDragCancel
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("table", {
-    style: tableStyle
-  }, !isLoading && (!(data !== null && data !== void 0 && data.length) || hasError) ? /*#__PURE__*/React.createElement(Empty, {
-    mainMessage: emptyTitle,
-    paragraphMessage: emptySubTitle,
-    illustration: emptyIllustration
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("thead", {
-    className: classNames('advanced-table__thead')
-  }, table.getHeaderGroups().map(function (headerGroup) {
-    return /*#__PURE__*/React.createElement("tr", {
-      key: headerGroup.id
-    }, /*#__PURE__*/React.createElement(SortableContext, {
-      items: headerGroup.headers.map(function (header) {
-        return header.id;
-      }),
-      strategy: horizontalListSortingStrategy
-    }, headerGroup.headers.map(function (header) {
-      if (header.id === ColumnId.Actions && !isActionsVisible) return null;
-      return /*#__PURE__*/React.createElement(ColumnHeader, {
-        pinnedStyles: _objectSpread({}, getCommonPinningStyles(header.column)),
-        key: header.id,
-        header: header
-      });
-    })));
-  })), /*#__PURE__*/React.createElement("tbody", null, isLoading ? skeletonRowSize.map(function (_, i) {
-    return /*#__PURE__*/React.createElement("tr", {
-      key: "skeleton-row-".concat(i)
-    }, table.getVisibleFlatColumns().map(function (column) {
-      return /*#__PURE__*/React.createElement("td", {
-        className: classNames({
-          'with-checkbox': column.id === ColumnId.Select,
-          'pinned-cell': column.getIsPinned(),
-          'action-column': column.id === ColumnId.Actions && !isActionsVisible
-        }),
-        key: column.id,
-        style: _objectSpread({}, getCommonPinningStyles(column))
-      }, /*#__PURE__*/React.createElement(Skeleton, null));
-    }));
-  }) : table.getRowModel().rows.map(function (row) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: row.id
-    }, /*#__PURE__*/React.createElement("tr", {
-      className: classNames({
-        selected: row.getIsSelected()
-      })
-    }, row.getVisibleCells().map(function (cell) {
-      return /*#__PURE__*/React.createElement("td", {
-        className: classNames({
-          'with-checkbox': cell.column.id === ColumnId.Select,
-          'pinned-cell': cell.column.getIsPinned(),
-          'action-column': cell.column.id === ColumnId.Actions && !isActionsVisible,
-          'expand-column': cell.column.id === ColumnId.Expand
-        }),
-        id: cell.id,
-        key: cell.id,
-        onClick: function onClick() {
-          return handleRowClick(cell.column, row);
-        },
-        style: _objectSpread({}, getCommonPinningStyles(cell.column))
-      }, cell.column.id === ColumnId.Actions && !isActionsVisible ? /*#__PURE__*/React.createElement("div", {
-        className: classNames('actions-list__right')
-      }, flexRender(cell.column.columnDef.cell, cell.getContext())) : flexRender(cell.column.columnDef.cell, cell.getContext()));
-    })), collapsibleRows && expandedRows.has(row.id) && renderExpandedContent && /*#__PURE__*/React.createElement("tr", {
-      className: classNames('advanced-table__expanded-row')
-    }, /*#__PURE__*/React.createElement("td", {
-      colSpan: row.getVisibleCells().length
-    }, renderExpandedContent(row))));
-  }))))), /*#__PURE__*/React.createElement(DragOverlay, {
-    dropAnimation: null
-  }, activeHeader && /*#__PURE__*/React.createElement("table", {
-    style: {
-      width: activeHeader.getSize()
-    }
-  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
-    className: classNames('draggable-col'),
-    style: {
-      width: activeHeader.getSize()
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    weight: 'bold'
-  }, flexRender(activeHeader.column.columnDef.header, activeHeader.getContext()))))))))), !!data.length && !hasError && footer);
+    const tableStyle = useMemo(() => ({
+        minWidth: (data === null || data === void 0 ? void 0 : data.length) ? table.getCenterTotalSize() : undefined
+    }), [data === null || data === void 0 ? void 0 : data.length, table]);
+    const skeletonRowSize = useMemo(() => {
+        return Array.from({ length: table.getState().pagination.pageSize });
+    }, [table.getState().pagination.pageSize]);
+    return (_jsxs("div", { className: classnames('advanced-table', {
+            'with-border': withBorder
+        }), children: [header, _jsx("div", { className: classnames('advanced-table__inner scrollbar scrollbar--horizontal scrollbar--vertical'), children: _jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx("div", { children: _jsx("table", { style: tableStyle, children: !isLoading && (!(data === null || data === void 0 ? void 0 : data.length) || hasError) ? (_jsx(Empty, { mainMessage: emptyTitle, paragraphMessage: emptySubTitle, illustration: emptyIllustration })) : (_jsxs(_Fragment, { children: [_jsx("thead", { className: classnames('advanced-table__thead'), children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: _jsx(SortableContext, { items: headerGroup.headers.map((header) => header.id), strategy: horizontalListSortingStrategy, children: headerGroup.headers.map((header) => {
+                                                        if (header.id === ColumnId.Actions && !isActionsVisible)
+                                                            return null;
+                                                        return (_jsx(ColumnHeader, { pinnedStyles: Object.assign({}, getCommonPinningStyles(header.column)), header: header }, header.id));
+                                                    }) }) }, headerGroup.id))) }), _jsx("tbody", { children: isLoading
+                                                ? skeletonRowSize.map((_, i) => (_jsx("tr", { children: table.getVisibleFlatColumns().map((column) => (_jsx("td", { className: classnames({
+                                                            'with-checkbox': column.id === ColumnId.Select,
+                                                            'pinned-cell': column.getIsPinned(),
+                                                            'action-column': column.id === ColumnId.Actions && !isActionsVisible
+                                                        }), style: Object.assign({}, getCommonPinningStyles(column)), children: _jsx(Skeleton, {}) }, column.id))) }, `skeleton-row-${i}`)))
+                                                : table.getRowModel().rows.map((row) => (_jsxs(React.Fragment, { children: [_jsx("tr", { className: classnames({ selected: row.getIsSelected() }), children: row.getVisibleCells().map((cell) => (_jsx("td", { className: classnames({
+                                                                    'with-checkbox': cell.column.id === ColumnId.Select,
+                                                                    'pinned-cell': cell.column.getIsPinned(),
+                                                                    'action-column': cell.column.id === ColumnId.Actions && !isActionsVisible,
+                                                                    'expand-column': cell.column.id === ColumnId.Expand
+                                                                }), id: cell.id, onClick: () => handleRowClick(cell.column, row), style: Object.assign({}, getCommonPinningStyles(cell.column)), children: cell.column.id === ColumnId.Actions && !isActionsVisible ? (_jsx("div", { className: classnames('actions-list__right'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }), collapsibleRows &&
+                                                            expandedRows.has(row.id) &&
+                                                            renderExpandedContent && (_jsx("tr", { className: classnames('advanced-table__expanded-row'), children: _jsx("td", { colSpan: row.getVisibleCells().length, children: renderExpandedContent(row) }) }))] }, row.id))) })] })) }) }), _jsx(DragOverlay, { dropAnimation: null, children: activeHeader && (_jsx("table", { style: { width: activeHeader.getSize() }, children: _jsx("thead", { children: _jsx("tr", { children: _jsx("th", { className: classnames('draggable-col'), style: { width: activeHeader.getSize() }, children: _jsx(Text, { weight: 'bold', children: flexRender(activeHeader.column.columnDef.header, activeHeader.getContext()) }) }) }) }) })) })] }) }), !!data.length && !hasError && footer] }));
 }
-
-export { Table };

package/components/TableV2/constants/index.js

@@ -1,23 +1,27 @@
-var STORAGE_TYPE = {
-  LOCAL: 'localStorage',
-  EXTERNAL: 'external'
+export const STORAGE_TYPE = {
+    LOCAL: 'localStorage',
+    EXTERNAL: 'external'
 };
-var TABLE_NAME_PREFIX = 'table-settings';
-var OPTIONS = [{
-  value: '10',
-  label: '10'
-}, {
-  value: '20',
-  label: '20'
-}, {
-  value: '30',
-  label: '30'
-}, {
-  value: '40',
-  label: '40'
-}, {
-  value: '50',
-  label: '50'
-}];
-
-export { OPTIONS, STORAGE_TYPE, TABLE_NAME_PREFIX };
+export const TABLE_NAME_PREFIX = 'table-settings';
+export const OPTIONS = [
+    {
+        value: '10',
+        label: '10'
+    },
+    {
+        value: '20',
+        label: '20'
+    },
+    {
+        value: '30',
+        label: '30'
+    },
+    {
+        value: '40',
+        label: '40'
+    },
+    {
+        value: '50',
+        label: '50'
+    }
+];

package/components/TableV2/hooks/useTableColumnSettings.js

@@ -1,20 +1,17 @@
-import { useRef, useEffect } from 'react';
-
-var useTableColumnSettings = function useTableColumnSettings(table, tableName, shouldPersistToStorage) {
-  var prevSettings = useRef(null);
-  var state = table.getState();
-  useEffect(function () {
-    var settings = {
-      columnVisibility: state.columnVisibility,
-      columnOrder: state.columnOrder,
-      columnSizing: state.columnSizing
-    };
-    var serialized = JSON.stringify(settings);
-    if (prevSettings.current !== serialized && shouldPersistToStorage) {
-      localStorage.setItem(tableName, serialized);
-      prevSettings.current = serialized;
-    }
-  }, [state.columnVisibility, state.columnOrder, state.columnSizing, tableName]);
+import { useEffect, useRef } from 'react';
+export const useTableColumnSettings = (table, tableName, shouldPersistToStorage) => {
+    const prevSettings = useRef(null);
+    const state = table.getState();
+    useEffect(() => {
+        const settings = {
+            columnVisibility: state.columnVisibility,
+            columnOrder: state.columnOrder,
+            columnSizing: state.columnSizing
+        };
+        const serialized = JSON.stringify(settings);
+        if (prevSettings.current !== serialized && shouldPersistToStorage) {
+            localStorage.setItem(tableName, serialized);
+            prevSettings.current = serialized;
+        }
+    }, [state.columnVisibility, state.columnOrder, state.columnSizing, tableName]);
 };
-
-export { useTableColumnSettings };