qbs-react-grid 1.2.1 → 1.2.3

package/es/qbsTable/Toolbar.js

@@ -1,7 +1,9 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import debounce from './utilities/debounce';
+import { CardIcon, TableIcon } from './utilities/icons';
 import SearchInput from './utilities/SearchInput';
 import { getRowDisplayRange } from './utilities/tablecalc';
+import TooltipComponent from './utilities/ToolTip';
 var ToolBar = function ToolBar(_ref) {
   var _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
   var pagination = _ref.pagination,
@@ -20,11 +22,16 @@ var ToolBar = function ToolBar(_ref) {
     checkedKeys = _ref.checkedKeys,
     onSelect = _ref.onSelect,
     dataLength = _ref.dataLength,
-    searchPlaceholder = _ref.searchPlaceholder;
+    searchPlaceholder = _ref.searchPlaceholder,
+    tableViewToggle = _ref.tableViewToggle,
+    setTableViewToggle = _ref.setTableViewToggle,
+    _ref$enableTableToggl = _ref.enableTableToggle,
+    enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl;
   var debouncedOnSearch = useCallback(debounce(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var _useState = useState(searchValue),
     searchParam = _useState[0],
     setSearchParam = _useState[1];
+  var toolbarRef = useRef(null);
   var handleSearch = useCallback(function (e) {
     if (debouncedOnSearch) {
       debouncedOnSearch(e);
@@ -48,7 +55,8 @@ var ToolBar = function ToolBar(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "qbs-table-toolbar-container"
+    className: "qbs-table-toolbar-container",
+    ref: toolbarRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-toolbar " + className
   }, /*#__PURE__*/React.createElement("div", {
@@ -65,8 +73,16 @@ var ToolBar = function ToolBar(_ref) {
     handleSearch: handleSearch,
     searchValue: searchParam
   }), primaryFilter)), /*#__PURE__*/React.createElement("div", {
-    className: "end-container"
-  }, tableHeaderActions)), advancefilter && /*#__PURE__*/React.createElement("div", {
+    className: "end-container flex items-center"
+  }, tableHeaderActions, /*#__PURE__*/React.createElement("div", {
+    className: " pr-1 cursor-pointer relative",
+    onClick: function onClick() {
+      return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(!tableViewToggle);
+    }
+  }, enableTableToggle && /*#__PURE__*/React.createElement(TooltipComponent, {
+    tableBodyRef: toolbarRef,
+    title: tableViewToggle ? 'Switch to Card View' : 'Switch to Table View'
+  }, !tableViewToggle ? /*#__PURE__*/React.createElement(CardIcon, null) : /*#__PURE__*/React.createElement(TableIcon, null))))), advancefilter && /*#__PURE__*/React.createElement("div", {
     className: "sub-qbs-table-toolbar"
   }, advancefilter), (pagination && dataLength > 0 || checkedKeys && (checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) > 0) && /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-toolbar-sub-container " + (checkedKeys && (checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) > 0 ? 'selected-row' : '')

package/es/qbsTable/commontypes.d.ts

@@ -8,6 +8,7 @@ export interface ColumnBase {
     field: string;
     sortable?: boolean;
     resizable?: boolean;
+    colSpan?: number;
     fixed?: boolean;
     align?: 'left' | 'right' | 'center';
     colWidth?: number;
@@ -42,6 +43,9 @@ export interface ActionProps {
     toolTip?: string;
     hidden?: boolean;
     hide?: (data: any, index?: number) => boolean;
+    isWarning?: boolean;
+    label?: string;
+    iconName?: string;
 }
 export interface QbsTableProps {
     tableKey?: string;
@@ -116,6 +120,10 @@ export interface QbsTableProps {
     renderEmpty?: (info: React.ReactNode) => React.ReactNode;
     emptySubTitle?: string;
     emptyTitle?: string;
+    enableTableToggle?: boolean;
+    tableView?: boolean;
+    cardColumLimit?: number;
+    childDetailHeading?: string;
 }
 export interface QbsTableToolbarProps {
     title?: string;
@@ -140,6 +148,10 @@ export interface QbsTableToolbarProps {
     dataLength: number;
     headerHeight?: number;
     searchPlaceholder?: string;
+    tableView?: boolean;
+    enableTableToggle?: boolean;
+    tableViewToggle?: boolean;
+    setTableViewToggle?: (value: boolean) => void;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;

package/es/qbsTable/utilities/CardComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { QbsColumnProps } from '../commontypes';
+type Props = {
+    columns: QbsColumnProps[];
+    data: any;
+    tableBodyRef: any;
+    actionProps?: any;
+    index?: number;
+    handleMenuActions?: () => void;
+    cardColumLimit?: number;
+    childDetailHeading?: string;
+};
+declare const CardComponent: React.FC<Props>;
+export default CardComponent;

package/es/qbsTable/utilities/CardComponent.js

@@ -0,0 +1,83 @@
+import React, { useState, useRef } from 'react';
+import CardMenuDropdown from './CardMenuDropdown';
+import { CustomTableCell } from './SwitchCardColumns';
+import { handleCellFormat } from './handleFormatCell';
+import { ArrowUpIcon } from './icons';
+import { getGridColsClass, getGridColSpanClass } from './store';
+import TooltipComponent from './ToolTip';
+var CardComponent = function CardComponent(_ref) {
+  var columns = _ref.columns,
+    data = _ref.data,
+    tableBodyRef = _ref.tableBodyRef,
+    actionProps = _ref.actionProps,
+    index = _ref.index,
+    _ref$cardColumLimit = _ref.cardColumLimit,
+    cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
+    handleMenuActions = _ref.handleMenuActions,
+    _ref$childDetailHeadi = _ref.childDetailHeading,
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
+  var _useState = useState(false),
+    viewMore = _useState[0],
+    setViewMore = _useState[1];
+  var initialDisplayCount = cardColumLimit;
+  var toggleViewMore = function toggleViewMore() {
+    setViewMore(!viewMore);
+  };
+  var useCardRef = useRef(null);
+  var displayedColumns = viewMore ? columns : columns.slice(0, initialDisplayCount);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: useCardRef,
+    className: "p-3 gap-3 border-2 border-grey shadow-sm rounded-lg relative qbs-card-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid " + getGridColsClass(initialDisplayCount) + " qbs-card-columns"
+  }, displayedColumns.map(function (col, index) {
+    var _col$colSpan;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "grid " + getGridColSpanClass((_col$colSpan = col.colSpan) != null ? _col$colSpan : 1) + " place-content-start text-sm qbs-card-column   " + (index === initialDisplayCount - 1 ? 'mr-4' : '') + " "
+    }, /*#__PURE__*/React.createElement("p", {
+      className: " text-grey "
+    }, col.title), col.customCell || col.link ? /*#__PURE__*/React.createElement("span", {
+      className: "qbs-card-column-content mt-1   " + (!viewMore ? 'line-clamp-1' : '')
+    }, /*#__PURE__*/React.createElement(CustomTableCell, {
+      dataKey: col.field,
+      rowData: data,
+      type: col.type,
+      path: col.getPath,
+      link: col.link,
+      viewMore: viewMore,
+      rowClick: col.rowClick,
+      renderCell: col.renderCell
+    })) : /*#__PURE__*/React.createElement("p", {
+      className: "mt-1  qbs-card-column-content " + (!viewMore ? 'line-clamp-1' : ''),
+      key: index
+    }, handleCellFormat(data[col.field], col.type)));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "qbs-card-column-action absolute  text-blue-500 mt-2 right-2 " + (columns.length > initialDisplayCount ? 'top-2' : 'top-4') + "  text-xs"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex  qbs-card-column-action-container\n               flex-col   items-center gap-y-2\n          "
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "  text-blue-500 qbs-card-column-action-menu "
+  }, /*#__PURE__*/React.createElement(CardMenuDropdown, {
+    tableBodyRef: tableBodyRef,
+    actionDropDown: actionProps,
+    rowData: data,
+    iconName: "more",
+    rowIndex: index,
+    handleMenuActions: handleMenuActions
+  })), columns.length > initialDisplayCount && /*#__PURE__*/React.createElement(TooltipComponent, {
+    tableBodyRef: useCardRef,
+    title: viewMore ? ' View Less' : 'View More',
+    enabled: false
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: toggleViewMore,
+    className: " qbs-card-column-action-menu-view-more justify-end text-blue-500 text-xs"
+  }, /*#__PURE__*/React.createElement(ArrowUpIcon, {
+    className: (viewMore ? 'rotate-180' : '') + " "
+  })))))), viewMore && (data === null || data === void 0 ? void 0 : data.childDetail) && /*#__PURE__*/React.createElement("div", {
+    className: "mt-4 p-3 border-t border-grey qbs-card-child-detail-container"
+  }, childDetailHeading && /*#__PURE__*/React.createElement("p", {
+    className: " text-lg qbs-card-child-detail-head font-semibold "
+  }, childDetailHeading), data === null || data === void 0 ? void 0 : data.childDetail));
+};
+export default CardComponent;

