qbs-react-grid 2.0.16 → 2.2.0

package/src/Pagination.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useEffect, useState } from 'react';
 
 import CustomSelect from './customSelect';
+import { mergeLabels, type QbsTableLabels } from './qbsTable/labels';
 import { getRowDisplayRange } from './qbsTable/utilities/tablecalc';
 
 // Import the custom select component
@@ -15,6 +16,8 @@ type PageProps = {
     onRowsPerPage?: (row: number, page: number) => void;
     onPagination?: (row: number, page: number) => void;
   };
+  labels?: QbsTableLabels;
+  dataTheme?: string;
 };
 
 const PageIndex = ({ currentPage, handleFirst, pageCount }) => {
@@ -52,7 +55,8 @@ const PageIndex = ({ currentPage, handleFirst, pageCount }) => {
   return <>{renderPageNumbers()}</>;
 };
 
-const Pagination: FC<PageProps> = ({ paginationProps }) => {
+const Pagination: FC<PageProps> = ({ paginationProps, labels: labelsProp, dataTheme }) => {
+  const labels = mergeLabels(labelsProp);
   const {
     dropOptions = [10, 20, 50, 100, 200],
     currentPage = 1,
@@ -96,9 +100,12 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
   return (
     <div
       className="qbs-table-custom-pagination"
+      data-theme={dataTheme}
       style={{ display: 'flex', justifyContent: 'space-between' }}
     >
-      <div className="rows-count">{getRowDisplayRange(total, rowsPerPageState, currentPage)}</div>
+      <div className="rows-count">
+        {getRowDisplayRange(total, rowsPerPageState, currentPage, labels.showingRange)}
+      </div>
       <div className="qbs-table-pagination-right-block">
         <button
           className="qbs-table-icon-container"
@@ -194,7 +201,7 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
         </button>
       </div>
       <div className="qbs-table-pagination-flexBox">
-        <span className="qbs-table-pagination-text">Items per page</span>
+        <span className="qbs-table-pagination-text">{labels.itemsPerPage}</span>
         <CustomSelect
           options={dropData}
           selectedValue={rowsPerPageState}

package/src/index.ts

@@ -11,7 +11,7 @@ export type { ColumnProps } from './Column';
 export type { CellProps } from './Cell';
 export type { HeaderCellProps } from './HeaderCell';
 export type { ColumnGroupProps } from './ColumnGroup';
-export type { QbsTableProps } from './qbsTable/commontypes';
+export type { QbsTableProps, QbsTableLabels } from './qbsTable/commontypes';
 export type {
   StandardProps,
   SortType,

package/src/less/qbs-table.less

@@ -104,12 +104,103 @@
   }
 }
 .qbs-table[data-theme='dark'] {
-  background-color: #333333;
-  color: #ffffff;
+  background-color: #1f1f1f;
+  color: #f5f5f5;
+
+  .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: #333333;
-  color: #ffffff;
+  background-color: #262626;
+  color: #f5f5f5;
 }
 /* Dropdown container */
 .qbs-table-menu-dropdown {

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 { mergeLabels } from './labels';
 import {
   ActionCell,
   CheckCell,
@@ -105,12 +106,18 @@ const QbsTable: React.FC<QbsTableProps> = ({
   setRowViewToggle,
   dropType = 'horizondal',
   rowHeight,
-  isFullScreen
+  isFullScreen,
+  showHeader = true,
+  labels: labelsProp
 }) => {
+  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(() => localStorage.getItem('theme') ?? theme, [theme]);
+  const dataTheme = useMemo(
+    () => theme ?? (typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) ?? 'light',
+    [theme]
+  );
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>(null);
   const [tableViewToggle, setTableViewToggle] = useState(tableView);
@@ -272,11 +279,25 @@ const QbsTable: React.FC<QbsTableProps> = ({
     fullWidthView: fullWidthView,
     setTableFullView: setTableFullView,
     setRowViewToggle: setRowViewToggle,
-    isFullScreen: isFullScreen
+    isFullScreen: isFullScreen,
+    labels
   };
-  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');
@@ -301,7 +322,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
       themeToggle?.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [themeToggle]);
+  }, [theme, themeToggle]);
 
   const handleExpanded = useCallback(
     (rowData: any) => {
@@ -637,7 +658,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
               renderEmpty ? (
                 renderEmpty(info)
               ) : (
-                <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
+                <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
               )
             }
             columns={columns}
@@ -645,7 +666,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             headerHeight={headerHeight}
             rowExpandedHeight={rowExpandedHeight}
             loading={isLoading ?? loading}
-            showHeader
+            showHeader={showHeader}
             defaultChecked
             expandedRowKeys={expandedRowKeys}
             onExpandChange={onExpandChange}
@@ -759,6 +780,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
+                      labels={labels}
                     />
                   </HeaderCell>
                   <Cell />
@@ -786,6 +808,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
+                      labels={labels}
                     />
                   )}
                 </HeaderCell>
@@ -818,7 +841,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 ?? 'No Data Found'} subtitle={emptySubTitle} />
+                <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
               </div>
             )}
             {isLoading ? (
@@ -845,6 +868,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       columns={columns}
                       tableBodyRef={tableBodyRef}
                       actionProps={actionProps}
+                      labels={labels}
                     />
                   )}
                 </div>
@@ -853,7 +877,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
           </div>
         )}
         <div>
