qbs-react-grid 1.2.1 → 1.2.3

package/src/less/qbs-table.less

@@ -180,16 +180,77 @@
   transition: all 0.2s ease;
 }
 /* Tooltip container */
+// .qbs-table-tooltip {
+//   position: relative;
+//   display: contents;
+//   cursor: pointer;
+// }
+
+// .qbs-table-tooltip .tooltiptext {
+//   visibility: hidden;
+//   background-color: #000;
+//   color: #fff;
+//   text-align: center;
+//   padding: 6px;
+//   border-radius: 4px;
+//   position: absolute;
+//   z-index: 9999;
+//   opacity: 0;
+//   transition: opacity 0.3s;
+//   font-size: 12px;
+//   font-style: normal;
+//   font-weight: 400;
+//   line-height: 16px;
+//   width: 100px;
+// }
+
+// .qbs-table-tooltip.up .tooltiptext {
+//   bottom: 125%;
+//   left: 0%;
+// }
+
+// .qbs-table-tooltip.down .tooltiptext {
+//   top: 125%;
+//   right: 0px;
+//   left: auto;
+// }
+
+// .qbs-table-tooltip:hover .tooltiptext {
+//   visibility: visible;
+//   opacity: 1;
+// }
+
+// .qbs-table-tooltip .tooltiptext::after {
+//   content: '';
+//   position: absolute;
+//   border-width: 5px;
+//   border-style: solid;
+// }
+
+// .qbs-table-tooltip.up .tooltiptext::after {
+//   top: 100%;
+//   left: 50%;
+//   margin-left: -5px;
+//   border-color: #000 transparent transparent transparent;
+// }
+
+// .qbs-table-tooltip.down .tooltiptext::after {
+//   bottom: 100%;
+//   left: 50%;
+//   margin-left: -5px;
+//   border-color: transparent transparent #000 transparent;
+// }
 .qbs-table-tooltip {
-  position: relative;
-  display: contents;
   cursor: pointer;
+  position: relative;
+  width: auto;
+  display: flex;
 }
 
 .qbs-table-tooltip .tooltiptext {
   visibility: hidden;
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
   text-align: center;
   padding: 6px;
   border-radius: 4px;
@@ -205,20 +266,20 @@
 }
 
 .qbs-table-tooltip.up .tooltiptext {
-  bottom: 125%;
-  left: 0%;
+  bottom: calc(100% + 10px);
+  right: -8px;
+  left: unset;
 }
 
 .qbs-table-tooltip.down .tooltiptext {
-  top: 125%;
-  right: 0px;
-  left: auto;
+  right: -10px;
+  top: calc(100% + 8px);
 }
 
-.qbs-table-tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
+// .qbs-table-tooltip:hover .tooltiptext {
+//   visibility: visible;
+//   opacity: 1;
+// }
 
 .qbs-table-tooltip .tooltiptext::after {
   content: '';
@@ -228,19 +289,25 @@
 }
 
 .qbs-table-tooltip.up .tooltiptext::after {
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-color: #000 transparent transparent transparent;
+  border-color: black transparent transparent !important;
+  right: 12px !important;
+  margin-left: -5px !important;
+  top: 100% !important;
+  left: unset !important;
 }
 
 .qbs-table-tooltip.down .tooltiptext::after {
-  bottom: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-color: transparent transparent #000 transparent;
+  border-color: transparent transparent black;
+  bottom: 100% !important;
+  right: 12px !important;
+  margin-left: -5px !important;
+  left: unset !important;
+}
+.qbs-table-tooltip.down .tooltiptext {
+  top: 145% !important;
+  right: -10px !important;
+  left: auto !important;
 }
-
 .rs-table-row {
   overflow: visible !important;
 }

package/src/qbsTable/QbsTable.tsx

@@ -18,12 +18,13 @@ 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';
-import NoData from './utilities/empty';
+import CardComponent from './utilities/CardComponent';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 const COLUMN_WIDTH = 250;
@@ -81,7 +82,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
   renderEmpty,
   autoHeight,
   emptySubTitle,
