qbs-react-grid 1.2.0 → 1.2.2

package/es/qbsTable/TableCardList.js

@@ -0,0 +1,564 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Cell from '../Cell';
+import Column from '../Column';
+import ColumnGroup from '../ColumnGroup';
+import HeaderCell from '../HeaderCell';
+import Pagination from '../Pagination';
+import Table from '../Table';
+import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
+import ToolBar from './Toolbar';
+import ColumToggle from './utilities/ColumShowHide';
+import debounce from './utilities/debounce';
+import { deepEqual } from './utilities/deepEqual';
+import NoData from './utilities/empty';
+import { SettingsIcon } from './utilities/icons';
+
+// import 'qbs-react-table/dist/css/qbs-react-grid.css';
+
+import '../../dist/css/qbs-react-grid.css';
+var CHECKBOX_LINE_HEIGHT = '36px';
+var COLUMN_WIDTH = 250;
+var QbsTable = function QbsTable(_ref) {
+  var _Object$keys;
+  var handleColumnSort = _ref.handleColumnSort,
+    data = _ref.data,
+    propColumn = _ref.columns,
+    sortColumn = _ref.sortColumn,
+    sortType = _ref.sortType,
+    _ref$selection = _ref.selection,
+    selection = _ref$selection === void 0 ? false : _ref$selection,
+    onSelect = _ref.onSelect,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? 'My Tabl' : _ref$title,
+    _ref$search = _ref.search,
+    search = _ref$search === void 0 ? false : _ref$search,
+    asyncSearch = _ref.asyncSearch,
+    searchValue = _ref.searchValue,
+    onSearch = _ref.onSearch,
+    handleSearchValue = _ref.handleSearchValue,
+    _ref$paginationProps = _ref.paginationProps,
+    paginationProps = _ref$paginationProps === void 0 ? {} : _ref$paginationProps,
+    _ref$pagination = _ref.pagination,
+    pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+    _ref$cellBordered = _ref.cellBordered,
+    cellBordered = _ref$cellBordered === void 0 ? false : _ref$cellBordered,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    minHeight = _ref.minHeight,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 630 : _ref$height,
+    onExpandChange = _ref.onExpandChange,
+    wordWrap = _ref.wordWrap,
+    _ref$dataRowKey = _ref.dataRowKey,
+    dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
+    defaultExpandAllRows = _ref.defaultExpandAllRows,
+    handleRowExpanded = _ref.handleRowExpanded,
+    _ref$shouldUpdateScro = _ref.shouldUpdateScroll,
+    shouldUpdateScroll = _ref$shouldUpdateScro === void 0 ? false : _ref$shouldUpdateScro,
+    _ref$rowExpand = _ref.rowExpand,
+    rowExpand = _ref$rowExpand === void 0 ? false : _ref$rowExpand,
+    _ref$actionProps = _ref.actionProps,
+    actionProps = _ref$actionProps === void 0 ? [] : _ref$actionProps,
+    theme = _ref.theme,
+    handleMenuActions = _ref.handleMenuActions,
+    onRowClick = _ref.onRowClick,
+    expandedRowKeys = _ref.expandedRowKeys,
+    setExpandedRowKeys = _ref.setExpandedRowKeys,
+    primaryFilter = _ref.primaryFilter,
+    advancefilter = _ref.advancefilter,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    toolbar = _ref.toolbar,
+    _ref$columnToggle = _ref.columnToggle,
+    columnToggle = _ref$columnToggle === void 0 ? true : _ref$columnToggle,
+    handleColumnToggle = _ref.handleColumnToggle,
+    tableHeaderActions = _ref.tableHeaderActions,
+    isLoading = _ref.isLoading,
+    selectedRowActions = _ref.selectedRowActions,
+    handleResetColumns = _ref.handleResetColumns,
+    selectedRows = _ref.selectedRows,
+    _ref$headerHeight = _ref.headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 40 : _ref$headerHeight,
+    tableBodyHeight = _ref.tableBodyHeight,
+    customRowStatus = _ref.customRowStatus,
+    searchPlaceholder = _ref.searchPlaceholder,
+    _ref$rowExpandedHeigh = _ref.rowExpandedHeight,
+    rowExpandedHeight = _ref$rowExpandedHeigh === void 0 ? 317 : _ref$rowExpandedHeigh,
+    renderSortIcon = _ref.renderSortIcon,
+    _ref$tableKey = _ref.tableKey,
+    tableKey = _ref$tableKey === void 0 ? 'parent' : _ref$tableKey,
+    _renderEmpty = _ref.renderEmpty,
+    autoHeight = _ref.autoHeight,
+    emptySubTitle = _ref.emptySubTitle,
+    emptyTitle = _ref.emptyTitle;
+  var _useState = useState(false),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  var _useState2 = useState(propColumn),
+    columns = _useState2[0],
+    setColumns = _useState2[1];
+  var _useState3 = useState([]),
+    checkedKeys = _useState3[0],
+    setCheckedKeys = _useState3[1];
+  var dataTheme = useMemo(function () {
+    var _localStorage$getItem;
+    return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
+  }, [theme]);
+  var _useState4 = useState(false),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var prevColumns = useRef();
+  var tableBodyRef = useRef(null);
+  var handleSortColumn = useCallback(function (sortColumn, sortType) {
+    setLoading(true);
+    setTimeout(function () {
+      setLoading(false);
+      handleColumnSort === null || handleColumnSort === void 0 ? void 0 : handleColumnSort(sortColumn, sortType);
+    }, 500);
+  }, [handleColumnSort]);
+  useEffect(function () {
+    if (selectedRows) {
+      setCheckedKeys(selectedRows != null ? selectedRows : []);
+    } else {
+      setCheckedKeys([]);
+    }
+  }, [selectedRows]);
+  var handleChecked = debounce(function (keys) {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(keys);
+  }, 500);
+  var handleCheckAll = useCallback(function (event) {
+    var keys = event.target.checked ? data.map(function (item) {
+      return item.id;
+    }) : [];
+    //  let updatedKeys = [...keys];
+    //  if (checkedKeys) {
+    //    updatedKeys = [...checkedKeys, ...updatedKeys];
+    //  } TODO => previous bug fix removed this section
+    var updatedKeys = [].concat(keys);
+    setCheckedKeys(updatedKeys);
+    handleChecked(updatedKeys);
+  }, [data]);
+  var handleCheck = useCallback(function (event) {
+    var value = event.target.value;
+    if (value !== undefined) {
+      var updatedKeys = event.target.checked ? [].concat(checkedKeys, [value]) : checkedKeys.filter(function (key) {
+        return key !== value;
+      });
+      setCheckedKeys(updatedKeys);
+      handleChecked(updatedKeys);
+    }
+  }, [checkedKeys]);
+  var handleToggle = useCallback(function (columnName) {
+    var lastVisibleColumn = null;
+    var visibleCount = 0;
+    var updatedColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (col) {
+      // Toggle visibility for the matched column
+      if (col.title === columnName) {
+        col = _extends({}, col, {
+          isVisible: !col.isVisible
+        });
+      }
+      if (col.isVisible) {
+        lastVisibleColumn = col;
+        visibleCount++;
+      }
+      return col;
+    });
+    if (visibleCount > 0 && lastVisibleColumn) {
+      updatedColumns.forEach(function (col) {
+        var _lastVisibleColumn;
+        if (col.field === ((_lastVisibleColumn = lastVisibleColumn) === null || _lastVisibleColumn === void 0 ? void 0 : _lastVisibleColumn.field) && col.title === lastVisibleColumn.title) {
+          col.resizable = false;
+        } else {
+          col.resizable = true;
+        }
+      });
+    }
+    setColumns(updatedColumns);
+  }, [columns]);
+  var handleColumnWidth = useCallback(function (newWidth, dataKey) {
+    if (newWidth === undefined || dataKey === undefined) return;
+    setColumns(function (prevColumns) {
+      return prevColumns.map(function (column) {
+        return column.field === dataKey ? _extends({}, column, {
+          colWidth: newWidth
+        }) : column;
+      });
+    });
+  }, []);
+  useEffect(function () {
+    if (wordWrap === 'fit-content') {
+      setColumns(function (prevColumns) {
+        return prevColumns.map(function (column) {
+          return column.field ? _extends({}, column, {
+            colWidth: calculateWidth(column.field)
+          }) : column;
+        });
+      });
+    }
+  }, [wordWrap]);
+  var onReorder = useCallback(function (columns) {
+    setColumns(columns);
+  }, []);
+
+  // useEffect(() => {
+  // }, [columns]);
+
+  var handleClear = function handleClear(_ref2) {
+    setCheckedKeys([]);
+    handleChecked([]);
+  };
+  var toolbarProps = {
+    title: title,
+    search: search,
+    searchValue: searchValue,
+    pagination: pagination,
+    onSearch: onSearch,
+    handleSearchValue: handleSearchValue,
+    asyncSearch: asyncSearch,
+    paginationProps: paginationProps,
+    primaryFilter: primaryFilter,
+    advancefilter: advancefilter,
+    className: classes === null || classes === void 0 ? void 0 : classes.toolbarClass,
+    handleToggle: handleToggle,
+    onReorder: onReorder,
+    columnToggle: columnToggle,
+    columns: columns,
+    checkedKeys: checkedKeys,
+    tableHeaderActions: tableHeaderActions,
+    selectedRowActions: selectedRowActions,
+    onSelect: handleClear,
+    handleColumnToggle: handleColumnToggle,
+    dataLength: data === null || data === void 0 ? void 0 : data.length,
+    searchPlaceholder: searchPlaceholder
+  };
+  var themeToggle = useMemo(function () {
+    return document.getElementById('themeToggle');
+  }, []);
+  useEffect(function () {
+    var handleThemeToggle = function handleThemeToggle() {
+      if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
+        document.body.setAttribute('data-theme', 'dark');
+      } else {
+        document.body.removeAttribute('data-theme');
+      }
+    };
+    var handleDOMContentLoaded = function handleDOMContentLoaded() {
+      if (localStorage.getItem('theme') === 'dark') {
+        document.body.setAttribute('data-theme', 'dark');
+        if (themeToggle) {
+          themeToggle.checked = true;
+        }
+      }
+    };
+    themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.addEventListener('change', handleThemeToggle);
+    document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
+    return function () {
+      themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
+      document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
+    };
+  }, [themeToggle]);
+  var handleExpanded = useCallback(function (rowData) {
+    console.log(rowData);
+    var keyValue = dataRowKey;
+    var key = rowData[keyValue];
+    var nextExpandedRowKeys = new Set(expandedRowKeys);
+    if (nextExpandedRowKeys.has(key)) {
+      nextExpandedRowKeys["delete"](key);
+    } else {
+      nextExpandedRowKeys.add(key);
+    }
+    setExpandedRowKeys === null || setExpandedRowKeys === void 0 ? void 0 : setExpandedRowKeys(Array.from(nextExpandedRowKeys));
+  }, [dataRowKey, expandedRowKeys, setExpandedRowKeys]);
+  var calculateWidth = function calculateWidth(str, fontSize, characterWidth) {
+    if (fontSize === void 0) {
+      fontSize = 8;
+    }
+    if (characterWidth === void 0) {
+      characterWidth = 1;
+    }
+    var result = findLargestCell(str) * fontSize * characterWidth;
+    return result > 60 ? result : 60;
+  };
+  function findLargestCell(columnTitle) {
+    var largestCellLength = 0;
+    data.forEach(function (row) {
+      if (row[columnTitle] && String(row[columnTitle]).length > largestCellLength) {
+        largestCellLength = String(row[columnTitle]).length;
+      }
+    });
+    return largestCellLength;
+  }
+  var handleColumnsResizable = useCallback(function () {
+    var _filteredColumns$leng;
+    var filteredColumns = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
+      return item.isVisible;
+    });
+    var length = (_filteredColumns$leng = filteredColumns === null || filteredColumns === void 0 ? void 0 : filteredColumns.length) != null ? _filteredColumns$leng : 0;
+    var lastVisibleColumn = filteredColumns[length - 1];
+    var reColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (item) {
+      return (item === null || item === void 0 ? void 0 : item.field) === (lastVisibleColumn === null || lastVisibleColumn === void 0 ? void 0 : lastVisibleColumn.field) ? _extends({}, item, {
+        resizable: false
+      }) : item;
+    });
+    setColumns(reColumns);
+  }, [columns]);
+  useEffect(function () {
+    setColumns(propColumn);
+  }, [propColumn]);
+  useEffect(function () {
+    if (!deepEqual(columns, prevColumns.current)) {
+      handleColumnsResizable();
+    }
+    prevColumns.current = columns;
+  }, [columns, handleColumnsResizable]);
+  var findGrouped = function findGrouped() {
+    return columns !== null && columns !== void 0 && columns.find(function (item) {
+      return item.grouped;
+    }) ? true : false;
+  };
+  var columnsRendered = useMemo(function () {
+    return (columns != null ? columns : []).map(function (_ref3) {
+      var title = _ref3.title,
+        field = _ref3.field,
+        resizable = _ref3.resizable,
+        sortable = _ref3.sortable,
+        colWidth = _ref3.colWidth,
+        align = _ref3.align,
+        grouped = _ref3.grouped,
+        groupHeader = _ref3.groupHeader,
+        fixed = _ref3.fixed,
+        children = _ref3.children,
+        customCell = _ref3.customCell,
+        renderCell = _ref3.renderCell,
+        isVisible = _ref3.isVisible,
+        link = _ref3.link,
+        getPath = _ref3.getPath,
+        rowClick = _ref3.rowClick,
+        sortKey = _ref3.sortKey,
+        type = _ref3.type,
+        hideLink = _ref3.hideLink;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && /*#__PURE__*/React.createElement(React.Fragment, null, grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
+        header: groupHeader,
+        fixed: fixed,
+        align: align,
+        verticalAlign: "middle",
+        groupHeaderHeight: 40
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, children === null || children === void 0 ? void 0 : children.map(function (child) {
+        var _child$colWidth;
+        return /*#__PURE__*/React.createElement(Column, {
+          key: child.title,
+          sortable: child.sortable,
+          width: (_child$colWidth = child.colWidth) != null ? _child$colWidth : COLUMN_WIDTH,
+          resizable: child.resizable,
+          align: child.align,
+          onResize: handleColumnWidth,
+          fixed: child.fixed
+        }, /*#__PURE__*/React.createElement(HeaderCell, {
+          dataTheme: dataTheme,
+          verticalAlign: 'middle',
+          className: " " + classes.headerClass,
+          sortKey: child.sortKey,
+          renderSortIcon: renderSortIcon
+        }, child.title), child.customCell || child.link ? /*#__PURE__*/React.createElement(CustomTableCell, {
+          renderCell: child.renderCell,
+          dataKey: child.field,
+          dataTheme: dataTheme,
+          type: child.type,
+          path: child.getPath,
+          link: child.link
+        }) : /*#__PURE__*/React.createElement(Cell, {
+          className: " " + classes.cellClass,
+          dataKey: child.field,
+          dataTheme: dataTheme
+        }));
+      }))) : /*#__PURE__*/React.createElement(Column, {
+        key: title,
+        sortable: sortable,
+        width: colWidth != null ? colWidth : COLUMN_WIDTH,
+        resizable: resizable,
+        align: align,
+        fixed: fixed,
+        onResize: handleColumnWidth
+      }, /*#__PURE__*/React.createElement(HeaderCell, {
+        dataTheme: dataTheme,
+        verticalAlign: findGrouped() ? 'middle' : undefined,
+        className: " " + classes.headerClass,
+        sortKey: sortKey,
+        renderSortIcon: renderSortIcon
+      }, title), customCell || link ? /*#__PURE__*/React.createElement(CustomTableCell, {
+        renderCell: renderCell,
+        dataKey: field,
+        rowClick: rowClick,
+        type: type,
+        hideLink: hideLink,
+        path: getPath,
+        dataTheme: dataTheme,
+        link: link
+      }) : /*#__PURE__*/React.createElement(Cell, {
+        dataKey: field,
+        dataTheme: dataTheme,
+        className: " " + classes.cellClass
+      }))));
+    });
+  }, [columns, dataTheme]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "qbs-table " + classes.tableContainerClass,
+    "data-theme": dataTheme
+  }, toolbar && /*#__PURE__*/React.createElement(ToolBar, toolbarProps), /*#__PURE__*/React.createElement("div", {
+    className: "qbs-table-border-wrap"
+  }, /*#__PURE__*/React.createElement(Table, {
+    height: autoHeight ? undefined : height,
+    key: tableKey,
+    tableKey: tableKey,
+    data: data,
+    tableBodyRef: tableBodyRef,
+    dataTheme: dataTheme,
+    wordWrap: wordWrap,
+    autoHeight: autoHeight,
+    sortColumn: sortColumn,
+    style: {
+      position: 'relative'
+    },
+    sortType: sortType,
+    onSortColumn: handleSortColumn,
+    onRowClick: onRowClick,
+    tableBodyHeight: tableBodyHeight,
+    cellBordered: cellBordered,
+    bordered: bordered,
+    renderEmpty: function renderEmpty(info) {
+      return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
+        title: emptyTitle != null ? emptyTitle : 'No Data Found',
+        subtitle: emptySubTitle
+      });
+    },
+    columns: columns,
+    minHeight: minHeight,
+    headerHeight: headerHeight,
+    rowExpandedHeight: rowExpandedHeight,
+    loading: isLoading != null ? isLoading : loading,
+    showHeader: true,
+    defaultChecked: true,
+    expandedRowKeys: expandedRowKeys,
+    onExpandChange: onExpandChange,
+    rowKey: dataRowKey != null ? dataRowKey : 'id',
+    defaultExpandAllRows: defaultExpandAllRows,
+    shouldUpdateScroll: shouldUpdateScroll,
+    renderRowExpanded: function renderRowExpanded(rowData) {
+      return handleRowExpanded === null || handleRowExpanded === void 0 ? void 0 : handleRowExpanded(rowData);
+    }
+  }, rowExpand && /*#__PURE__*/React.createElement(Column, {
+    width: 70,
+    align: "center",
+    fixed: "left"
+  }, /*#__PURE__*/React.createElement(HeaderCell, {
+    verticalAlign: findGrouped() ? 'middle' : undefined,
+    className: " " + classes.headerlClass,
+    renderSortIcon: renderSortIcon
+  }, "#"), /*#__PURE__*/React.createElement(ExpandCell, {
+    dataKey: dataRowKey,
+    expandedRowKeys: expandedRowKeys,
+    onChange: handleExpanded
+  })), selection && /*#__PURE__*/React.createElement(Column, {
+    width: 50,
+    align: "center",
+    fixed: "left"
+  }, /*#__PURE__*/React.createElement(HeaderCell, {
+    style: {
+      padding: 0
+    },
+    verticalAlign: findGrouped() ? 'middle' : undefined,
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon,
+    className: "qbs-checkbox-border-none " + classes.headerlClass
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      lineHeight: CHECKBOX_LINE_HEIGHT
+    },
+    className: "qbs-table-checkbox " + classes.selectionCell
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    onChange: handleCheckAll,
+    id: 'checkbox-all',
+    className: "qbs-table-checkbox-input " + classes.tableCheckBoxClass,
+    checked: (data === null || data === void 0 ? void 0 : data.length) > 0 && data.every(function (item) {
+      return checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.includes(item.id);
+    })
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: 'checkbox-all'
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "8",
+    height: "6",
+    viewBox: "0 0 8 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z",
+    fill: "white"
+  }))))), /*#__PURE__*/React.createElement(CheckCell, {
+    dataKey: "id",
+    checkedKeys: checkedKeys,
+    className: "" + classes.tableCheckBoxClass,
+    onChange: handleCheck,
+    dataTheme: dataTheme
+  })), customRowStatus && ((_Object$keys = Object.keys(customRowStatus)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) > 0 && /*#__PURE__*/React.createElement(Column, {
+    width: 50,
+    align: "center",
+    fixed: "left"
+  }, /*#__PURE__*/React.createElement(HeaderCell, {
+    verticalAlign: findGrouped() ? 'middle' : undefined,
+    className: " " + classes.headerlClass,
+    renderSortIcon: renderSortIcon
+  }, ' '), /*#__PURE__*/React.createElement(CustomRowStatus, {
+    getIcon: customRowStatus.getIcon,
+    dataKey: customRowStatus.field,
+    rowClick: customRowStatus.onClick,
+    path: customRowStatus.getPath,
+    link: customRowStatus.link,
+    getToolTip: customRowStatus.getToolTip
+  })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/React.createElement(Column, {
+    width: 40,
+    fixed: "right"
+  }, /*#__PURE__*/React.createElement(HeaderCell, {
+    verticalAlign: findGrouped() ? 'middle' : undefined,
+    className: " " + classes.headerlClass,
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon
+  }, /*#__PURE__*/React.createElement(ColumToggle, {
+    columns: columns,
+    onToggle: handleToggle,
+    onReorder: onReorder,
+    isOpen: isOpen,
+    tableHeight: height,
+    setIsOpen: setIsOpen,
+    handleResetColumns: handleResetColumns,
+    handleColumnToggle: handleColumnToggle
+  })), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
+    width: 40,
+    fixed: "right"
+  }, /*#__PURE__*/React.createElement(HeaderCell, {
+    verticalAlign: findGrouped() ? 'middle' : undefined,
+    className: " " + classes.headerlClass,
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon
+  }, !columnToggle ? /*#__PURE__*/React.createElement(SettingsIcon, null) : /*#__PURE__*/React.createElement(ColumToggle, {
+    columns: columns,
+    onToggle: handleToggle,
+    tableHeight: height,
+    onReorder: onReorder,
+    isOpen: isOpen,
+    setIsOpen: setIsOpen,
+    handleResetColumns: handleResetColumns,
+    handleColumnToggle: handleColumnToggle
+  })), /*#__PURE__*/React.createElement(ActionCell, {
+    tableBodyRef: tableBodyRef,
+    actionProps: actionProps,
+    className: classes.cellClass + " " + classes.actionCellClass,
+    handleMenuActions: handleMenuActions,
+    dataTheme: dataTheme
+  }))), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
+    paginationProps: paginationProps
+  }))));
+};
+export default QbsTable;