-          {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
+          {pagination && data?.length > 0 && (
+            <Pagination paginationProps={paginationProps} labels={labels} dataTheme={dataTheme} />
+          )}
         </div>
       </div>
     </div>

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 { mergeLabels } from './labels';
 import {
   ActionCell,
   CheckCell,
@@ -82,12 +83,17 @@ const QbsTable: React.FC<QbsTableProps> = ({
   autoHeight,
   emptySubTitle,
   emptyTitle,
-  dropType = 'horizontal'
+  dropType = 'horizontal',
+  labels: labelsProp
 }) => {
+  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(() => localStorage.getItem('theme') ?? theme, [theme]);
+  const dataTheme = useMemo(
+    () => theme ?? (typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) ?? 'light',
+    [theme]
+  );
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>(null);
   const tableBodyRef = useRef<HTMLDivElement>(null);
@@ -228,11 +234,25 @@ const QbsTable: React.FC<QbsTableProps> = ({
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
     dataLength: data?.length,
-    searchPlaceholder: searchPlaceholder
+    searchPlaceholder: searchPlaceholder,
+    labels
   };
-  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');
@@ -257,7 +277,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
       themeToggle?.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [themeToggle]);
+  }, [theme, themeToggle]);
 
   const handleExpanded = useCallback(
     (rowData: any) => {
@@ -463,7 +483,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             renderEmpty ? (
               renderEmpty(info)
             ) : (
-              <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
+              <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
             )
           }
           columns={columns}
@@ -581,6 +601,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
+                    labels={labels}
                   />
                 </HeaderCell>
                 <Cell />
@@ -606,6 +627,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
+                    labels={labels}
                   />
                 )}
               </HeaderCell>
@@ -622,7 +644,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
         </Table>
 
         <div>
