qbs-react-grid 2.2.6 → 2.2.11

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,
@@ -92,8 +93,22 @@ const QbsTable: React.FC<QbsTableProps> = ({
   isCustomTableCardView = false,
   handleTableCardView,
   handleCustomCardLoader,
-  dropType
+  dropType,
+  labels: labelsProp,
+  rtl = false,
+  rowViewToggle = false,
+  defaultRowView = true,
+  fullWidthView = false,
+  setTableFullView,
+  setRowViewToggle,
+  isFullScreen = false,
+  rowHeight,
 }) => {
+  const labels = useMemo(() => mergeQbsTableLabels(labelsProp), [labelsProp]);
+  const effectiveWordWrap = useMemo(() => {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? wordWrap : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
@@ -103,6 +118,14 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const [tableViewToggle, setTableViewToggle] = useState(tableView);
   const isMobile = useResponsiveStore();
   const tableBodyRef = useRef<HTMLDivElement>(null);
+  const [rowViewRefreshKey, setRowViewRefreshKey] = useState(0);
+
+  useEffect(() => {
+    if (rowViewToggle) {
+      setRowViewRefreshKey(key => key + 1);
+    }
+  }, [defaultRowView, rowViewToggle]);
+
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
       setLoading(true);
@@ -252,7 +275,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, []);
 
@@ -582,12 +613,13 @@ const QbsTable: React.FC<QbsTableProps> = ({
         {tableViewToggle ? (
           <Table
             height={autoHeight ? undefined : height}
-            key={tableKey}
+            key={`${tableKey}-${rowViewRefreshKey}`}
             tableKey={tableKey}
+            rtl={rtl}
             data={data}
             tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
             dataTheme={dataTheme}
-            wordWrap={wordWrap}
+            wordWrap={effectiveWordWrap}
             autoHeight={autoHeight}
             sortColumn={sortColumn}
             style={{ position: 'relative' }}
@@ -607,6 +639,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             columns={columns}
             minHeight={minHeight}
             headerHeight={headerHeight}
+            rowHeight={rowHeight}
             rowExpandedHeight={rowExpandedHeight}
             loading={isLoading ?? loading}
             showHeader
@@ -722,6 +755,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
+                      labels={labels}
+                      rtl={rtl}
                     />
                   </HeaderCell>
                   <Cell />
@@ -747,6 +782,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
+                      labels={labels}
+                      rtl={rtl}
                     />
                   )}
                 </HeaderCell>

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,
@@ -82,8 +83,21 @@ const QbsTable: React.FC<QbsTableProps> = ({
   autoHeight,
   emptySubTitle,
   emptyTitle,
-  dropType
+  dropType,
+  labels: labelsProp,
+  rtl = false,
+  rowViewToggle = false,
+  defaultRowView = true,
+  fullWidthView = false,
+  setTableFullView,
+  setRowViewToggle,
+  isFullScreen = false,
 }) => {
+  const labels = useMemo(() => mergeQbsTableLabels(labelsProp), [labelsProp]);
+  const effectiveWordWrap = useMemo(() => {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? wordWrap : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
@@ -237,7 +251,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, []);
 
@@ -455,10 +477,11 @@ 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}
-          wordWrap={wordWrap}
+          wordWrap={effectiveWordWrap}
           autoHeight={autoHeight}
           sortColumn={sortColumn}
           style={{ position: 'relative' }}
@@ -591,6 +614,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
+                    labels={labels}
+                    rtl={rtl}
                   />
                 </HeaderCell>
                 <Cell />
@@ -616,6 +641,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
                     handleColumnToggle={handleColumnToggle}
+                    labels={labels}
+                    rtl={rtl}
                   />
                 )}
               </HeaderCell>

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,16 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   searchPlaceholder,
   tableViewToggle,
   setTableViewToggle,
-  enableTableToggle = false
+  enableTableToggle = false,
+  rowViewToggle = false,
+  defaultRowView = true,
+  fullWidthView = false,
+  setTableFullView,
+  setRowViewToggle,
+  isFullScreen = false,
+  labels: labelsProp,
 }) => {
+  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 +48,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
         debouncedOnSearch(e);
       }
     },
-    [debouncedOnSearch]
+    [debouncedOnSearch],
   );
 
   const handleChange = useCallback(
@@ -51,29 +60,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 ${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 +113,89 @@ 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-cntainer">
+                {rowViewToggle && (
+                  <div className="flex gap-2 table_cell_style qbs-table-top-icons">
+                    <TooltipComponent
+                      tableBodyRef={toolbarRef}
+                      title={labels.switchToDefaultView ?? ''}
+                    >
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        title={labels.switchToDefaultView}
+                        onClick={() => setRowViewToggle?.(true)}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            setRowViewToggle?.(true);
+                          }
+                        }}
+                      >
+                        <DefaultView className={`${defaultRowView ? 'active' : ''}`} />
+                      </div>
+                    </TooltipComponent>
+                    <TooltipComponent
+                      tableBodyRef={toolbarRef}
+                      title={labels.switchToRelaxedView ?? ''}
+                    >
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        title={labels.switchToRelaxedView}
+                        onClick={() => setRowViewToggle?.(false)}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            setRowViewToggle?.(false);
+                          }
+                        }}
+                      >
+                        <ContentView className={`${!defaultRowView ? 'active' : ''}`} />
+                      </div>
+                    </TooltipComponent>
+                  </div>
+                )}
+                {isFullScreen && (
+                  <div className="table_full_width qbs-table-top-icons">
+                    <TooltipComponent
+                      tableBodyRef={toolbarRef}
+                      title={labels.switchToFullScreen ?? ''}
+                    >
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        title={labels.switchToFullScreen}
+                        onClick={() => setTableFullView?.(!fullWidthView)}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            setTableFullView?.(!fullWidthView);
+                          }
+                        }}
+                      >
+                        <ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
+                      </div>
+                    </TooltipComponent>
+                  </div>
+                )}
+              </div>
+            )}
+
             {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>
                 </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 ?? ''}>
+                  <div onClick={() => setTableViewToggle?.(false)}>
                     <CardView className={`${!tableViewToggle ? 'active' : ''}`} />
-                  </TooltipComponent>
-                </div>
+                  </div>
+                </TooltipComponent>
               </div>
             )}
           </div>
@@ -141,16 +218,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 +237,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                         {actions.actionTitle}
                       </button>
                     )}
-                  </>
+                  </React.Fragment>
                 ))}
               </div>
             </div>
@@ -169,7 +248,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;
@@ -88,6 +90,8 @@ export interface QbsTableProps {
   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;
@@ -131,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 {
@@ -160,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;

package/src/qbsTable/labels.ts

@@ -0,0 +1,55 @@
+export type 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 defaultQbsTableLabels: QbsTableLabels = {
+  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 mergeQbsTableLabels = (overrides?: QbsTableLabels): QbsTableLabels => ({
+  ...defaultQbsTableLabels,
+  ...overrides,
+});
+
+export const formatSelectedItems = (count: number, labels?: QbsTableLabels): string => {
+  const merged = mergeQbsTableLabels(labels);
+  return `${merged.selectedItems} (${count})`;
+};