@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/Datagrid/useActionsColumn.js

@@ -5,79 +5,88 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import { IconSkeleton, IconButton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 
-var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"],
-  _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var useActionsColumn = function useActionsColumn(hooks) {
-  var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
-    var _ref = instance,
-      rowActions = _ref.rowActions,
-      isFetching = _ref.isFetching,
-      selectedRowIds = _ref.state.selectedRowIds;
-    var getDisabledState = function getDisabledState(rowIndex) {
-      var selectedRowIndexes = Object.keys(selectedRowIds).map(function (n) {
-        return Number(n);
-      });
+const blockClass = `${pkg.prefix}--datagrid`;
+const useActionsColumn = hooks => {
+  const useAttachActionsOnInstance = instance => {
+    const {
+      rowActions,
+      isFetching,
+      state: {
+        selectedRowIds
+      }
+    } = instance;
+    const getDisabledState = rowIndex => {
+      const selectedRowIndexes = Object.keys(selectedRowIds).map(n => Number(n));
       if (selectedRowIndexes.includes(rowIndex)) {
         return true;
       }
       return false;
     };
     if (rowActions && Array.isArray(rowActions)) {
-      var addActionsMenu = function addActionsMenu(props, cellData) {
-        var cell = cellData.cell;
-        var row = cell.row,
-          column = cell.column;
+      const addActionsMenu = (props, cellData) => {
+        const {
+          cell
+        } = cellData;
+        const {
+          row,
+          column
+        } = cell;
         if (column.isAction) {
-          var isColumnSticky = !!column.sticky;
+          const isColumnSticky = !!column.sticky;
           return [props, {
             children: /*#__PURE__*/React__default.createElement("div", {
-              className: "".concat(blockClass, "__actions-column-contents")
+              className: `${blockClass}__actions-column-contents`
             }, isFetching && /*#__PURE__*/React__default.createElement(IconSkeleton, {
-              className: "".concat(blockClass, "__actions-column-loading")
+              className: `${blockClass}__actions-column-loading`
             }), !isFetching && rowActions.length <= 2 && !isColumnSticky && /*#__PURE__*/React__default.createElement("div", {
-              className: "".concat(blockClass, "_actions-column")
-            }, rowActions.map(function (action, index) {
-              var preparedActionProps = prepareProps(action, ['isDelete']);
-              var align = preparedActionProps.align,
-                id = preparedActionProps.id,
-                itemText = preparedActionProps.itemText,
-                _onClick = preparedActionProps.onClick,
-                icon = preparedActionProps.icon,
-                shouldHideMenuItem = preparedActionProps.shouldHideMenuItem,
-                shouldDisableMenuItem = preparedActionProps.shouldDisableMenuItem,
-                disabled = preparedActionProps.disabled,
-                rest = _objectWithoutProperties(preparedActionProps, _excluded);
-              var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
-              var isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
+              className: `${blockClass}_actions-column`
+            }, rowActions.map((action, index) => {
+              const preparedActionProps = prepareProps(action, ['isDelete']);
+              const {
+                align,
+                id,
+                itemText,
+                onClick,
+                icon,
+                shouldHideMenuItem,
+                shouldDisableMenuItem,
+                disabled,
+                ...rest
+              } = preparedActionProps;
+              const hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
+              const isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
               if (hidden) {
                 return null;
               }
-              var Icon = icon;
+              const Icon = icon;
               return /*#__PURE__*/React__default.createElement("div", {
-                className: cx("".concat(blockClass, "__actions-column-button"), _defineProperty({}, "".concat(blockClass, "__disabled-row-action-button"), getDisabledState(row.index))),
-                key: "".concat(itemText, "__").concat(index)
+                className: cx(`${blockClass}__actions-column-button`, {
+                  [`${blockClass}__disabled-row-action-button`]: getDisabledState(row.index)
+                }),
+                key: `${itemText}__${index}`
               }, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, rest, {
                 align: align || 'top',
                 label: itemText,
                 kind: "ghost",
                 name: itemText //for test use
                 ,
-                className: cx(_defineProperty({}, "".concat(blockClass, "__disabled-row-action"), getDisabledState(row.index))),
-                onClick: function onClick(e) {
+                className: cx({
+                  [`${blockClass}__disabled-row-action`]: getDisabledState(row.index)
+                }),
+                onClick: e => {
                   if (getDisabledState(row.index)) {
                     // Row actions should be disabled if row is selected and batchActions toolbar is active
                     return;
                   }
                   e.stopPropagation();
-                  _onClick === null || _onClick === void 0 || _onClick(id, row, e);
+                  onClick?.(id, row, e);
                 },
                 disabled: isDisabledByRow
               }), Icon && /*#__PURE__*/React__default.createElement(Icon, null)));
@@ -85,33 +94,39 @@ var useActionsColumn = function useActionsColumn(hooks) {
               align: "left",
               size: "sm",
               flipped: true,
-              onClick: function onClick(e) {
+              onClick: e => {
                 e.stopPropagation();
               }
-            }, rowActions.map(function (action) {
-              var id = action.id,
-                _onClick2 = action.onClick,
-                shouldHideMenuItem = action.shouldHideMenuItem,
-                shouldDisableMenuItem = action.shouldDisableMenuItem,
-                disabled = action.disabled,
-                rest = _objectWithoutProperties(action, _excluded2);
-              var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
+            }, rowActions.map(action => {
+              const {
+                id,
+                onClick,
+                shouldHideMenuItem,
+                shouldDisableMenuItem,
+                disabled,
+                ...rest
+              } = action;
+              const hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
               // shouldDisableMenuItem will override disabled because it's more specific
               // if shouldDisableMenuItem doesn't exists, fall back to disabled
-              var isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
+              const isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
               if (hidden) {
                 return null;
               }
               return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({}, rest, {
                 disabled: isDisabledByRow,
-                onClick: function onClick(e) {
+                onClick: e => {
                   e.stopPropagation();
-                  _onClick2 === null || _onClick2 === void 0 || _onClick2(id, row, e);
+                  onClick?.(id, row, e);
                 },
                 key: id
               }));
             })))),
-            className: cx(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__actions-column-cell"), true), "".concat(blockClass, "__cell"), true), "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky)),
+            className: cx({
+              [`${blockClass}__actions-column-cell`]: true,
+              [`${blockClass}__cell`]: true,
+              [`${blockClass}__actions-column-cell-non-sticky`]: !isColumnSticky
+            }),
             style: {
               width: rowActions.length > 2 || isColumnSticky ? 48 : 96
             }
@@ -122,17 +137,22 @@ var useActionsColumn = function useActionsColumn(hooks) {
       hooks.getCellProps.push(addActionsMenu);
     }
   };
-  var useStickyHeaderWidth = function useStickyHeaderWidth(instance) {
-    var rowActions = instance.rowActions;
+  const useStickyHeaderWidth = instance => {
+    const {
+      rowActions
+    } = instance;
     if (rowActions && Array.isArray(rowActions)) {
-      var addHeaderWidth = function addHeaderWidth(props, cellData) {
-        var column = cellData.column;
+      const addHeaderWidth = (props, cellData) => {
+        const {
+          column
+        } = cellData;
         if (column.isAction) {
-          var isColumnSticky = !!column.sticky;
+          const isColumnSticky = !!column.sticky;
           return [props, {
-            style: _objectSpread2(_objectSpread2({}, props.style), {}, {
+            style: {
+              ...props.style,
               width: rowActions.length > 2 || isColumnSticky ? 48 : 96 // set header width based on action length
-            })
+            }
           }];
         }
         return [props];

package/es/components/Datagrid/useColumnCenterAlign.js

@@ -5,37 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var useColumnCenterAlign = function useColumnCenterAlign(hooks) {
-  var centerAlignRenderer = function centerAlignRenderer(tableProps, column) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: cx("".concat(blockClass, "__center-align-cell-renderer"), {
-        sortDisabled: !tableProps.isTableSortable || tableProps.column && tableProps.column.disableSortBy === true
-      })
-    }, column.Cell(tableProps));
-  };
-  var centerAlignHeader = function centerAlignHeader(headerProp, column) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__center-align-header")
-    }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
-  };
-  var centerAlignedColumns = function centerAlignedColumns(columns) {
-    var columnsWithDefaultCells = columns.map(function (column) {
-      return _objectSpread2(_objectSpread2({}, column), {}, {
-        Cell: column.centerAlignedColumn ? function (tableProp) {
-          return centerAlignRenderer(tableProp, column);
-        } : column.Cell,
-        Header: column.centerAlignedColumn ? function (headerProp) {
-          return centerAlignHeader(headerProp, column);
-        } : column.Header
-      });
-    });
-    return _toConsumableArray(columnsWithDefaultCells);
+const blockClass = `${pkg.prefix}--datagrid`;
+const useColumnCenterAlign = hooks => {
+  const centerAlignRenderer = (tableProps, column) => /*#__PURE__*/React__default.createElement("div", {
+    className: cx(`${blockClass}__center-align-cell-renderer`, {
+      sortDisabled: !tableProps.isTableSortable || tableProps.column && tableProps.column.disableSortBy === true
+    })
+  }, column.Cell(tableProps));
+  const centerAlignHeader = (headerProp, column) => /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__center-align-header`
+  }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
+  const centerAlignedColumns = columns => {
+    const columnsWithDefaultCells = columns.map(column => ({
+      ...column,
+      Cell: column.centerAlignedColumn ? tableProp => centerAlignRenderer(tableProp, column) : column.Cell,
+      Header: column.centerAlignedColumn ? headerProp => centerAlignHeader(headerProp, column) : column.Header
+    }));
+    return [...columnsWithDefaultCells];
   };
   hooks.visibleColumns.push(centerAlignedColumns);
 };

package/es/components/Datagrid/useColumnRightAlign.js

@@ -5,38 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var useColumnRightAlign = function useColumnRightAlign(hooks) {
-  var RightAlignRenderer = function RightAlignRenderer(tableProps, column) {
-    var _tableProps$column, _column$Cell;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: cx("".concat(blockClass, "__right-align-cell-renderer"), {
-        sortDisabled: !tableProps.isTableSortable || (tableProps === null || tableProps === void 0 || (_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.disableSortBy) === true
-      })
-    }, column === null || column === void 0 || (_column$Cell = column.Cell) === null || _column$Cell === void 0 ? void 0 : _column$Cell.call(column, tableProps));
-  };
-  var RightAlignHeader = function RightAlignHeader(headerProp, column) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__right-align-header")
-    }, typeof column.Header === 'function' ? (column === null || column === void 0 ? void 0 : column.Header.bind(column))(headerProp) : column.Header);
-  };
-  var rightAlignedColumns = function rightAlignedColumns(columns) {
-    var columnsWithDefaultCells = columns.map(function (column) {
-      return _objectSpread2(_objectSpread2({}, column), {}, {
-        Cell: column.rightAlignedColumn ? function (tableProp) {
-          return RightAlignRenderer(tableProp, column);
-        } : column.Cell,
-        Header: column.rightAlignedColumn ? function (headerProp) {
-          return RightAlignHeader(headerProp, column);
-        } : column.Header
-      });
-    });
-    return _toConsumableArray(columnsWithDefaultCells);
+const blockClass = `${pkg.prefix}--datagrid`;
+const useColumnRightAlign = hooks => {
+  const RightAlignRenderer = (tableProps, column) => /*#__PURE__*/React__default.createElement("div", {
+    className: cx(`${blockClass}__right-align-cell-renderer`, {
+      sortDisabled: !tableProps.isTableSortable || tableProps?.column?.disableSortBy === true
+    })
+  }, column?.Cell?.(tableProps));
+  const RightAlignHeader = (headerProp, column) => /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__right-align-header`
+  }, typeof column.Header === 'function' ? (column?.Header)(headerProp) : column.Header);
+  const rightAlignedColumns = columns => {
+    const columnsWithDefaultCells = columns.map(column => ({
+      ...column,
+      Cell: column.rightAlignedColumn ? tableProp => RightAlignRenderer(tableProp, column) : column.Cell,
+      Header: column.rightAlignedColumn ? headerProp => RightAlignHeader(headerProp, column) : column.Header
+    }));
+    return [...columnsWithDefaultCells];
   };
   hooks.visibleColumns.push(rightAlignedColumns);
 };

package/es/components/Datagrid/useCustomizeColumns.js

@@ -5,33 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import TearsheetWrapper from './Datagrid/addons/CustomizeColumns/TearsheetWrapper.js';
 import ButtonWrapper from './Datagrid/addons/CustomizeColumns/ButtonWrapper.js';
 
-var useCustomizeColumns = function useCustomizeColumns(hooks) {
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isTearsheetOpen = _React$useState2[0],
-    setIsTearsheetOpen = _React$useState2[1];
-  hooks.useInstance.push(function (instance) {
-    var _ref = instance,
-      customizeColumnsProps = _ref.customizeColumnsProps;
-    var _ref2 = customizeColumnsProps || {},
-      labels = _ref2.labels;
+const useCustomizeColumns = hooks => {
+  const [isTearsheetOpen, setIsTearsheetOpen] = React.useState(false);
+  hooks.useInstance.push(instance => {
+    const {
+      customizeColumnsProps
+    } = instance;
+    const {
+      labels
+    } = customizeColumnsProps || {};
     Object.assign(instance, {
-      customizeColumnsProps: _objectSpread2(_objectSpread2({}, customizeColumnsProps), {}, {
+      customizeColumnsProps: {
+        ...customizeColumnsProps,
+        isTearsheetOpen,
+        setIsTearsheetOpen
+      },
+      CustomizeColumnsButton: props => /*#__PURE__*/React.createElement(ButtonWrapper, _extends({
+        iconTooltipLabel: labels?.iconTooltipLabel,
         isTearsheetOpen: isTearsheetOpen,
         setIsTearsheetOpen: setIsTearsheetOpen
-      }),
-      CustomizeColumnsButton: function CustomizeColumnsButton(props) {
-        return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({
-          iconTooltipLabel: labels === null || labels === void 0 ? void 0 : labels.iconTooltipLabel,
-          isTearsheetOpen: isTearsheetOpen,
-          setIsTearsheetOpen: setIsTearsheetOpen
-        }, props));
-      },
+      }, props)),
       CustomizeColumnsTearsheet: TearsheetWrapper
     });
   });

package/es/components/Datagrid/useDatagrid.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo } from 'react';
 import { useFlexLayout, useResizeColumns, useFilters, useGlobalFilter, useSortBy, useExpanded, useTable, usePagination, useRowSelect } from 'react-table';
 import useSkeletons from './useSkeletonRows.js';
@@ -18,33 +17,29 @@ import useFloatingScroll from './useFloatingScroll.js';
 import { stateReducer } from './Datagrid/addons/stateReducer.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 
-var useDatagrid = function useDatagrid(params) {
-  var defaultPlugins = [useFlexLayout, useHeaderRow, useSkeletons, useResizeColumns, useRowRenderer, useDefaultStringRenderer, useRowSize, useFilters, useGlobalFilter, useSortBy, useExpanded];
+const useDatagrid = function (params) {
+  const defaultPlugins = [useFlexLayout, useHeaderRow, useSkeletons, useResizeColumns, useRowRenderer, useDefaultStringRenderer, useRowSize, useFilters, useGlobalFilter, useSortBy, useExpanded];
 
   // Disable resizing
   if (params.disableResizing) {
-    var resizeIndex = defaultPlugins.findIndex(function (p) {
-      return (p === null || p === void 0 ? void 0 : p['pluginName']) === 'useResizeColumns';
-    });
+    const resizeIndex = defaultPlugins.findIndex(p => p?.['pluginName'] === 'useResizeColumns');
     defaultPlugins.splice(resizeIndex, 1);
   }
-  var defaultEndPlugins = [usePagination, useRowSelect, useFlexResize, useFloatingScroll];
-  var clientEndPlugins = params.endPlugins || [];
-  var defaultColumn = {
+  const defaultEndPlugins = [usePagination, useRowSelect, useFlexResize, useFloatingScroll];
+  const clientEndPlugins = params.endPlugins || [];
+  const defaultColumn = {
     minWidth: 50
   };
-  var tableId = useMemo(function () {
-    return uuidv4('datagrid-table-id');
-  }, []);
+  const tableId = useMemo(() => uuidv4('datagrid-table-id'), []);
   for (var _len = arguments.length, plugins = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     plugins[_key - 1] = arguments[_key];
   }
-  var tableState = useTable.apply(void 0, [_objectSpread2(_objectSpread2({
-    tableId: tableId
-  }, params), {}, {
-    stateReducer: stateReducer,
-    defaultColumn: defaultColumn
-  })].concat(defaultPlugins, plugins, defaultEndPlugins, _toConsumableArray(clientEndPlugins)));
+  const tableState = useTable({
+    tableId,
+    ...params,
+    stateReducer,
+    defaultColumn
+  }, ...defaultPlugins, ...plugins, ...defaultEndPlugins, ...clientEndPlugins);
   return tableState;
 };
 

package/es/components/Datagrid/useDefaultStringRenderer.js

@@ -5,34 +5,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
-  var StringRenderer = function StringRenderer(tableProps) {
-    var _tableProps$column;
+const blockClass = `${pkg.prefix}--datagrid`;
+const useDefaultStringRenderer = hooks => {
+  const StringRenderer = tableProps => /*#__PURE__*/React__default.createElement("div", {
+    className: cx(`${blockClass}__defaultStringRenderer`, {
+      [`${blockClass}__defaultStringRenderer--multiline`]: tableProps.column?.multiLineWrap || tableProps?.multiLineWrapAll
+    })
+  }, tableProps.value);
+  const HeaderRenderer = (header, slug, aiLabel) => {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll)))
-    }, tableProps.value);
-  };
-  var HeaderRenderer = function HeaderRenderer(header, slug, aiLabel) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/React__default.isValidElement(slug)), "".concat(blockClass, "__defaultStringRenderer--ai-label"), aiLabel && /*#__PURE__*/React__default.isValidElement(aiLabel))),
+      className: cx(`${blockClass}__defaultStringRenderer`, {
+        [`${blockClass}__defaultStringRenderer--slug`]: slug && /*#__PURE__*/React__default.isValidElement(slug),
+        [`${blockClass}__defaultStringRenderer--ai-label`]: aiLabel && /*#__PURE__*/React__default.isValidElement(aiLabel)
+      }),
       key: typeof header === 'string' ? header : ''
     }, header);
   };
-  var visibleColumns = function visibleColumns(columns) {
-    var columnsWithDefaultCells = columns.map(function (column) {
-      return _objectSpread2(_objectSpread2({
-        Cell: StringRenderer
-      }, column), {}, {
-        Header: column.HeaderRenderer || HeaderRenderer(column.Header, column.slug, column.aiLabel)
-      });
-    });
-    return _toConsumableArray(columnsWithDefaultCells);
+  const visibleColumns = columns => {
+    const columnsWithDefaultCells = columns.map(column => ({
+      Cell: StringRenderer,
+      ...column,
+      Header: column.HeaderRenderer || HeaderRenderer(column.Header, column.slug, column.aiLabel)
+    }));
+    return [...columnsWithDefaultCells];
   };
   hooks.visibleColumns.push(visibleColumns);
 };