package/es/qbsTable/utilities/CardMenuDropdown.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ActionProps } from '../commontypes';
+type Props = {
+    iconName: string;
+    actionDropDown: ActionProps[];
+    handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
+    rowData?: any;
+    dataTheme?: string;
+    tableBodyRef: React.RefObject<HTMLDivElement>;
+    rowIndex?: number;
+};
+declare const CardMenuDropdown: React.FC<Props>;
+export default CardMenuDropdown;

package/es/qbsTable/utilities/CardMenuDropdown.js

@@ -0,0 +1,93 @@
+import { useEffect, useRef, useState } from 'react';
+import React from 'react';
+import { ThreeDotIcon } from './icons';
+import TooltipComponent from './ToolTip';
+var CardMenuDropdown = function CardMenuDropdown(_ref) {
+  var actionDropDown = _ref.actionDropDown,
+    handleMenuActions = _ref.handleMenuActions,
+    rowData = _ref.rowData;
+  var _useState = useState(false),
+    openMenu = _useState[0],
+    setOpenMenu = _useState[1];
+  var _useState2 = useState({}),
+    menuPositionStyles = _useState2[0],
+    setMenuPositionStyles = _useState2[1];
+  var menuButtonRef = useRef(null);
+  var menuRef = useRef(null);
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setOpenMenu(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+  var toggleMenu = function toggleMenu() {
+    setOpenMenu(function (prevState) {
+      if (!prevState && menuButtonRef.current) {
+        var buttonRect = menuButtonRef.current.getBoundingClientRect();
+        var dropdownHeight = 200; // Adjust this if your dropdown height varies
+        var spaceBelow = window.innerHeight - buttonRect.bottom;
+        var spaceAbove = buttonRect.top;
+        console.log(spaceAbove, spaceBelow, dropdownHeight);
+        if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+          setMenuPositionStyles({
+            bottom: '30px',
+            right: '10px'
+          });
+        } else {
+          setMenuPositionStyles({
+            top: buttonRect.height + "px",
+            right: '10px'
+          });
+        }
+      }
+      return !prevState;
+    });
+  };
+  var handleClose = function handleClose() {
+    setOpenMenu(false);
+  };
+  var handleMenuItemClick = function handleMenuItemClick(item) {
+    var _item$action;
+    (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item, item);
+    handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(item, rowData);
+    handleClose();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dropdown text-black dark:text-white dark:bg-[#424242] bg-white",
+    ref: menuRef
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "dropdown-toggle",
+    onClick: toggleMenu,
+    ref: menuButtonRef
+  }, /*#__PURE__*/React.createElement(TooltipComponent, {
+    title: "Actions",
+    enabled: false,
+    ref: menuButtonRef
+  }, /*#__PURE__*/React.createElement(ThreeDotIcon, null))), openMenu && /*#__PURE__*/React.createElement("div", {
+    className: " qbs-card-dropdown rounded absolute right-0 mt-2 w-auto min-w-11 z-10 shadow-modalShadow bg-white dark:bg-[#424242] dark:text-white",
+    style: menuPositionStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "qbs-card-dropdown-menu px-2 bg-white rounded w-full border border-grey-border shadow-lg shadow-menudropdown dark:bg-[#424242] dark:text-white"
+  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
+    return !item.hidden && /*#__PURE__*/React.createElement("a", {
+      key: item.title,
+      href: "#/",
+      className: 'px-1  hover:bg-background no-underline whitespace-nowrap ',
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleMenuItemClick(item);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: " qbs-card-dropdown-menu-item no-underline " + (item.isWarning ? 'text-error-light' : ' text-black/70  dark:text-white') + " text-xxs flex items-center w-full tracking-[0.24px] font-medium "
+    }, (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/React.createElement(React.Fragment, null, item.icon), /*#__PURE__*/React.createElement("span", {
+      className: "pl-1.5 no-underline text-sm "
+    }, 'Edit this column')));
+  }))));
+};
+export default CardMenuDropdown;