-  emptyTitle
+  emptyTitle,
+  tableView = true,
+  enableTableToggle = false,
+  cardColumLimit = 5,
+  childDetailHeading = ''
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -89,6 +94,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const dataTheme = useMemo(() => localStorage.getItem('theme') ?? theme, [theme]);
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>();
+  const [tableViewToggle, setTableViewToggle] = useState(tableView);
+
   const tableBodyRef = useRef<HTMLDivElement>(null);
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
@@ -115,7 +122,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const handleCheckAll = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const keys = event.target.checked ? data.map(item => item.id) : [];
-      let updatedKeys = [...keys];
+      //  let updatedKeys = [...keys];
+      //  if (checkedKeys) {
+      //    updatedKeys = [...checkedKeys, ...updatedKeys];
+      //  } TODO => previous bug fix removed this section
+      const updatedKeys = [...keys];
       setCheckedKeys(updatedKeys);
       handleChecked(updatedKeys);
     },
@@ -126,7 +137,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const value = event.target.value;
       if (value !== undefined) {
-        let updatedKeys = event.target.checked
+        const updatedKeys = event.target.checked
           ? [...checkedKeys, value]
           : checkedKeys.filter(key => key !== value);
         setCheckedKeys(updatedKeys);
@@ -222,7 +233,10 @@ const QbsTable: React.FC<QbsTableProps> = ({
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
     dataLength: data?.length,
-    searchPlaceholder: searchPlaceholder
+    searchPlaceholder: searchPlaceholder,
+    setTableViewToggle: setTableViewToggle,
+    tableViewToggle: tableViewToggle,
+    enableTableToggle: enableTableToggle
   };
   const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
@@ -259,7 +273,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
       const keyValue = dataRowKey as string;
       const key = rowData[keyValue];
 
-      let nextExpandedRowKeys = new Set(expandedRowKeys);
+      const nextExpandedRowKeys = new Set(expandedRowKeys);
 
       if (nextExpandedRowKeys.has(key)) {
         nextExpandedRowKeys.delete(key);
@@ -436,129 +450,154 @@ const QbsTable: React.FC<QbsTableProps> = ({
     <div className={`qbs-table ${classes.tableContainerClass}`} data-theme={dataTheme}>
       {toolbar && <ToolBar {...toolbarProps} />}
       <div className="qbs-table-border-wrap">
-        <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={(info: React.ReactNode) =>
-            renderEmpty ? (
-              renderEmpty(info)
-            ) : (
-              <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
-            )
-          }
-          columns={columns}
-          minHeight={minHeight}
-          headerHeight={headerHeight}
-          rowExpandedHeight={rowExpandedHeight}
-          loading={isLoading ?? loading}
-          showHeader
-          defaultChecked
-          expandedRowKeys={expandedRowKeys}
-          onExpandChange={onExpandChange}
-          rowKey={dataRowKey ?? 'id'}
-          defaultExpandAllRows={defaultExpandAllRows}
-          shouldUpdateScroll={shouldUpdateScroll}
-          renderRowExpanded={rowData => {
-            return handleRowExpanded?.(rowData);
-          }}
-        >
-          {rowExpand && (
-            <Column width={70} align="center" fixed="left">
-              <HeaderCell
-                verticalAlign={findGrouped() ? 'middle' : undefined}
-                className={` ${classes.headerlClass}`}
-                renderSortIcon={renderSortIcon}
-              >
-                #
-              </HeaderCell>
-              <ExpandCell
-                dataKey={dataRowKey}
-                expandedRowKeys={expandedRowKeys}
-                onChange={handleExpanded}
-              />
-            </Column>
-          )}
-          {selection && (
-            <Column width={50} align="center" fixed="left">
-              <HeaderCell
-                style={{ padding: 0 }}
-                verticalAlign={findGrouped() ? 'middle' : undefined}
-                dataTheme={dataTheme}
-                renderSortIcon={renderSortIcon}
-                className={`qbs-checkbox-border-none ${classes.headerlClass}`}
-              >
-                <div
-                  style={{ lineHeight: CHECKBOX_LINE_HEIGHT }}
-                  className={`qbs-table-checkbox ${classes.selectionCell}`}
+        {tableViewToggle ? (
+          <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={(info: React.ReactNode) =>
+              renderEmpty ? (
+                renderEmpty(info)
+              ) : (
+                <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
+              )
+            }
+            columns={columns}
+            minHeight={minHeight}
+            headerHeight={headerHeight}
+            rowExpandedHeight={rowExpandedHeight}
+            loading={isLoading ?? loading}
+            showHeader
+            defaultChecked
+            expandedRowKeys={expandedRowKeys}
+            onExpandChange={onExpandChange}
+            rowKey={dataRowKey ?? 'id'}
+            defaultExpandAllRows={defaultExpandAllRows}
+            shouldUpdateScroll={shouldUpdateScroll}
+            renderRowExpanded={rowData => {
+              return handleRowExpanded?.(rowData);
+            }}
+          >
+            {rowExpand && (
+              <Column width={70} align="center" fixed="left">
+                <HeaderCell
+                  verticalAlign={findGrouped() ? 'middle' : undefined}
+                  className={` ${classes.headerlClass}`}
+                  renderSortIcon={renderSortIcon}
                 >
-                  <input
-                    type="checkbox"
-                    onChange={handleCheckAll}
-                    id={`checkbox-all`}
-                    className={`qbs-table-checkbox-input ${classes.tableCheckBoxClass}`}
-                    checked={data?.length > 0 && data.every(item => checkedKeys?.includes(item.id))}
-                  />
-                  <label htmlFor={`checkbox-all`}>
-                    <svg
-                      width="8"
-                      height="6"
-                      viewBox="0 0 8 6"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
-                        fill="white"
-                      />
-                    </svg>
-                  </label>
-                </div>
-              </HeaderCell>
-              <CheckCell
-                dataKey="id"
-                checkedKeys={checkedKeys}
-                className={`${classes.tableCheckBoxClass}`}
-                onChange={handleCheck}
-                dataTheme={dataTheme}
-              />
-            </Column>
-          )}
-          {customRowStatus && Object.keys(customRowStatus)?.length > 0 && (
-            <Column width={50} align="center" fixed="left">
-              <HeaderCell
-                verticalAlign={findGrouped() ? 'middle' : undefined}
-                className={` ${classes.headerlClass}`}
-                renderSortIcon={renderSortIcon}
-              >
-                {' '}
-              </HeaderCell>
-              <CustomRowStatus
-                getIcon={customRowStatus.getIcon}
-                dataKey={customRowStatus.field}
-                rowClick={customRowStatus.onClick}
-                path={customRowStatus.getPath}
-                link={customRowStatus.link}
-                getToolTip={customRowStatus.getToolTip}
-              />
-            </Column>
-          )}
-          {columnsRendered}
-          {!actionProps ||
-            (actionProps?.length === 0 && columnToggle && (
+                  #
+                </HeaderCell>
+                <ExpandCell
+                  dataKey={dataRowKey}
+                  expandedRowKeys={expandedRowKeys}
+                  onChange={handleExpanded}
+                />
+              </Column>
+            )}
+            {selection && (
+              <Column width={50} align="center" fixed="left">
+                <HeaderCell
+                  style={{ padding: 0 }}
+                  verticalAlign={findGrouped() ? 'middle' : undefined}
+                  dataTheme={dataTheme}
+                  renderSortIcon={renderSortIcon}
+                  className={`qbs-checkbox-border-none ${classes.headerlClass}`}
+                >
+                  <div
+                    style={{ lineHeight: CHECKBOX_LINE_HEIGHT }}
+                    className={`qbs-table-checkbox ${classes.selectionCell}`}
+                  >
+                    <input
+                      type="checkbox"
+                      onChange={handleCheckAll}
+                      id={'checkbox-all'}
+                      className={`qbs-table-checkbox-input ${classes.tableCheckBoxClass}`}
+                      checked={
+                        data?.length > 0 && data.every(item => checkedKeys?.includes(item.id))
+                      }
+                    />
+                    <label htmlFor={'checkbox-all'}>
+                      <svg
+                        width="8"
+                        height="6"
+                        viewBox="0 0 8 6"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
+                          fill="white"
+                        />
+                      </svg>
+                    </label>
+                  </div>
+                </HeaderCell>
+                <CheckCell
+                  dataKey="id"
+                  checkedKeys={checkedKeys}
+                  className={`${classes.tableCheckBoxClass}`}
+                  onChange={handleCheck}
+                  dataTheme={dataTheme}
+                />
+              </Column>
+            )}
+            {customRowStatus && Object.keys(customRowStatus)?.length > 0 && (
+              <Column width={50} align="center" fixed="left">
+                <HeaderCell
+                  verticalAlign={findGrouped() ? 'middle' : undefined}
+                  className={` ${classes.headerlClass}`}
+                  renderSortIcon={renderSortIcon}
+                >
+                  {' '}
+                </HeaderCell>
+                <CustomRowStatus
+                  getIcon={customRowStatus.getIcon}
+                  dataKey={customRowStatus.field}
+                  rowClick={customRowStatus.onClick}
+                  path={customRowStatus.getPath}
+                  link={customRowStatus.link}
+                  getToolTip={customRowStatus.getToolTip}
+                />
+              </Column>
+            )}
+            {columnsRendered}
+            {!actionProps ||
+              (actionProps?.length === 0 && columnToggle && (
+                <Column width={40} fixed="right">
+                  <HeaderCell
+                    verticalAlign={findGrouped() ? 'middle' : undefined}
+                    className={` ${classes.headerlClass}`}
+                    dataTheme={dataTheme}
+                    renderSortIcon={renderSortIcon}
+                  >
+                    <ColumToggle
+                      columns={columns}
+                      onToggle={handleToggle}
+                      onReorder={onReorder}
+                      isOpen={isOpen}
+                      tableHeight={height}
+                      setIsOpen={setIsOpen}
+                      handleResetColumns={handleResetColumns}
+                      handleColumnToggle={handleColumnToggle}
+                    />
+                  </HeaderCell>
+                  <Cell />
+                </Column>
+              ))}
+            {actionProps && actionProps?.length > 0 && (
               <Column width={40} fixed="right">
                 <HeaderCell
                   verticalAlign={findGrouped() ? 'middle' : undefined}
@@ -566,54 +605,47 @@ const QbsTable: React.FC<QbsTableProps> = ({
                   dataTheme={dataTheme}
                   renderSortIcon={renderSortIcon}
                 >
-                  <ColumToggle
-                    columns={columns}
-                    onToggle={handleToggle}
-                    onReorder={onReorder}
-                    isOpen={isOpen}
-                    tableHeight={height}
-                    setIsOpen={setIsOpen}
-                    handleResetColumns={handleResetColumns}
-                    handleColumnToggle={handleColumnToggle}
-                  />
+                  {!columnToggle ? (
+                    <SettingsIcon />
+                  ) : (
+                    <ColumToggle
+                      columns={columns}
+                      onToggle={handleToggle}
+                      tableHeight={height}
+                      onReorder={onReorder}
+                      isOpen={isOpen}
+                      setIsOpen={setIsOpen}
+                      handleResetColumns={handleResetColumns}
+                      handleColumnToggle={handleColumnToggle}
+                    />
+                  )}
                 </HeaderCell>
-                <Cell />
+                <ActionCell
+                  tableBodyRef={tableBodyRef}
+                  actionProps={actionProps}
+                  className={`${classes.cellClass} ${classes.actionCellClass}`}
+                  handleMenuActions={handleMenuActions}
+                  dataTheme={dataTheme}
+                />
               </Column>
+            )}
+          </Table>
+        ) : (
+          <div className=" p-2">
+            {data.map((items: any) => (
+              <div className="flex flex-col gap-3 p-2" key={items?.id}>
+                <CardComponent
+                  data={items}
+                  cardColumLimit={cardColumLimit}
+                  childDetailHeading={childDetailHeading}
+                  columns={columns}
+                  tableBodyRef={tableBodyRef}
+                  actionProps={actionProps}
+                />
+              </div>
             ))}
-          {actionProps && actionProps?.length > 0 && (
-            <Column width={40} fixed="right">
-              <HeaderCell
-                verticalAlign={findGrouped() ? 'middle' : undefined}
-                className={` ${classes.headerlClass}`}
-                dataTheme={dataTheme}
-                renderSortIcon={renderSortIcon}
-              >
-                {!columnToggle ? (
-                  <SettingsIcon />
-                ) : (
-                  <ColumToggle
-                    columns={columns}
-                    onToggle={handleToggle}
-                    tableHeight={height}
-                    onReorder={onReorder}
-                    isOpen={isOpen}
-                    setIsOpen={setIsOpen}
-                    handleResetColumns={handleResetColumns}
-                    handleColumnToggle={handleColumnToggle}
-                  />
-                )}
-              </HeaderCell>
-              <ActionCell
-                tableBodyRef={tableBodyRef}
-                actionProps={actionProps}
-                className={`${classes.cellClass} ${classes.actionCellClass}`}
-                handleMenuActions={handleMenuActions}
-                dataTheme={dataTheme}
-              />
-            </Column>
-          )}
-        </Table>
-
+          </div>
+        )}
         <div>
           {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
         </div>