-          {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
+          {pagination && data?.length > 0 && (
+            <Pagination paginationProps={paginationProps} labels={labels} dataTheme={dataTheme} />
+          )}
         </div>
       </div>
     </div>

package/src/qbsTable/Toolbar.tsx

@@ -5,6 +5,7 @@ import { QbsTableToolbarProps } from './commontypes';
 import debounce from './utilities/debounce';
 import { CardView, ContentView, DefaultView, ExpandIcon, TableView } from './utilities/icons';
 import SearchInput from './utilities/SearchInput';
+import { formatSelectedItems, mergeLabels } from './labels';
 import { getRowDisplayRange } from './utilities/tablecalc';
 import TooltipComponent from './utilities/ToolTip';
 
@@ -33,8 +34,10 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   fullWidthView = false,
   setTableFullView,
   setRowViewToggle,
-  isFullScreen = false
+  isFullScreen = false,
+  labels: labelsProp
 }) => {
+  const labels = mergeLabels(labelsProp);
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
   const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
   const toolbarRef = useRef<HTMLDivElement>(null);
@@ -79,7 +82,8 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
           <div className="qbs-table-primary-filter">
             {search && (
               <SearchInput
-                placeholder={searchPlaceholder ?? 'Search'}
+                placeholder={searchPlaceholder ?? labels.search}
+                searchAriaLabel={labels.searchAriaLabel}
                 handleChange={handleChange}
                 handleSearch={handleSearch}
                 searchValue={searchParam}
@@ -114,12 +118,12 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
               <div className="flex gap-2 qbs-row-switch-cntainer">
                 {rowViewToggle && (
                   <div className="flex gap-2 table_cell_style">
-                    <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Default View'}>
+                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToDefaultView}>
                       <div onClick={() => setRowViewToggle?.(true)}>
                         <DefaultView className={`${defaultRowView ? 'active' : ''}`} />
                       </div>
                     </TooltipComponent>
-                    <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Compact View'}>
+                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToRelaxedView}>
                       <div onClick={() => setRowViewToggle?.(false)}>
                         <ContentView className={`${!defaultRowView ? 'active' : ''}`} />
                       </div>
@@ -128,7 +132,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                 )}
                 {isFullScreen && (
                   <div className=" table_full_width">
-                    <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Full Screen'}>
+                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToFullScreen}>
                       <div onClick={() => setTableFullView?.(!fullWidthView)}>
                         <ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
                       </div>
@@ -140,7 +144,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
 
             {enableTableToggle && !isMobile && (
               <div className="qbs-table-top-icons flex gap-2">
-                <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Table View'}>
+                <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToTableView}>
                   <div onClick={() => setTableViewToggle?.(true)}>
                     <TableView className={`${tableViewToggle ? 'active' : ''}`} />
                   </div>
@@ -149,7 +153,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                 <div className="border-r h-4 w-1"></div>
 
                 <div onClick={() => setTableViewToggle?.(false)}>
-                  <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Card View'}>
+                  <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToCardView}>
                     <CardView className={`${!tableViewToggle ? 'active' : ''}`} />
                   </TooltipComponent>
                 </div>
@@ -175,21 +179,24 @@ 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(labels.selectedItems, checkedKeys?.length ?? 0)}
+              </div>
               <div className="selected-row-action">
                 <button className="btn" onClick={() => onSelect?.([])}>
-                  Clear
+                  {labels.clear}
                 </button>
                 {selectedRowActions?.map((actions, index: number) => (
                   <>
                     {handleHide(actions) && (
                       <button
                         key={index.toString()}
-                        className="btn"
+                        className={`btn ${actions?.buttonClassName}`}
                         disabled={actions.disabled}
                         onClick={() => actions?.action(checkedKeys)}
                       >
-                        {actions.actionTitle}
+                        {actions?.icon && <span className="mr-2">{actions?.icon}</span>}
+                        <span>{actions.actionTitle}</span>
                       </button>
                     )}
                   </>
@@ -203,7 +210,8 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                   {getRowDisplayRange(
                     paginationProps.total ?? 0,
                     paginationProps.rowsPerPage ?? 0,
-                    paginationProps.currentPage ?? 0
+                    paginationProps.currentPage ?? 0,
+                    labels.showingRange
                   )}
                 </div>
               )}

package/src/qbsTable/commontypes.ts

@@ -1,5 +1,9 @@
 import React, { ReactElement, ReactNode } from 'react';
 
+import type { QbsTableLabels } from './labels';
+
+export type { QbsTableLabels };
+
 interface Content {
   cell: ReactNode | string;
   toolTip?: string;
@@ -94,12 +98,15 @@ 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 };
@@ -142,7 +149,8 @@ export interface QbsTableProps {
   setRowViewToggle?: (value: boolean) => void;
   dropType?: 'horizondal' | 'vertical';
   rowHeight?: number;
-  isFullScreen?: boolean
+  isFullScreen?: boolean;
+  showHeader?: boolean;
 }
 
 export interface QbsTableToolbarProps {
@@ -168,6 +176,7 @@ export interface QbsTableToolbarProps {
   dataLength: number;
   headerHeight?: number;
   searchPlaceholder?: string;
+  labels?: QbsTableLabels;
   tableView?: boolean;
   enableTableToggle?: boolean;
   tableViewToggle?: boolean;
@@ -178,11 +187,13 @@ 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
+  isFullScreen?: boolean;
 }

package/src/qbsTable/labels.ts

@@ -0,0 +1,58 @@
+export interface QbsTableLabels {
+  search?: string;
+  searchAriaLabel?: string;
+  clear?: string;
+  selectedItems?: string;
+  switchToDefaultView?: string;
+  switchToRelaxedView?: string;
+  switchToFullScreen?: string;
+  switchToTableView?: string;
+  switchToCardView?: string;
+  noDataFound?: string;
+  showingRange?: (start: number, end: number, total: number) => string;
+  itemsPerPage?: string;
+  fixedColumns?: string;
+  visibleColumns?: string;
+  availableColumns?: string;
+  resetToDefault?: string;
+  save?: string;
+  viewMore?: string;
+  viewLess?: string;
+  actions?: string;
+}
+
+export const DEFAULT_QBS_TABLE_LABELS: Required<
+  Omit<QbsTableLabels, 'showingRange'>
+> & {
+  showingRange: (start: number, end: number, total: number) => string;
+} = {
+  search: 'Search',
+  searchAriaLabel: 'Search',
+  clear: 'Clear',
+  selectedItems: 'Selected Items',
+  switchToDefaultView: 'Switch to Default View',
+  switchToRelaxedView: 'Switch to Relaxed View',
+  switchToFullScreen: 'Switch to Full Screen',
+  switchToTableView: 'Switch to Table View',
+  switchToCardView: 'Switch to Card View',
+  noDataFound: 'No Data Found',
+  showingRange: (start, end, total) => `Showing ${start} to ${end} of ${total}`,
+  itemsPerPage: 'Items per page',
+  fixedColumns: 'FIXED COLUMNS',
+  visibleColumns: 'VISIBLE COLUMNS',
+  availableColumns: 'AVAILABLE COLUMNS',
+  resetToDefault: 'Reset to default',
+  save: 'Save',
+  viewMore: 'View More',
+  viewLess: 'View Less',
+  actions: 'Actions'
+};
+
+export const mergeLabels = (labels?: QbsTableLabels) => ({
+  ...DEFAULT_QBS_TABLE_LABELS,
+  ...labels,
+  showingRange: labels?.showingRange ?? DEFAULT_QBS_TABLE_LABELS.showingRange
+});
+
+export const formatSelectedItems = (selectedItemsLabel: string, count: number) =>
+  `${selectedItemsLabel}(${count}) `;

package/src/qbsTable/utilities/CardComponent.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 
 import { QbsColumnProps } from '../commontypes';
+import { mergeLabels, type QbsTableLabels } from '../labels';
 import CardMenuDropdown from './CardMenuDropdown';
 import { handleCellFormat } from './handleFormatCell';
 import { ArrowUpIcon } from './icons';
@@ -17,6 +18,7 @@ type Props = {
   handleMenuActions?: () => void;
   cardColumLimit?: number;
   childDetailHeading?: string;
+  labels?: QbsTableLabels;
 };
 
 const CardComponent: React.FC<Props> = ({
@@ -27,8 +29,10 @@ const CardComponent: React.FC<Props> = ({
   index,
   cardColumLimit = 5,
   handleMenuActions,
-  childDetailHeading = ''
+  childDetailHeading = '',
+  labels: labelsProp
 }) => {
+  const labels = mergeLabels(labelsProp);
   const [viewMore, setViewMore] = useState(false);
   const initialDisplayCount = cardColumLimit;
 
@@ -102,13 +106,14 @@ const CardComponent: React.FC<Props> = ({
                 iconName="more"
                 rowIndex={index}
                 handleMenuActions={handleMenuActions}
+                labels={labels}
               />
             </div>
 
             {columns.length > initialDisplayCount && (
               <TooltipComponent
                 tableBodyRef={useCardRef}
-                title={viewMore ? ' View Less' : 'View More'}
+                title={viewMore ? labels.viewLess : labels.viewMore}
                 enabled={false}
               >
                 <button