package/es/qbsTable/utilities/SwitchCardColumns.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CustomTableCell: React.FC<any>;

package/es/qbsTable/utilities/SwitchCardColumns.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { handleCellFormat } from './handleFormatCell';
+export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref) {
+  var _renderCell, _path, _renderCell2, _renderCell3;
+  var rowData = _ref.rowData,
+    renderCell = _ref.renderCell,
+    hideLink = _ref.hideLink,
+    dataKey = _ref.dataKey,
+    rowClick = _ref.rowClick,
+    type = _ref.type,
+    path = _ref.path,
+    link = _ref.link,
+    viewMore = _ref.viewMore;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, link && !path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/React.createElement("a", {
+    onClick: function onClick() {
+      return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
+    },
+    className: "qbs-table-row-link no-underline   " + (!viewMore ? 'line-clamp-1' : '')
+  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : handleCellFormat(rowData[dataKey], type)) : path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/React.createElement(Link, {
+    to: (_path = path === null || path === void 0 ? void 0 : path(rowData)) != null ? _path : '',
+    className: "qbs-table-row-link no-underline " + (!viewMore ? 'line-clamp-1' : '')
+  }, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : handleCellFormat(rowData[dataKey], type)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderCell ? (_renderCell3 = renderCell(rowData)) === null || _renderCell3 === void 0 ? void 0 : _renderCell3.cell : handleCellFormat(rowData[dataKey], type)));
+});

