qbs-react-grid 2.2.5 → 2.2.9

package/lib/qbsTable/utilities/verticalMenuCoordinator.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.closeOtherVerticalMenus = exports.VERTICAL_MENU_CLOSE_OTHERS = void 0;
+var VERTICAL_MENU_CLOSE_OTHERS = 'qbs-vertical-menu-close-others';
+exports.VERTICAL_MENU_CLOSE_OTHERS = VERTICAL_MENU_CLOSE_OTHERS;
+var closeOtherVerticalMenus = function closeOtherVerticalMenus(exceptId) {
+  if (typeof document === 'undefined') return;
+  document.dispatchEvent(new CustomEvent(VERTICAL_MENU_CLOSE_OTHERS, {
+    detail: {
+      exceptId: exceptId
+    }
+  }));
+};
+exports.closeOtherVerticalMenus = closeOtherVerticalMenus;

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "qbs-react-grid",
-  "version": "2.2.5",
+  "version": "2.2.9",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "module": "es/index.js",
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    },
+    "./dist/css/qbs-react-grid.css": "./dist/css/qbs-react-grid.css"
+  },
   "scripts": {
     "format": "prettier --write \"{src,test}/**/*.{tsx,ts,js}\"",
     "format:check": "prettier --list-different \"{src,test}/**/*.{tsx,ts,js}\"",

package/src/index.ts

@@ -12,6 +12,12 @@ export type { CellProps } from './Cell';
 export type { HeaderCellProps } from './HeaderCell';
 export type { ColumnGroupProps } from './ColumnGroup';
 export type { QbsTableProps } from './qbsTable/commontypes';
+export type { QbsTableLabels } from './qbsTable/labels';
+export {
+  mergeQbsTableLabels,
+  defaultQbsTableLabels,
+  formatSelectedItems,
+} from './qbsTable/labels';
 export type {
   StandardProps,
   SortType,

package/src/less/qbs-table.less

@@ -376,11 +376,17 @@
   gap: 10px;
   align-items: center;
 }
+.qbs-table-settings-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .qbs-table-column-popup {
   position: fixed;
   padding: 8px;
-  z-index: 999;
-  right: 10px;
+  z-index: 10060;
   border-radius: 8px;
   background: #fff;
   box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
@@ -389,7 +395,6 @@
   display: flex;
   flex-direction: column;
   max-height: 500px;
-  // overflow-y: auto;
 }
 .qbs-table-popup-container {
   max-width: 400px;
@@ -408,9 +413,37 @@
 
 .qbs-table-columns-container {
   display: flex;
+  flex-direction: row;
+}
+
+.qbs-table-column-popup--rtl .qbs-table-columns-container {
   flex-direction: row-reverse;
 }
 
+.qbs-table-popup-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0 0;
+}
+
+.qbs-table-column-popup--rtl .qbs-table-popup-footer {
+  flex-direction: row-reverse;
+}
+
+.qbs-table-reset-link {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: inherit;
+  text-decoration: none;
+}
+
 .qbs-table-columns-label {
   display: flex;
   gap: 10px;
@@ -746,11 +779,32 @@
 
 .qbs-table-top-icons {
   color: #999696;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 
-  .active{
+  .active {
     color: #EC6A17;
   }
 }
+
+.qbs-row-switch-container {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.qbs-table-view-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+}
 .qbs-card-empty-wrapper {
   display: flex;
   justify-content: center;

package/src/qbsTable/CustomTableCell.tsx

@@ -4,6 +4,7 @@ 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(
@@ -37,9 +38,26 @@ export const CheckCell: React.FC<any> = React.memo(
   )
 );
 export const ActionCell: React.FC<any> = React.memo(
-  ({ rowData, handleMenuActions, dataTheme, actionProps, tableBodyRef, rowIndex }) => {
-    return (
-      <div>
+  ({
+    rowData,
+    handleMenuActions,
+    dataTheme,
+    actionProps,
+    tableBodyRef,
+    rowIndex,
+    dropType,
+    ...props
+  }) => (
+    <Cell {...props} dataTheme={dataTheme} style={{ padding: 0 }}>
+      {dropType === 'vertical' ? (
+        <VerticalMenuDropdown
+          tableBodyRef={tableBodyRef}
+          actionDropDown={actionProps}
+          rowData={rowData}
+          rowIndex={rowIndex}
+          handleMenuActions={handleMenuActions}
+        />
+      ) : (
         <MenuDropDown
           tableBodyRef={tableBodyRef}
           actionDropDown={actionProps}
@@ -48,14 +66,16 @@ export const ActionCell: React.FC<any> = React.memo(
           rowIndex={rowIndex}
           handleMenuActions={handleMenuActions}
         />
-      </div>
-    );
-  }
+      )}
+    </Cell>
+  )
 );
 export const ExpandCell: React.FC<any> = React.memo(
   ({ rowData, dataKey, expandedRowKeys, onChange, ...props }) => (
     <Cell {...props}>
       <button
+        type="button"
+        className="qbs-table-expand-btn"
         onClick={() => {
           onChange(rowData);
         }}
@@ -72,7 +92,7 @@ export const ExpandCell: React.FC<any> = React.memo(
               fillRule="evenodd"
               clipRule="evenodd"
               d="M0.792893 0.292893C1.18342 -0.097631 1.81658 -0.097631 2.20711 0.292893L5.5 3.58579L8.79289 0.292893C9.18342 -0.0976311 9.81658 -0.0976311 10.2071 0.292893C10.5976 0.683417 10.5976 1.31658 10.2071 1.70711L6.20711 5.70711C5.81658 6.09763 5.18342 6.09763 4.79289 5.70711L0.792893 1.70711C0.402369 1.31658 0.402369 0.683417 0.792893 0.292893Z"
-              fill="#313131"
+              fill="currentColor"
             />
           </svg>
         ) : (
@@ -87,7 +107,7 @@ export const ExpandCell: React.FC<any> = React.memo(
               fillRule="evenodd"
               clipRule="evenodd"
               d="M0.792894 9.70711C0.402369 9.31658 0.402369 8.68342 0.792894 8.29289L4.08579 5L0.792893 1.70711C0.402369 1.31658 0.402369 0.683418 0.792893 0.292894C1.18342 -0.0976312 1.81658 -0.0976312 2.20711 0.292894L6.20711 4.29289C6.59763 4.68342 6.59763 5.31658 6.20711 5.70711L2.20711 9.70711C1.81658 10.0976 1.18342 10.0976 0.792894 9.70711Z"
-              fill="#313131"
+              fill="currentColor"
             />
           </svg>
         )}

package/src/qbsTable/QbsTable.tsx

@@ -8,6 +8,7 @@ import Pagination from '../Pagination';
 import Table from '../Table';
 import useResponsiveStore from '../utils/useResponsiveStore';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
+import { mergeQbsTableLabels } from './labels';
 import {
   ActionCell,
   CheckCell,
@@ -91,8 +92,20 @@ const QbsTable: React.FC<QbsTableProps> = ({
   childDetailHeading = '',
   isCustomTableCardView = false,
   handleTableCardView,
-  handleCustomCardLoader
+  handleCustomCardLoader,
+  dropType,
+  labels: labelsProp,
+  rtl = false,
+  rowViewToggle = false,
+  defaultRowView = true,
+  fullWidthView = false,
+  setTableFullView,
+  setRowViewToggle,
+  isFullScreen = false,
+  rowHeight,
 }) => {
+  const labels = useMemo(() => mergeQbsTableLabels(labelsProp), [labelsProp]);
+  const pinSide = rtl ? 'left' : 'right';
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
@@ -251,7 +264,15 @@ const QbsTable: React.FC<QbsTableProps> = ({
     searchPlaceholder: searchPlaceholder,
     setTableViewToggle: setTableViewToggle,
     tableViewToggle: tableViewToggle,
-    enableTableToggle: enableTableToggle
+    enableTableToggle: enableTableToggle,
+    rowViewToggle,
+    defaultRowView,
+    fullWidthView,
+    setTableFullView,
+    setRowViewToggle,
+    isFullScreen,
+    labels,
+    rtl,
   };
   const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
@@ -583,6 +604,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             height={autoHeight ? undefined : height}
             key={tableKey}
             tableKey={tableKey}
+            rtl={rtl}
             data={data}
             tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
             dataTheme={dataTheme}
@@ -606,6 +628,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             columns={columns}
             minHeight={minHeight}
             headerHeight={headerHeight}
+            rowHeight={rowHeight}
             rowExpandedHeight={rowExpandedHeight}
             loading={isLoading ?? loading}
             showHeader
@@ -705,7 +728,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             {columnsRendered}
             {!actionProps ||
               (actionProps?.length === 0 && columnToggle && (
-                <Column width={40} fixed="right">
+                <Column width={40} fixed={pinSide}>
                   <HeaderCell
                     verticalAlign={findGrouped() ? 'middle' : undefined}
                     className={` ${classes.headerlClass}`}
@@ -721,13 +744,15 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
+                      labels={labels}
+                      rtl={rtl}
                     />
                   </HeaderCell>
                   <Cell />
                 </Column>
               ))}
             {actionProps && actionProps?.length > 0 && (
-              <Column width={40} fixed="right">
+              <Column width={40} fixed={pinSide}>
                 <HeaderCell
                   verticalAlign={findGrouped() ? 'middle' : undefined}
                   className={` ${classes.headerlClass}`}
@@ -746,6 +771,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
+                      labels={labels}
+                      rtl={rtl}
                     />
                   )}
                 </HeaderCell>
@@ -755,6 +782,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                   className={`${classes.cellClass} ${classes.actionCellClass}`}
                   handleMenuActions={handleMenuActions}
                   dataTheme={dataTheme}
+                  dropType={dropType}
                 />
               </Column>
             )}

package/src/qbsTable/TableCardList.tsx

@@ -7,6 +7,7 @@ import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
+import { mergeQbsTableLabels } from './labels';
 import {
   ActionCell,
   CheckCell,
@@ -81,8 +82,19 @@ const QbsTable: React.FC<QbsTableProps> = ({
   renderEmpty,
   autoHeight,
   emptySubTitle,
-  emptyTitle
+  emptyTitle,
+  dropType,
+  labels: labelsProp,
+  rtl = false,
+  rowViewToggle = false,
+  defaultRowView = true,
+  fullWidthView = false,
+  setTableFullView,
+  setRowViewToggle,
+  isFullScreen = false,
 }) => {
+  const labels = useMemo(() => mergeQbsTableLabels(labelsProp), [labelsProp]);
+  const pinSide = rtl ? 'left' : 'right';
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
@@ -236,7 +248,15 @@ const QbsTable: React.FC<QbsTableProps> = ({
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
     dataLength: data?.length,
-    searchPlaceholder: searchPlaceholder
+    searchPlaceholder: searchPlaceholder,
+    rowViewToggle,
+    defaultRowView,
+    fullWidthView,
+    setTableFullView,
+    setRowViewToggle,
+    isFullScreen,
+    labels,
+    rtl,
   };
   const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
@@ -454,6 +474,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           height={autoHeight ? undefined : height}
           key={tableKey}
           tableKey={tableKey}
+          rtl={rtl}
           data={data}
           tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
           dataTheme={dataTheme}
@@ -574,7 +595,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           {columnsRendered}
           {!actionProps ||
             (actionProps?.length === 0 && columnToggle && (
-              <Column width={40} fixed="right">
+              <Column width={40} fixed={pinSide}>
                 <HeaderCell
                   verticalAlign={findGrouped() ? 'middle' : undefined}
                   className={` ${classes.headerlClass}`}
@@ -590,13 +611,15 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
+                    labels={labels}
+                    rtl={rtl}
                   />
                 </HeaderCell>
                 <Cell />
               </Column>
             ))}
           {actionProps && actionProps?.length > 0 && (
-            <Column width={40} fixed="right">
+            <Column width={40} fixed={pinSide}>
               <HeaderCell
                 verticalAlign={findGrouped() ? 'middle' : undefined}
                 className={` ${classes.headerlClass}`}
@@ -615,6 +638,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
+                    labels={labels}
+                    rtl={rtl}
                   />
                 )}
               </HeaderCell>
@@ -624,6 +649,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                 className={`${classes.cellClass} ${classes.actionCellClass}`}
                 handleMenuActions={handleMenuActions}
                 dataTheme={dataTheme}
+                dropType={dropType}
               />
             </Column>
           )}

package/src/qbsTable/Toolbar.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import useResponsiveStore from '../utils/useResponsiveStore';
 import { QbsTableToolbarProps } from './commontypes';
+import { formatSelectedItems, mergeQbsTableLabels } from './labels';
 import debounce from './utilities/debounce';
-import { CardView, TableView } from './utilities/icons';
+import { CardView, ContentView, DefaultView, ExpandIcon, TableView } from './utilities/icons';
 import SearchInput from './utilities/SearchInput';
 import { getRowDisplayRange } from './utilities/tablecalc';
 import TooltipComponent from './utilities/ToolTip';
@@ -27,8 +28,17 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   searchPlaceholder,
   tableViewToggle,
   setTableViewToggle,
-  enableTableToggle = false
+  enableTableToggle = false,
+  rowViewToggle = false,
+  defaultRowView = true,
+  fullWidthView = false,
+  setTableFullView,
+  setRowViewToggle,
+  isFullScreen = false,
+  labels: labelsProp,
+  rtl = false,
 }) => {
+  const labels = useMemo(() => mergeQbsTableLabels(labelsProp), [labelsProp]);
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
   const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
   const toolbarRef = useRef<HTMLDivElement>(null);
@@ -39,7 +49,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
         debouncedOnSearch(e);
       }
     },
-    [debouncedOnSearch]
+    [debouncedOnSearch],
   );
 
   const handleChange = useCallback(
@@ -51,29 +61,30 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
         handleSearchValue?.(e);
       }
     },
-    [asyncSearch, handleSearch, handleSearchValue]
+    [asyncSearch, handleSearch, handleSearchValue],
   );
-  const handleHide = (actions: any) => {
+  const handleHide = (actions: { hidden?: boolean; customHide?: string }) => {
     if (actions.hidden) {
       return false;
-    } else if (actions.customHide == '>2') {
-      return checkedKeys && checkedKeys?.length >= 2 ? true : false;
-    } else {
-      return true;
     }
+    if (actions.customHide === '>2') {
+      return checkedKeys && checkedKeys?.length >= 2;
+    }
+    return true;
   };
   const isMobile = useResponsiveStore();
   const handleFilterClick = () => {
     setIsOpen(!isOpen);
   };
+
   return (
-    <div className="qbs-table-toolbar-container" ref={toolbarRef}>
-      <div className={`qbs-table-toolbar ${className}`}>
+    <div className="qbs-table-toolbar-container" ref={toolbarRef} dir={rtl ? 'rtl' : 'ltr'}>
+      <div className={`qbs-table-toolbar ${className ?? ''}`}>
         <div className="start-container" style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <div className="qbs-table-primary-filter">
             {search && (
               <SearchInput
-                placeholder={searchPlaceholder ?? 'Search'}
+                placeholder={searchPlaceholder ?? labels.search ?? 'Search'}
                 handleChange={handleChange}
                 handleSearch={handleSearch}
                 searchValue={searchParam}
@@ -103,22 +114,79 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
             </span>
           )}
           {tableHeaderActions}
-          <div className=" pr-1 cursor-pointer relative  ">
+          <div className="pr-1 cursor-pointer relative table_custom_ctions">
+            {(rowViewToggle || isFullScreen) && (
+              <div className="flex gap-2 qbs-row-switch-container">
+                {rowViewToggle && (
+                  <div className="flex gap-2 table_cell_style qbs-table-top-icons">
+                    <TooltipComponent
+                      tableBodyRef={toolbarRef}
+                      title={labels.switchToDefaultView ?? ''}
+                    >
+                      <button
+                        type="button"
+                        className="qbs-table-view-btn"
+                        onClick={() => setRowViewToggle?.(true)}
+                      >
+                        <DefaultView className={`${defaultRowView ? 'active' : ''}`} />
+                      </button>
+                    </TooltipComponent>
+                    <TooltipComponent
+                      tableBodyRef={toolbarRef}
+                      title={labels.switchToRelaxedView ?? ''}
+                    >
+                      <button
+                        type="button"
+                        className="qbs-table-view-btn"
+                        onClick={() => setRowViewToggle?.(false)}
+                      >
+                        <ContentView className={`${!defaultRowView ? 'active' : ''}`} />
+                      </button>
+                    </TooltipComponent>
+                  </div>
+                )}
+                {isFullScreen && (
+                  <div className="table_full_width qbs-table-top-icons">
+                    <TooltipComponent
+                      tableBodyRef={toolbarRef}
+                      title={labels.switchToFullScreen ?? ''}
+                    >
+                      <button
+                        type="button"
+                        className="qbs-table-view-btn"
+                        onClick={() => setTableFullView?.(!fullWidthView)}
+                      >
+                        <ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
+                      </button>
+                    </TooltipComponent>
+                  </div>
+                )}
+              </div>
+            )}
+
             {enableTableToggle && !isMobile && (
               <div className="qbs-table-top-icons flex gap-2">
-                <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Table View'}>
-                  <div onClick={() => setTableViewToggle?.(true)}>
+                <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToTableView ?? ''}>
+                  <button
+                    type="button"
+                    className="qbs-table-view-btn"
+                    onClick={() => setTableViewToggle?.(true)}
+                  >
                     <TableView className={`${tableViewToggle ? 'active' : ''}`} />
-                  </div>
+                  </button>
                 </TooltipComponent>
 
-                <div className="border-r h-4 w-1"></div>
+                <div className="border-r h-4 w-1" />
 
-                <div onClick={() => setTableViewToggle?.(false)}>
-                  <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Card View'}>
+                <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToCardView ?? ''}>
+                  <button
+                    type="button"
+                    className="qbs-table-view-btn"
+                    onClick={() => setTableViewToggle?.(false)}
+                  >
                     <CardView className={`${!tableViewToggle ? 'active' : ''}`} />
-                  </TooltipComponent>
-                </div>
+                  </button>
+                </TooltipComponent>
               </div>
             )}
           </div>
@@ -141,16 +209,18 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
         >
           {checkedKeys && checkedKeys?.length > 0 ? (
             <div className="qbs-table-toolbar-sub-container-start">
-              <div className="selected-row">{`Selected Items(${checkedKeys?.length}) `}</div>
+              <div className="selected-row">
+                {formatSelectedItems(checkedKeys.length, labels)}
+              </div>
               <div className="selected-row-action">
-                <button className="btn" onClick={() => onSelect?.([])}>
-                  Clear
+                <button type="button" className="btn" onClick={() => onSelect?.([])}>
+                  {labels.clear}
                 </button>
                 {selectedRowActions?.map((actions, index: number) => (
-                  <>
+                  <React.Fragment key={index.toString()}>
                     {handleHide(actions) && (
                       <button
-                        key={index.toString()}
+                        type="button"
                         className="btn"
                         disabled={actions.disabled}
                         onClick={() => actions?.action(checkedKeys)}
@@ -158,7 +228,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                         {actions.actionTitle}
                       </button>
                     )}
-                  </>
+                  </React.Fragment>
                 ))}
               </div>
             </div>
@@ -169,7 +239,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                   {getRowDisplayRange(
                     paginationProps.total ?? 0,
                     paginationProps.rowsPerPage ?? 0,
-                    paginationProps.currentPage ?? 0
+                    paginationProps.currentPage ?? 0,
                   )}
                 </div>
               )}

package/src/qbsTable/commontypes.ts

@@ -1,5 +1,7 @@
 import React, { ReactElement, ReactNode } from 'react';
 
+import type { QbsTableLabels } from './labels';
+
 interface Content {
   cell: ReactNode | string;
   toolTip?: string;
@@ -87,6 +89,9 @@ export interface QbsTableProps {
   expandedRowKeys?: readonly number[];
   setExpandedRowKeys?: (value: readonly number[]) => void;
   handleMenuActions?: (actions: ActionProps, rowData: any) => void;
+  dropType?: 'vertical' | string;
+  labels?: QbsTableLabels;
+  rtl?: boolean;
   handleRowExpanded?: (rowData: any) => React.ReactNode;
   shouldUpdateScroll?: boolean;
   rowExpand?: boolean;
@@ -130,6 +135,13 @@ export interface QbsTableProps {
   handleTableCardView?: (data: any) => React.ReactNode;
   isCustomTableCardView?: boolean;
   handleCustomCardLoader?: () => React.ReactNode;
+  rowViewToggle?: boolean;
+  defaultRowView?: boolean;
+  fullWidthView?: boolean;
+  setTableFullView?: (value: boolean) => void;
+  setRowViewToggle?: (value: boolean) => void;
+  isFullScreen?: boolean;
+  rowHeight?: number;
 }
 
 export interface QbsTableToolbarProps {
@@ -159,6 +171,14 @@ export interface QbsTableToolbarProps {
   enableTableToggle?: boolean;
   tableViewToggle?: boolean;
   setTableViewToggle?: (value: boolean) => void;
+  rowViewToggle?: boolean;
+  defaultRowView?: boolean;
+  fullWidthView?: boolean;
+  setTableFullView?: (value: boolean) => void;
+  setRowViewToggle?: (value: boolean) => void;
+  isFullScreen?: boolean;
+  labels?: QbsTableLabels;
+  rtl?: boolean;
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;