qbs-react-grid 2.2.4 → 2.2.5

package/src/less/qbs-table.less

@@ -104,156 +104,52 @@
   }
 }
 .qbs-table[data-theme='dark'] {
-  background-color: #1f1f1f;
-  color: #f5f5f5;
+  background-color: #333333;
+  color: #ffffff;
 
-  .qbs-table-border-wrap {
-    border-color: #3d3d3d;
-    background: #262626;
-  }
-
-  .qbs-table-toolbar-container,
-  .qbs-table-toolbar,
-  .qbs-table-toolbar-sub-container,
-  .sub-qbs-table-toolbar {
-    color: #f5f5f5;
-  }
-
-  .qbs-table-search-container {
-    .input {
-      border-color: #4a4a4a;
-      background: #2d2d2d;
-      color: #f5f5f5;
-
-      &:hover,
-      &:focus {
-        border-color: #6b6b6b;
-        background: #2d2d2d;
-      }
-    }
-
-    .search-button,
-    .close-button {
-      color: #d1d1d1;
-      background-color: transparent;
-    }
-  }
-
-  .qbs-table-column-popup,
-  .qbs-table-popup-container {
-    background: #2d2d2d;
-    color: #f5f5f5;
-    border-color: #4a4a4a;
-  }
-
-  .qbs-table-popup-label,
-  .qbs-table-popup-value,
-  .qbs-table-reset-link {
-    color: #f5f5f5;
-  }
-
-  .qbs-table-custom-pagination,
-  .qbs-table-pagination-text,
-  .rows-count {
-    color: #f5f5f5;
-  }
-
-  .qbs-table-icon-container svg path {
-    stroke: #e5e5e5;
-  }
-
-  .custom-select-trigger,
-  .custom-select-options {
-    background: #2d2d2d;
-    color: #f5f5f5;
-    border-color: #4a4a4a;
-  }
-
-  .qbs-card-container {
-    border-color: #4a4a4a;
-    background: #262626;
-    color: #f5f5f5;
-  }
-
-  .nodata-title {
-    color: #f5f5f5;
-  }
-
-  .tooltiptext {
-    background-color: #3d3d3d;
-    color: #fff;
-  }
-}
-
-.qbs-table-custom-pagination[data-theme='dark'] {
-  color: #f5f5f5;
-
-  .rows-count,
-  .qbs-table-pagination-text {
-    color: #f5f5f5;
-  }
-
-  .qbs-table-icon-container svg path {
-    stroke: #e5e5e5;
-  }
-}
-
-.rs-table-cell-content[data-theme='dark'] {
-  background-color: #262626;
-  color: #f5f5f5;
-}
-
-.qbs-table[data-theme='dark'] {
-  .rs-table,
-  .rs-table-body-row-wrapper,
-  .rs-table-row,
-  .rs-table-cell,
   .rs-table-cell-group,
-  .rs-table-row-header,
-  .rs-table-row-header .rs-table-cell {
-    background-color: #262626;
-    color: #f5f5f5;
+  .rs-table-cell-group-fixed-left,
+  .rs-table-cell-group-fixed-right {
+    background-color: #262626 !important;
   }
 
-  .rs-table-cell-content {
-    background-color: #262626;
-    color: #f5f5f5;
-  }
-
-  .rs-table-row-header .rs-table-cell-content,
-  .rs-table-cell-header .rs-table-cell-content {
-    background-color: #1b2028;
-    color: #f5f5f5;
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group-fixed-left,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group-fixed-right,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group > div,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group .rs-table-cell,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group .rs-table-cell-content {
+    background-color: #1d2633 !important;
   }
 
-  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover,
-  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell,
-  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-content {
-    background-color: #1d2633;
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-scroll .rs-table-cell,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-scroll .rs-table-cell-content,
+  .rs-table-row.qbs-table-row-checked .rs-table-cell-group-scroll .rs-table-cell,
+  .rs-table-row.qbs-table-row-checked .rs-table-cell-group-scroll .rs-table-cell-content {
+    background-color: #8f5cff1f !important;
   }
 
-  .rs-table-cell {
-    border-color: #3d3d3d;
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-left,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-right,
+  .rs-table-row.qbs-table-row-checked .rs-table-cell-group-fixed-left,
+  .rs-table-row.qbs-table-row-checked .rs-table-cell-group-fixed-right,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-left > div,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-right > div,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-left .rs-table-cell,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-right .rs-table-cell,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-left .rs-table-cell-content,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-right .rs-table-cell-content {
+    background-color: #2a2438 !important;
   }
 
-  .rs-table-scrollbar {
-    background-color: #2d2d2d;
-  }
-
-  .rs-table-scrollbar-handle {
-    background-color: #5a5a5a;
+  .qbs-table-checkbox .qbs-table-checkbox-input:checked ~ label {
+    background-color: #8f5cff !important;
+    border-color: #a78bfa !important;
   }
 }
-
-.qbs-table[dir='rtl'] {
-  .rs-table-cell-header .rs-table-cell-content {
-    text-align: right;
-  }
-
-  .rs-table-cell-wrap {
-    justify-content: flex-start;
-    width: 100%;
-  }
+.rs-table-cell-content[data-theme='dark'] {
+  background-color: #333333;
+  color: #ffffff;
 }
 /* Dropdown container */
 .qbs-table-menu-dropdown {
@@ -387,98 +283,70 @@
 .qbs-table-tooltip {
   cursor: pointer;
   position: relative;
-  display: inline-flex;
+  width: auto;
+  display: flex;
 }
 
 .qbs-table-tooltip .tooltiptext {
   visibility: hidden;
-  background-color: var(--tooltip-bg, #222);
-  color: var(--tooltip-text, #fff);
+  background-color: black;
+  color: white;
   text-align: center;
-  padding: 6px 10px;
-  border-radius: 6px;
+  padding: 6px;
+  border-radius: 4px;
   position: absolute;
-  z-index: 10050;
+  z-index: 9999;
   opacity: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity 0.3s;
   font-size: 12px;
-  font-weight: 500;
+  font-style: normal;
+  font-weight: 400;
   line-height: 16px;
-  white-space: nowrap;
-  max-width: min(280px, 90vw);
-  pointer-events: none;
-  inset-inline-start: 50%;
-  translate: -50% 0;
+  width: 100px;
 }
 
 .qbs-table-tooltip.up .tooltiptext {
-  bottom: calc(100% + 8px);
-  top: auto;
+  bottom: calc(100% + 10px);
+  right: -8px;
+  left: unset;
 }
 
 .qbs-table-tooltip.down .tooltiptext {
+  right: -10px;
   top: calc(100% + 8px);
-  bottom: auto;
 }
 
+// .qbs-table-tooltip:hover .tooltiptext {
+//   visibility: visible;
+//   opacity: 1;
+// }
+
 .qbs-table-tooltip .tooltiptext::after {
   content: '';
   position: absolute;
-  inset-inline-start: 50%;
-  translate: -50% 0;
-  border: 5px solid transparent;
+  border-width: 5px;
+  border-style: solid;
 }
 
 .qbs-table-tooltip.up .tooltiptext::after {
-  top: 100%;
-  border-top-color: var(--tooltip-bg, #222);
+  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%;
-  border-bottom-color: var(--tooltip-bg, #222);
+  border-color: transparent transparent black;
+  bottom: 100% !important;
+  right: 12px !important;
+  margin-left: -5px !important;
+  left: unset !important;
 }
-
-.qbs-table-tooltip-floating.tooltiptext {
-  position: fixed;
-  z-index: 10050;
-  visibility: hidden;
-  opacity: 0;
-  pointer-events: none;
-  background-color: var(--tooltip-bg, #222);
-  color: var(--tooltip-text, #fff);
-  text-align: center;
-  padding: 6px 10px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-  white-space: nowrap;
-  max-width: min(280px, 90vw);
-  transition: opacity 0.15s ease;
-}
-
-.qbs-table-tooltip-floating.tooltiptext.is-positioned {
-  visibility: visible;
-  opacity: 1;
-}
-
-.qbs-table-tooltip-floating.tooltiptext::after {
-  content: '';
-  position: absolute;
-  left: var(--tooltip-arrow-offset, 50%);
-  translate: -50% 0;
-  border: 5px solid transparent;
-}
-
-.qbs-table-tooltip-floating--down.tooltiptext::after {
-  bottom: 100%;
-  border-bottom-color: var(--tooltip-bg, #222);
-}
-
-.qbs-table-tooltip-floating--up.tooltiptext::after {
-  top: 100%;
-  border-top-color: var(--tooltip-bg, #222);
+.qbs-table-tooltip.down .tooltiptext {
+  top: 145% !important;
+  right: -10px !important;
+  left: auto !important;
 }
 .rs-table-row {
   overflow: visible !important;
@@ -879,8 +747,8 @@
 .qbs-table-top-icons {
   color: #999696;
 
-  .active {
-    color: #ec6a17;
+  .active{
+    color: #EC6A17;
   }
 }
 .qbs-card-empty-wrapper {
@@ -889,4 +757,4 @@
   align-items: center;
   height: 100%;
   width: 100%;
-}
+}

package/src/qbsTable/CustomTableCell.tsx

@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
 import Cell from '../Cell';
 import { handleCellFormat } from './utilities/handleFormatCell';
 import MenuDropDown from './utilities/menuDropDown';
-import VerticalMenuDropdown from './utilities/VerticalDropDownMenu';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 export const CheckCell: React.FC<any> = React.memo(
@@ -38,38 +37,17 @@ export const CheckCell: React.FC<any> = React.memo(
   )
 );
 export const ActionCell: React.FC<any> = React.memo(
-  ({
-    rowData,
-    handleMenuActions,
-    dataTheme,
-    actionProps,
-    tableBodyRef,
-    rowIndex,
-    dropType,
-    wheelWrapperRef
-  }) => {
+  ({ rowData, handleMenuActions, dataTheme, actionProps, tableBodyRef, rowIndex }) => {
     return (
       <div>
-        {dropType == 'vertical' ? (
-          <VerticalMenuDropdown
-            tableBodyRef={tableBodyRef}
-            actionDropDown={actionProps}
-            rowData={rowData}
-            dataTheme={dataTheme}
-            rowIndex={rowIndex}
-            handleMenuActions={handleMenuActions}
-            wheelWrapperRef={wheelWrapperRef}
-          />
-        ) : (
-          <MenuDropDown
-            tableBodyRef={tableBodyRef}
-            actionDropDown={actionProps}
-            rowData={rowData}
-            dataTheme={dataTheme}
-            rowIndex={rowIndex}
-            handleMenuActions={handleMenuActions}
-          />
-        )}
+        <MenuDropDown
+          tableBodyRef={tableBodyRef}
+          actionDropDown={actionProps}
+          rowData={rowData}
+          dataTheme={dataTheme}
+          rowIndex={rowIndex}
+          handleMenuActions={handleMenuActions}
+        />
       </div>
     );
   }

package/src/qbsTable/QbsTable.tsx

@@ -6,10 +6,8 @@ import ColumnGroup from '../ColumnGroup';
 import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
-import isRTL from '../utils/isRTL';
 import useResponsiveStore from '../utils/useResponsiveStore';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
-import { mergeLabels } from './labels';
 import {
   ActionCell,
   CheckCell,
@@ -32,7 +30,6 @@ import '../../dist/css/qbs-react-grid.css';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 const COLUMN_WIDTH = 250;
-let REFRESH_KEY = 0;
 const QbsTable: React.FC<QbsTableProps> = ({
   handleColumnSort,
   data,
@@ -54,7 +51,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   minHeight,
   height = 630,
   onExpandChange,
-  wordWrap: propsWordWrap,
+  wordWrap,
   dataRowKey = 'id',
   defaultExpandAllRows,
   handleRowExpanded,
@@ -62,7 +59,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
   rowExpand = false,
   actionProps = [],
   theme,
-  rtl: rtlProp,
   handleMenuActions,
   onRowClick,
   expandedRowKeys,
@@ -95,40 +91,17 @@ const QbsTable: React.FC<QbsTableProps> = ({
   childDetailHeading = '',
   isCustomTableCardView = false,
   handleTableCardView,
-  handleCustomCardLoader,
-  hasMoreData,
-  loadMoreData,
-  infiniteLoading,
-  infiniteScroll = false,
-  viewMode: propsViewMode,
-  rowViewToggle = false,
-  defaultRowView = true,
-  fullWidthView = false,
-  setTableFullView,
-  setRowViewToggle,
-  dropType = 'horizondal',
-  rowHeight,
-  isFullScreen,
-  showHeader = true,
-  labels: labelsProp
+  handleCustomCardLoader
 }) => {
-  const labels = useMemo(() => mergeLabels(labelsProp), [labelsProp]);
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
-  const dataTheme = useMemo(
-    () => theme ?? (typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) ?? 'light',
-    [theme]
-  );
-  const rtl = rtlProp ?? isRTL();
+  const dataTheme = useMemo(() => localStorage.getItem('theme') ?? theme, [theme]);
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>(null);
   const [tableViewToggle, setTableViewToggle] = useState(tableView);
   const isMobile = useResponsiveStore();
   const tableBodyRef = useRef<HTMLDivElement>(null);
-  const wheelWrapperRef = useRef<HTMLDivElement>(null);
-  const [viewMode, setViewMode] = useState(propsViewMode ?? 'expanded');
-  const [wordWrap, setWordWrap] = useState(propsWordWrap ?? false);
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
       setLoading(true);
@@ -180,6 +153,16 @@ const QbsTable: React.FC<QbsTableProps> = ({
     [checkedKeys]
   );
 
+  const rowKeyField = dataRowKey ?? 'id';
+  const getRowClassName = useCallback(
+    (rowData: Record<string, unknown>) => {
+      if (!selection) return '';
+      const key = rowData?.[rowKeyField] as string | number | undefined;
+      return key !== undefined && checkedKeys?.includes(key) ? 'qbs-table-row-checked' : '';
+    },
+    [selection, checkedKeys, rowKeyField]
+  );
+
   const handleToggle = useCallback(
     (columnName: string) => {
       let lastVisibleColumn: any = null;
@@ -215,7 +198,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
   const handleColumnWidth = useCallback((newWidth?: number, dataKey?: any) => {
     if (newWidth === undefined || dataKey === undefined) return;
-    REFRESH_KEY = REFRESH_KEY + 1;
     setColumns(prevColumns =>
       prevColumns.map(column =>
         column.field === dataKey ? { ...column, colWidth: newWidth } : column
@@ -232,14 +214,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
       );
     }
   }, [wordWrap]);
-  useEffect(() => {
-    if (!defaultRowView) {
-      setWordWrap('break-word');
-    } else {
-      setWordWrap(false);
-    }
-    REFRESH_KEY = REFRESH_KEY + 1;
-  }, [defaultRowView]);
 
   const onReorder = useCallback((columns: QbsColumnProps[]) => {
     setColumns(columns);
@@ -247,6 +221,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
   // useEffect(() => {
   // }, [columns]);
+
   const handleClear = ([]) => {
     setCheckedKeys([]);
     handleChecked([]);
@@ -276,31 +251,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
     searchPlaceholder: searchPlaceholder,
     setTableViewToggle: setTableViewToggle,
     tableViewToggle: tableViewToggle,
-    enableTableToggle: enableTableToggle,
-    rowViewToggle: rowViewToggle,
-    defaultRowView: defaultRowView,
-    fullWidthView: fullWidthView,
-    setTableFullView: setTableFullView,
-    setRowViewToggle: setRowViewToggle,
-    isFullScreen: isFullScreen,
-    labels
+    enableTableToggle: enableTableToggle
   };
+  const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
   useEffect(() => {
-    if (!dataTheme || typeof document === 'undefined') return;
-
-    document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
-    document.documentElement.dataset.theme = dataTheme;
-  }, [dataTheme]);
-
-  const themeToggle = useMemo(
-    () => (typeof document !== 'undefined' ? document.getElementById('themeToggle') : null),
-    []
-  ) as HTMLInputElement | null;
-
-  useEffect(() => {
-    if (theme || typeof document === 'undefined') return;
-
     const handleThemeToggle = () => {
       if (themeToggle?.checked) {
         document.body.setAttribute('data-theme', 'dark');
@@ -325,10 +280,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
       themeToggle?.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [theme, themeToggle]);
+  }, [themeToggle]);
 
   const handleExpanded = useCallback(
     (rowData: any) => {
+      console.log(rowData);
       const keyValue = dataRowKey as string;
       const key = rowData[keyValue];
 
@@ -618,46 +574,24 @@ const QbsTable: React.FC<QbsTableProps> = ({
     [columns, dataTheme]
   );
 
-  const handleInfiniteScroll = (scroll: number) => {
-    if (!infiniteScroll) return;
-    const wrapper = wheelWrapperRef.current;
-    if (!wrapper || !hasMoreData || infiniteLoading) return;
-
-    const { scrollTop, clientHeight } = wrapper;
-    const scrollHeight = Math.abs(scroll) + (height - headerHeight);
-    // Trigger fetch when user scrolls within 100px of bottom
-    if (scrollTop + clientHeight >= scrollHeight - 70) {
-      loadMoreData?.(); // fetch next page here
-    }
-  };
-
   return (
-    <div
-      className={`qbs-table ${classes.tableContainerClass}`}
-      data-theme={dataTheme}
-      dir={rtl ? 'rtl' : 'ltr'}
-    >
+    <div className={`qbs-table ${classes.tableContainerClass}`} data-theme={dataTheme}>
       {toolbar && <ToolBar {...toolbarProps} />}
       <div className="qbs-table-border-wrap">
         {tableViewToggle ? (
           <Table
             height={autoHeight ? undefined : height}
-            key={tableKey + REFRESH_KEY}
+            key={tableKey}
             tableKey={tableKey}
             data={data}
-            rtl={rtl}
             tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
             dataTheme={dataTheme}
             wordWrap={wordWrap}
-            wheelWrapperRef={wheelWrapperRef}
-            rowHeight={rowHeight}
             autoHeight={autoHeight}
-            handleInfiniteScroll={handleInfiniteScroll}
             sortColumn={sortColumn}
             style={{ position: 'relative' }}
             sortType={sortType}
             onSortColumn={handleSortColumn}
-            infiniteLoading={infiniteLoading}
             onRowClick={onRowClick}
             tableBodyHeight={tableBodyHeight}
             cellBordered={cellBordered}
@@ -666,7 +600,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
               renderEmpty ? (
                 renderEmpty(info)
               ) : (
-                <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
+                <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
               )
             }
             columns={columns}
@@ -674,11 +608,12 @@ const QbsTable: React.FC<QbsTableProps> = ({
             headerHeight={headerHeight}
             rowExpandedHeight={rowExpandedHeight}
             loading={isLoading ?? loading}
-            showHeader={showHeader}
+            showHeader
             defaultChecked
             expandedRowKeys={expandedRowKeys}
             onExpandChange={onExpandChange}
             rowKey={dataRowKey ?? 'id'}
+            rowClassName={selection ? getRowClassName : undefined}
             defaultExpandAllRows={defaultExpandAllRows}
             shouldUpdateScroll={shouldUpdateScroll}
             renderRowExpanded={rowData => {
@@ -783,12 +718,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       onReorder={onReorder}
                       isOpen={isOpen}
                       tableHeight={height}
-                      viewMode={viewMode}
-                      setViewMode={setViewMode}
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
-                      labels={labels}
                     />
                   </HeaderCell>
                   <Cell />
@@ -810,20 +742,15 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       onToggle={handleToggle}
                       tableHeight={height}
                       onReorder={onReorder}
-                      viewMode={viewMode}
-                      setViewMode={setViewMode}
                       isOpen={isOpen}
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
-                      labels={labels}
                     />
                   )}
                 </HeaderCell>
                 <ActionCell
                   tableBodyRef={tableBodyRef}
-                  dropType={dropType}
-                  wheelWrapperRef={wheelWrapperRef}
                   actionProps={actionProps}
                   className={`${classes.cellClass} ${classes.actionCellClass}`}
                   handleMenuActions={handleMenuActions}
@@ -849,7 +776,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           >
             {(data?.length === 0 || !data) && !isLoading && (
               <div className="flex flex-col gap-2 p-2 mt-6 card-empty-container">
-                <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
+                <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
               </div>
             )}
             {isLoading ? (
@@ -876,7 +803,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       columns={columns}
                       tableBodyRef={tableBodyRef}
                       actionProps={actionProps}
-                      labels={labels}
                     />
                   )}
                 </div>
@@ -885,9 +811,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           </div>
         )}
         <div>
-          {pagination && data?.length > 0 && (
-            <Pagination paginationProps={paginationProps} labels={labels} dataTheme={dataTheme} />
-          )}
+          {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
         </div>
       </div>
     </div>