package/es/qbsTable/utilities/ToolTip.js

@@ -10,15 +10,12 @@ var TooltipComponent = function TooltipComponent(_ref) {
   var menuButtonRef = useRef(null);
   var adjustDropdownPosition = function adjustDropdownPosition() {
     if (menuButtonRef.current && tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current) {
-      var _menuButtonRef$curren, _tableBodyRef$current, _tableBodyRef$current2;
+      var _menuButtonRef$curren;
       var inputBoxRect = (_menuButtonRef$curren = menuButtonRef.current) === null || _menuButtonRef$curren === void 0 ? void 0 : _menuButtonRef$curren.getBoundingClientRect();
-      var viewportHeight = (_tableBodyRef$current = tableBodyRef === null || tableBodyRef === void 0 ? void 0 : (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.offsetHeight) != null ? _tableBodyRef$current : window.innerHeight;
       var tableRect = tableBodyRef.current.getBoundingClientRect();
-
       // Calculate positions relative to the table
       var spaceAbove = inputBoxRect.top - tableRect.top;
       var spaceBelow = tableRect.bottom - inputBoxRect.bottom;
-      console.log(viewportHeight, spaceAbove, spaceBelow);
       if (spaceAbove > spaceBelow) {
         setDropdownPosition('top-position');
       } else {
@@ -38,7 +35,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
     }
   }, children), /*#__PURE__*/React.createElement("span", {
     ref: dropRef,
-    className: "tooltiptext "
+    className: 'tooltiptext'
   }, title));
 };
 export default TooltipComponent;

