qbs-react-grid 2.2.4 → 2.2.6

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,
@@ -96,39 +92,17 @@ const QbsTable: React.FC<QbsTableProps> = ({
   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
+  dropType
 }) => {
-  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 +154,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 +199,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 +215,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 +222,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
   // useEffect(() => {
   // }, [columns]);
+
   const handleClear = ([]) => {
     setCheckedKeys([]);
     handleChecked([]);
@@ -276,31 +252,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 +281,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 +575,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 +601,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 +609,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 +719,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,24 +743,20 @@ 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}
                   dataTheme={dataTheme}
+                  dropType={dropType}
                 />
               </Column>
             )}
@@ -849,7 +778,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 +805,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       columns={columns}
                       tableBodyRef={tableBodyRef}
                       actionProps={actionProps}
-                      labels={labels}
                     />
                   )}
                 </div>
@@ -885,9 +813,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>

package/src/qbsTable/TableCardList.tsx

@@ -7,7 +7,6 @@ import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
-import { mergeLabels } from './labels';
 import {
   ActionCell,
   CheckCell,
@@ -83,21 +82,15 @@ const QbsTable: React.FC<QbsTableProps> = ({
   autoHeight,
   emptySubTitle,
   emptyTitle,
-  dropType = 'horizontal',
-  labels: labelsProp
+  dropType
 }) => {
-  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 dataTheme = useMemo(() => localStorage.getItem('theme') ?? theme, [theme]);
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>(null);
   const tableBodyRef = useRef<HTMLDivElement>(null);
-  const wheelWrapperRef = useRef<HTMLDivElement>(null);
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
       setLoading(true);
@@ -149,6 +142,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;
@@ -234,25 +237,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
     dataLength: data?.length,
-    searchPlaceholder: searchPlaceholder,
-    labels
+    searchPlaceholder: searchPlaceholder
   };
+  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');
@@ -277,10 +266,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];
 
@@ -471,7 +461,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
           wordWrap={wordWrap}
           autoHeight={autoHeight}
           sortColumn={sortColumn}
-          wheelWrapperRef={wheelWrapperRef}
           style={{ position: 'relative' }}
           sortType={sortType}
           onSortColumn={handleSortColumn}
@@ -483,7 +472,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}
@@ -496,6 +485,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           expandedRowKeys={expandedRowKeys}
           onExpandChange={onExpandChange}
           rowKey={dataRowKey ?? 'id'}
+          rowClassName={selection ? getRowClassName : undefined}
           defaultExpandAllRows={defaultExpandAllRows}
           shouldUpdateScroll={shouldUpdateScroll}
           renderRowExpanded={rowData => {
@@ -601,7 +591,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
-                    labels={labels}
                   />
                 </HeaderCell>
                 <Cell />
@@ -627,26 +616,23 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
-                    labels={labels}
                   />
                 )}
               </HeaderCell>
               <ActionCell
                 tableBodyRef={tableBodyRef}
                 actionProps={actionProps}
-                dropType={dropType}
                 className={`${classes.cellClass} ${classes.actionCellClass}`}
                 handleMenuActions={handleMenuActions}
                 dataTheme={dataTheme}
+                dropType={dropType}
               />
             </Column>
           )}
         </Table>
 
         <div>