package/es/qbsTable/Toolbar.js

@@ -2,6 +2,8 @@ import React, { useCallback, useState } from 'react';
 import debounce from './utilities/debounce';
 import SearchInput from './utilities/SearchInput';
 import { getRowDisplayRange } from './utilities/tablecalc';
+import TooltipComponent from './utilities/ToolTip';
+import { CardIcon, TableIcon } from './utilities/icons';
 var ToolBar = function ToolBar(_ref) {
   var _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
   var pagination = _ref.pagination,
@@ -20,7 +22,11 @@ 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],
@@ -66,7 +72,15 @@ var ToolBar = function ToolBar(_ref) {
     searchValue: searchParam
   }), primaryFilter)), /*#__PURE__*/React.createElement("div", {
     className: "end-container"
-  }, tableHeaderActions)), advancefilter && /*#__PURE__*/React.createElement("div", {
+  }, tableHeaderActions, /*#__PURE__*/React.createElement("div", {
+    className: " pr-1 cursor-pointer",
+    onClick: function onClick() {
+      return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(!tableViewToggle);
+    }
+  }, !enableTableToggle && /*#__PURE__*/React.createElement(TooltipComponent, {
+    enabled: true,
+    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

@@ -42,6 +42,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 +119,8 @@ export interface QbsTableProps {
     renderEmpty?: (info: React.ReactNode) => React.ReactNode;
     emptySubTitle?: string;
     emptyTitle?: string;
+    enableTableToggle?: boolean;
+    tableView?: boolean;
 }
 export interface QbsTableToolbarProps {
     title?: string;
@@ -140,6 +145,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,12 @@
+import React from 'react';
+import { QbsColumnProps } from '../commontypes';
+type Props = {
+    columns: QbsColumnProps[];
+    data: any;
+    tableBodyRef: any;
+    actionProps?: any;
+    index?: number;
+    handleMenuActions?: () => void;
+};
+declare const CardComponent: React.FC<Props>;
+export default CardComponent;