package/es/qbsTable/utilities/icons.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 export declare const ThreeDotIcon: React.FC<any>;
 export declare const SettingsIcon: React.FC<any>;
+export declare const ArrowUpIcon: React.FC<any>;
+export declare const TableIcon: React.FC<any>;
+export declare const CardIcon: React.FC<any>;

package/es/qbsTable/utilities/icons.js

@@ -36,4 +36,49 @@ export var SettingsIcon = function SettingsIcon() {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
+};
+export var ArrowUpIcon = function ArrowUpIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "3",
+    stroke: "currentColor",
+    className: className + " w-4 h-4"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+  }));
+};
+export var TableIcon = function TableIcon(_ref2) {
+  var className = _ref2.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor",
+    className: className + " w-6 h-6"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"
+  }));
+};
+export var CardIcon = function CardIcon(_ref3) {
+  var className = _ref3.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor",
+    className: className + " w-6 h-6"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
+  }));
 };

package/es/qbsTable/utilities/store.d.ts

@@ -0,0 +1,2 @@
+export declare const getGridColsClass: (count: number) => "grid-cols-1" | "grid-cols-2" | "grid-cols-3" | "grid-cols-4" | "grid-cols-5" | "grid-cols-6" | "grid-cols-7" | "grid-cols-8" | "grid-cols-9" | "grid-cols-10" | "grid-cols-11" | "grid-cols-12";
+export declare const getGridColSpanClass: (count: number) => "col-span-1" | "col-span-2" | "col-span-3" | "col-span-4" | "col-span-5" | "col-span--6" | "col-span--7" | "col-span--8" | "col-span--9" | "col-span--10" | "col-span--11" | "col-span--12" | "col-span--1";

package/es/qbsTable/utilities/store.js

@@ -0,0 +1,60 @@
+export var getGridColsClass = function getGridColsClass(count) {
+  switch (count) {
+    case 1:
+      return 'grid-cols-1';
+    case 2:
+      return 'grid-cols-2';
+    case 3:
+      return 'grid-cols-3';
+    case 4:
+      return 'grid-cols-4';
+    case 5:
+      return 'grid-cols-5';
+    case 6:
+      return 'grid-cols-6';
+    case 7:
+      return 'grid-cols-7';
+    case 8:
+      return 'grid-cols-8';
+    case 9:
+      return 'grid-cols-9';
+    case 10:
+      return 'grid-cols-10';
+    case 11:
+      return 'grid-cols-11';
+    case 12:
+      return 'grid-cols-12';
+    default:
+      return 'grid-cols-1';
+  }
+};
+export var getGridColSpanClass = function getGridColSpanClass(count) {
+  switch (count) {
+    case 1:
+      return 'col-span-1';
+    case 2:
+      return 'col-span-2';
+    case 3:
+      return 'col-span-3';
+    case 4:
+      return 'col-span-4';
+    case 5:
+      return 'col-span-5';
+    case 6:
+      return 'col-span--6';
+    case 7:
+      return 'col-span--7';
+    case 8:
+      return 'col-span--8';
+    case 9:
+      return 'col-span--9';
+    case 10:
+      return 'col-span--10';
+    case 11:
+      return 'col-span--11';
+    case 12:
+      return 'col-span--12';
+    default:
+      return 'col-span--1';
+  }
+};

package/es/utils/getTotalByColumns.js