-          {pagination && data?.length > 0 && (
-            <Pagination paginationProps={paginationProps} labels={labels} dataTheme={dataTheme} />
-          )}
+          {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
         </div>
       </div>
     </div>

package/src/qbsTable/Toolbar.tsx

@@ -3,9 +3,8 @@ import React, { useCallback, useRef, useState } from 'react';
 import useResponsiveStore from '../utils/useResponsiveStore';
 import { QbsTableToolbarProps } from './commontypes';
 import debounce from './utilities/debounce';
-import { CardView, ContentView, DefaultView, ExpandIcon, TableView } from './utilities/icons';
+import { CardView, TableView } from './utilities/icons';
 import SearchInput from './utilities/SearchInput';
-import { formatSelectedItems, mergeLabels } from './labels';
 import { getRowDisplayRange } from './utilities/tablecalc';
 import TooltipComponent from './utilities/ToolTip';
 
@@ -28,16 +27,8 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   searchPlaceholder,
   tableViewToggle,
   setTableViewToggle,
-  enableTableToggle = false,
-  rowViewToggle = false,
-  defaultRowView = true,
-  fullWidthView = false,
-  setTableFullView,
-  setRowViewToggle,
-  isFullScreen = false,
-  labels: labelsProp
+  enableTableToggle = false
 }) => {
-  const labels = mergeLabels(labelsProp);
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
   const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
   const toolbarRef = useRef<HTMLDivElement>(null);
@@ -82,8 +73,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
           <div className="qbs-table-primary-filter">
             {search && (
               <SearchInput
-                placeholder={searchPlaceholder ?? labels.search}
-                searchAriaLabel={labels.searchAriaLabel}
+                placeholder={searchPlaceholder ?? 'Search'}
                 handleChange={handleChange}
                 handleSearch={handleSearch}
                 searchValue={searchParam}
@@ -113,38 +103,10 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
             </span>
           )}
           {tableHeaderActions}
-          <div className=" pr-1 cursor-pointer relative table_custom_ctions   ">
-            {(rowViewToggle || isFullScreen) && (
-              <div className="flex gap-2 qbs-row-switch-cntainer">
-                {rowViewToggle && (
-                  <div className="flex gap-2 table_cell_style">
-                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToDefaultView}>
-                      <div onClick={() => setRowViewToggle?.(true)}>
-                        <DefaultView className={`${defaultRowView ? 'active' : ''}`} />
-                      </div>
-                    </TooltipComponent>
-                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToRelaxedView}>
-                      <div onClick={() => setRowViewToggle?.(false)}>
-                        <ContentView className={`${!defaultRowView ? 'active' : ''}`} />
-                      </div>
-                    </TooltipComponent>
-                  </div>
-                )}
-                {isFullScreen && (
-                  <div className=" table_full_width">
-                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToFullScreen}>
-                      <div onClick={() => setTableFullView?.(!fullWidthView)}>
-                        <ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
-                      </div>
-                    </TooltipComponent>
-                  </div>
-                )}
-              </div>
-            )}
-
+          <div className=" pr-1 cursor-pointer relative  ">
             {enableTableToggle && !isMobile && (
               <div className="qbs-table-top-icons flex gap-2">
-                <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToTableView}>
+                <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Table View'}>
                   <div onClick={() => setTableViewToggle?.(true)}>
                     <TableView className={`${tableViewToggle ? 'active' : ''}`} />
                   </div>
@@ -153,7 +115,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                 <div className="border-r h-4 w-1"></div>
 
                 <div onClick={() => setTableViewToggle?.(false)}>
-                  <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToCardView}>
+                  <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Card View'}>
                     <CardView className={`${!tableViewToggle ? 'active' : ''}`} />
                   </TooltipComponent>
                 </div>