@@ -6,7 +6,7 @@ function getTotalByColumns(columns) {
   var totalWidth = 0;
   var count = function count(items) {
     Array.from(items).forEach(function (column) {
-      if ( /*#__PURE__*/React.isValidElement(column)) {
+      if (/*#__PURE__*/React.isValidElement(column)) {
         var _getColumnProps = getColumnProps(column),
           flexGrow = _getColumnProps.flexGrow,
           _getColumnProps$width = _getColumnProps.width,

package/es/utils/mergeCells.js

@@ -46,7 +46,7 @@ function mergeCells(cells) {
             removed: true
           });
         }
-        groupChildren.push( /*#__PURE__*/React.createElement(HeaderCell, {
+        groupChildren.push(/*#__PURE__*/React.createElement(HeaderCell, {
           key: j,
           left: left,
           align: align,

package/es/utils/useCellDescriptor.js

@@ -138,11 +138,11 @@ var useCellDescriptor = function useCellDescriptor(props) {
     totalFlexGrow = _getTotalByColumns.totalFlexGrow,
     totalWidth = _getTotalByColumns.totalWidth;
   React.Children.forEach(columns, function (column, index) {
-    if ( /*#__PURE__*/React.isValidElement(column)) {
+    if (/*#__PURE__*/React.isValidElement(column)) {
       var _initialColumnWidths$, _columnWidths$current;
       var columnChildren = column.props.children;
       var columnProps = getColumnProps(column);
-      var _width = columnProps.width,
+      var width = columnProps.width,
         resizable = columnProps.resizable,
         flexGrow = columnProps.flexGrow,
         minWidth = columnProps.minWidth,
@@ -161,23 +161,23 @@ var useCellDescriptor = function useCellDescriptor(props) {
       // get column width from cache.
       var initialColumnWidth = (_initialColumnWidths$ = initialColumnWidths.current) === null || _initialColumnWidths$ === void 0 ? void 0 : _initialColumnWidths$[cellWidthId];
       var currentWidth = (_columnWidths$current = columnWidths.current) === null || _columnWidths$current === void 0 ? void 0 : _columnWidths$current[cellWidthId];
-      var cellWidth = currentWidth || _width || 0;
-      var isControlled = typeof _width === 'number' && typeof onResize === 'function';
+      var cellWidth = currentWidth || width || 0;
+      var isControlled = typeof width === 'number' && typeof onResize === 'function';
 
       /**
        * in resizable mode,
        *    if width !== initialColumnWidth, use current column width and update cache.
        */
-      if (resizable && (initialColumnWidth || _width) && initialColumnWidth !== _width) {
+      if (resizable && (initialColumnWidth || width) && initialColumnWidth !== width) {
         // initial or update initialColumnWidth cache.
-        initialColumnWidths.current[cellWidthId] = _width;
+        initialColumnWidths.current[cellWidthId] = width;
         /**
          * if currentWidth exist, update columnWidths cache.
          */
         if (currentWidth) {
-          columnWidths.current[cellWidthId] = _width;
+          columnWidths.current[cellWidthId] = width;
           // update cellWidth
-          cellWidth = _width;
+          cellWidth = width;
         }
       }
       if (tableWidth.current && flexGrow && totalFlexGrow) {
@@ -193,7 +193,7 @@ var useCellDescriptor = function useCellDescriptor(props) {
         left: left,
         headerHeight: headerHeight,
         key: index,
-        width: isControlled ? _width : cellWidth,
+        width: isControlled ? width : cellWidth,
         height: typeof rowHeight === 'function' ? rowHeight() : rowHeight,
         firstColumn: index === 0,
         lastColumn: index === count - 1
@@ -220,9 +220,9 @@ var useCellDescriptor = function useCellDescriptor(props) {
             onColumnResizeMove: handleColumnResizeMove
           });
         }
-        headerCells.push( /*#__PURE__*/React.cloneElement(headerCell, _extends({}, cellProps, headerCellProps)));
+        headerCells.push(/*#__PURE__*/React.cloneElement(headerCell, _extends({}, cellProps, headerCellProps)));
       }
-      bodyCells.push( /*#__PURE__*/React.cloneElement(cell, cellProps));
+      bodyCells.push(/*#__PURE__*/React.cloneElement(cell, cellProps));
       left += cellWidth;
     }
   });

package/es/utils/useClassNames.js

@@ -5,7 +5,9 @@ import TableContext from '../TableContext';
 
 // This is the only way I found to break circular references between ClassArray and ClassValue
 // https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
+
 //eslint-disable-line @typescript-eslint/no-empty-interface
+
 /**
  * Add a prefix to all classNames.
  *