@@ -179,24 +141,21 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
         >
           {checkedKeys && checkedKeys?.length > 0 ? (
             <div className="qbs-table-toolbar-sub-container-start">
-              <div className="selected-row">
-                {formatSelectedItems(labels.selectedItems, checkedKeys?.length ?? 0)}
-              </div>
+              <div className="selected-row">{`Selected Items(${checkedKeys?.length}) `}</div>
               <div className="selected-row-action">
                 <button className="btn" onClick={() => onSelect?.([])}>
-                  {labels.clear}
+                  Clear
                 </button>
                 {selectedRowActions?.map((actions, index: number) => (
                   <>
                     {handleHide(actions) && (
                       <button
                         key={index.toString()}
-                        className={`btn ${actions?.buttonClassName}`}
+                        className="btn"
                         disabled={actions.disabled}
                         onClick={() => actions?.action(checkedKeys)}
                       >
-                        {actions?.icon && <span className="mr-2">{actions?.icon}</span>}
-                        <span>{actions.actionTitle}</span>
+                        {actions.actionTitle}
                       </button>
                     )}
                   </>
@@ -210,8 +169,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                   {getRowDisplayRange(
                     paginationProps.total ?? 0,
                     paginationProps.rowsPerPage ?? 0,
-                    paginationProps.currentPage ?? 0,
-                    labels.showingRange
+                    paginationProps.currentPage ?? 0
                   )}
                 </div>
               )}

package/src/qbsTable/commontypes.ts

@@ -1,9 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
 
-import type { QbsTableLabels } from './labels';
-
-export type { QbsTableLabels };
-
 interface Content {
   cell: ReactNode | string;
   toolTip?: string;
@@ -47,7 +43,7 @@ export interface PaginationProps {
 export interface ActionProps {
   title?: string;
   action?: (row: any) => void;
-  icon?: React.ReactNode;
+  icon: React.ReactNode;
   toolTip?: string;
   hidden?: boolean;
   hide?: (data: any, index?: number) => boolean;
@@ -78,7 +74,6 @@ export interface QbsTableProps {
   searchValue?: string;
   handleSearchValue?: (value?: string) => void;
   theme?: string;
-  rtl?: boolean;
   onRowClick?: (data: any) => void;
   cellBordered?: boolean;
   bordered?: boolean;
@@ -92,6 +87,7 @@ export interface QbsTableProps {
   expandedRowKeys?: readonly number[];
   setExpandedRowKeys?: (value: readonly number[]) => void;
   handleMenuActions?: (actions: ActionProps, rowData: any) => void;
+  dropType?: 'vertical' | string;
   handleRowExpanded?: (rowData: any) => React.ReactNode;
   shouldUpdateScroll?: boolean;
   rowExpand?: boolean;
@@ -99,15 +95,12 @@ export interface QbsTableProps {
   advancefilter?: ReactElement | ReactNode;
   tableHeaderActions?: ReactElement | ReactNode;
   searchPlaceholder?: string;
-  labels?: QbsTableLabels;
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;
     disabled?: boolean;
     hidden?: boolean;
     customHide?: string;
-    buttonClassName?: string;
-    icon?: ReactElement | ReactNode;
   }[];
   selectedRows?: (number | string)[];
   classes?: { [key: string]: any };
@@ -138,20 +131,6 @@ export interface QbsTableProps {
   handleTableCardView?: (data: any) => React.ReactNode;
   isCustomTableCardView?: boolean;
   handleCustomCardLoader?: () => React.ReactNode;
-  hasMoreData?: boolean;
-  loadMoreData?: () => void;
-  infiniteScroll?: boolean;
-  infiniteLoading?: boolean;
-  viewMode?: string;
-  rowViewToggle?: boolean;
-  defaultRowView?: boolean;
-  fullWidthView?: boolean;
-  setTableFullView?: (value: boolean) => void;
-  setRowViewToggle?: (value: boolean) => void;
-  dropType?: 'horizondal' | 'vertical';
-  rowHeight?: number;
-  isFullScreen?: boolean;
-  showHeader?: boolean;
 }
 
 export interface QbsTableToolbarProps {
@@ -177,7 +156,6 @@ export interface QbsTableToolbarProps {
   dataLength: number;
   headerHeight?: number;
   searchPlaceholder?: string;
-  labels?: QbsTableLabels;
   tableView?: boolean;
   enableTableToggle?: boolean;
   tableViewToggle?: boolean;
@@ -188,13 +166,5 @@ export interface QbsTableToolbarProps {
     disabled?: boolean;
     hidden?: boolean;
     customHide?: string;
-    buttonClassName?: string;
-    icon?: ReactElement | ReactNode;
   }[];
-  rowViewToggle?: boolean;
-  defaultRowView?: boolean;
-  fullWidthView?: boolean;
-  setTableFullView?: (value: boolean) => void;
-  setRowViewToggle?: (value: boolean) => void;
-  isFullScreen?: boolean;
 }