qbs-react-grid 2.2.5 → 2.2.9

package/es/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/es/qbsTable/CustomTableCell.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
-  _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
-  _excluded3 = ["rowData", "renderCell", "toolTip", "hideLink", "dataKey", "onChange", "rowClick", "type", "path", "link"],
-  _excluded4 = ["rowData", "getToolTip", "dataKey", "onChange", "rowClick", "getIcon", "path", "link"];
+  _excluded2 = ["rowData", "handleMenuActions", "dataTheme", "actionProps", "tableBodyRef", "rowIndex", "dropType"],
+  _excluded3 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
+  _excluded4 = ["rowData", "renderCell", "toolTip", "hideLink", "dataKey", "onChange", "rowClick", "type", "path", "link"],
+  _excluded5 = ["rowData", "getToolTip", "dataKey", "onChange", "rowClick", "getIcon", "path", "link"];
 import React, { useRef, useState } from 'react';
 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';
 var CHECKBOX_LINE_HEIGHT = '36px';
 export var CheckCell = /*#__PURE__*/React.memo(function (_ref) {
   var rowData = _ref.rowData,
@@ -53,8 +55,21 @@ export var ActionCell = /*#__PURE__*/React.memo(function (_ref2) {
     dataTheme = _ref2.dataTheme,
     actionProps = _ref2.actionProps,
     tableBodyRef = _ref2.tableBodyRef,
-    rowIndex = _ref2.rowIndex;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MenuDropDown, {
+    rowIndex = _ref2.rowIndex,
+    dropType = _ref2.dropType,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
+    dataTheme: dataTheme,
+    style: {
+      padding: 0
+    }
+  }), dropType === 'vertical' ? /*#__PURE__*/React.createElement(VerticalMenuDropdown, {
+    tableBodyRef: tableBodyRef,
+    actionDropDown: actionProps,
+    rowData: rowData,
+    rowIndex: rowIndex,
+    handleMenuActions: handleMenuActions
+  }) : /*#__PURE__*/React.createElement(MenuDropDown, {
     tableBodyRef: tableBodyRef,
     actionDropDown: actionProps,
     rowData: rowData,
@@ -68,8 +83,10 @@ export var ExpandCell = /*#__PURE__*/React.memo(function (_ref3) {
     dataKey = _ref3.dataKey,
     expandedRowKeys = _ref3.expandedRowKeys,
     onChange = _ref3.onChange,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
   return /*#__PURE__*/React.createElement(Cell, props, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "qbs-table-expand-btn",
     onClick: function onClick() {
       onChange(rowData);
     }
@@ -85,7 +102,7 @@ export var ExpandCell = /*#__PURE__*/React.memo(function (_ref3) {
     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"
   })) : /*#__PURE__*/React.createElement("svg", {
     width: "7",
     height: "10",
@@ -96,7 +113,7 @@ export var ExpandCell = /*#__PURE__*/React.memo(function (_ref3) {
     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"
   }))));
 });
 export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
@@ -111,7 +128,7 @@ export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
     type = _ref4.type,
     path = _ref4.path,
     link = _ref4.link,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
     dataKey: dataKey
   }), link && !path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/React.createElement("a", {
@@ -134,7 +151,7 @@ export var CustomRowStatus = /*#__PURE__*/React.memo(function (_ref5) {
     getIcon = _ref5.getIcon,
     path = _ref5.path,
     link = _ref5.link,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded4);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
   var _useState = useState('bottom-position'),
     dropdownPosition = _useState[0],
     setDropdownPosition = _useState[1];

package/es/qbsTable/QbsTable.js

@@ -7,6 +7,7 @@ import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
 import useResponsiveStore from '../utils/useResponsiveStore';
+import { mergeQbsTableLabels } from './labels';
 import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
 import ToolBar from './Toolbar';
 import CardComponent from './utilities/CardComponent';
@@ -106,7 +107,26 @@ var QbsTable = function QbsTable(_ref) {
     _ref$isCustomTableCar = _ref.isCustomTableCardView,
     isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
     handleTableCardView = _ref.handleTableCardView,
-    handleCustomCardLoader = _ref.handleCustomCardLoader;
+    handleCustomCardLoader = _ref.handleCustomCardLoader,
+    dropType = _ref.dropType,
+    labelsProp = _ref.labels,
+    _ref$rtl = _ref.rtl,
+    rtl = _ref$rtl === void 0 ? false : _ref$rtl,
+    _ref$rowViewToggle = _ref.rowViewToggle,
+    rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
+    _ref$defaultRowView = _ref.defaultRowView,
+    defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
+    _ref$fullWidthView = _ref.fullWidthView,
+    fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
+    setTableFullView = _ref.setTableFullView,
+    setRowViewToggle = _ref.setRowViewToggle,
+    _ref$isFullScreen = _ref.isFullScreen,
+    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
+    rowHeight = _ref.rowHeight;
+  var labels = useMemo(function () {
+    return mergeQbsTableLabels(labelsProp);
+  }, [labelsProp]);
+  var pinSide = rtl ? 'left' : 'right';
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -259,7 +279,15 @@ var QbsTable = function QbsTable(_ref) {
     searchPlaceholder: searchPlaceholder,
     setTableViewToggle: setTableViewToggle,
     tableViewToggle: tableViewToggle,
-    enableTableToggle: enableTableToggle
+    enableTableToggle: enableTableToggle,
+    rowViewToggle: rowViewToggle,
+    defaultRowView: defaultRowView,
+    fullWidthView: fullWidthView,
+    setTableFullView: setTableFullView,
+    setRowViewToggle: setRowViewToggle,
+    isFullScreen: isFullScreen,
+    labels: labels,
+    rtl: rtl
   };
   var themeToggle = useMemo(function () {
     return document.getElementById('themeToggle');
@@ -559,6 +587,7 @@ var QbsTable = function QbsTable(_ref) {
     height: autoHeight ? undefined : height,
     key: tableKey,
     tableKey: tableKey,
+    rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
@@ -583,6 +612,7 @@ var QbsTable = function QbsTable(_ref) {
     columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
+    rowHeight: rowHeight,
     rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
     showHeader: true,
@@ -667,7 +697,7 @@ var QbsTable = function QbsTable(_ref) {
     getToolTip: customRowStatus.getToolTip
   })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/React.createElement(Column, {
     width: 40,
-    fixed: "right"
+    fixed: pinSide
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -681,10 +711,12 @@ var QbsTable = function QbsTable(_ref) {
     tableHeight: height,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels,
+    rtl: rtl
   })), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
     width: 40,
-    fixed: "right"
+    fixed: pinSide
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -698,13 +730,16 @@ var QbsTable = function QbsTable(_ref) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels,
+    rtl: rtl
   })), /*#__PURE__*/React.createElement(ActionCell, {
     tableBodyRef: tableBodyRef,
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    dropType: dropType
   }))) : /*#__PURE__*/React.createElement("div", {
     className: isCustomTableCardView && ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading ? 'qbs-card-empty-wrapper' : isCustomTableCardView ? 'qbs-card-wrapper' : ' p-2',
     style: {

package/es/qbsTable/TableCardList.js

@@ -6,6 +6,7 @@ import ColumnGroup from '../ColumnGroup';
 import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
+import { mergeQbsTableLabels } from './labels';
 import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
 import ToolBar from './Toolbar';
 import ColumToggle from './utilities/ColumShowHide';
@@ -91,7 +92,25 @@ var QbsTable = function QbsTable(_ref) {
     _renderEmpty = _ref.renderEmpty,
     autoHeight = _ref.autoHeight,
     emptySubTitle = _ref.emptySubTitle,
-    emptyTitle = _ref.emptyTitle;
+    emptyTitle = _ref.emptyTitle,
+    dropType = _ref.dropType,
+    labelsProp = _ref.labels,
+    _ref$rtl = _ref.rtl,
+    rtl = _ref$rtl === void 0 ? false : _ref$rtl,
+    _ref$rowViewToggle = _ref.rowViewToggle,
+    rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
+    _ref$defaultRowView = _ref.defaultRowView,
+    defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
+    _ref$fullWidthView = _ref.fullWidthView,
+    fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
+    setTableFullView = _ref.setTableFullView,
+    setRowViewToggle = _ref.setRowViewToggle,
+    _ref$isFullScreen = _ref.isFullScreen,
+    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen;
+  var labels = useMemo(function () {
+    return mergeQbsTableLabels(labelsProp);
+  }, [labelsProp]);
+  var pinSide = rtl ? 'left' : 'right';
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -237,7 +256,15 @@ var QbsTable = function QbsTable(_ref) {
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
     dataLength: data === null || data === void 0 ? void 0 : data.length,
-    searchPlaceholder: searchPlaceholder
+    searchPlaceholder: searchPlaceholder,
+    rowViewToggle: rowViewToggle,
+    defaultRowView: defaultRowView,
+    fullWidthView: fullWidthView,
+    setTableFullView: setTableFullView,
+    setRowViewToggle: setRowViewToggle,
+    isFullScreen: isFullScreen,
+    labels: labels,
+    rtl: rtl
   };
   var themeToggle = useMemo(function () {
     return document.getElementById('themeToggle');
@@ -418,6 +445,7 @@ var QbsTable = function QbsTable(_ref) {
     height: autoHeight ? undefined : height,
     key: tableKey,
     tableKey: tableKey,
+    rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
@@ -526,7 +554,7 @@ var QbsTable = function QbsTable(_ref) {
     getToolTip: customRowStatus.getToolTip
   })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/React.createElement(Column, {
     width: 40,
-    fixed: "right"
+    fixed: pinSide
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -540,10 +568,12 @@ var QbsTable = function QbsTable(_ref) {
     tableHeight: height,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels,
+    rtl: rtl
   })), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
     width: 40,
-    fixed: "right"
+    fixed: pinSide
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -557,13 +587,16 @@ var QbsTable = function QbsTable(_ref) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels,
+    rtl: rtl
   })), /*#__PURE__*/React.createElement(ActionCell, {
     tableBodyRef: tableBodyRef,
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    dropType: dropType
   }))), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
     paginationProps: paginationProps
   }))));

package/es/qbsTable/Toolbar.js

@@ -1,12 +1,13 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import useResponsiveStore from '../utils/useResponsiveStore';
+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';
 var ToolBar = function ToolBar(_ref) {
-  var _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
+  var _ref2, _labels$switchToDefau, _labels$switchToRelax, _labels$switchToFullS, _labels$switchToTable, _labels$switchToCardV, _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
   var pagination = _ref.pagination,
     _ref$paginationProps = _ref.paginationProps,
     paginationProps = _ref$paginationProps === void 0 ? {} : _ref$paginationProps,
@@ -27,7 +28,23 @@ var ToolBar = function ToolBar(_ref) {
     tableViewToggle = _ref.tableViewToggle,
     setTableViewToggle = _ref.setTableViewToggle,
     _ref$enableTableToggl = _ref.enableTableToggle,
-    enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl;
+    enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
+    _ref$rowViewToggle = _ref.rowViewToggle,
+    rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
+    _ref$defaultRowView = _ref.defaultRowView,
+    defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
+    _ref$fullWidthView = _ref.fullWidthView,
+    fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
+    setTableFullView = _ref.setTableFullView,
+    setRowViewToggle = _ref.setRowViewToggle,
+    _ref$isFullScreen = _ref.isFullScreen,
+    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
+    labelsProp = _ref.labels,
+    _ref$rtl = _ref.rtl,
+    rtl = _ref$rtl === void 0 ? false : _ref$rtl;
+  var labels = useMemo(function () {
+    return mergeQbsTableLabels(labelsProp);
+  }, [labelsProp]);
   var debouncedOnSearch = useCallback(debounce(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var _useState = useState(searchValue),
     searchParam = _useState[0],
@@ -52,11 +69,11 @@ var ToolBar = function ToolBar(_ref) {
   var handleHide = function handleHide(actions) {
     if (actions.hidden) {
       return false;
-    } else if (actions.customHide == '>2') {
-      return checkedKeys && (checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) >= 2 ? true : false;
-    } else {
-      return true;
     }
+    if (actions.customHide === '>2') {
+      return checkedKeys && (checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) >= 2;
+    }
+    return true;
   };
   var isMobile = useResponsiveStore();
   var handleFilterClick = function handleFilterClick() {
@@ -64,9 +81,10 @@ var ToolBar = function ToolBar(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-toolbar-container",
-    ref: toolbarRef
+    ref: toolbarRef,
+    dir: rtl ? 'rtl' : 'ltr'
   }, /*#__PURE__*/React.createElement("div", {
-    className: "qbs-table-toolbar " + className
+    className: "qbs-table-toolbar " + (className != null ? className : '')
   }, /*#__PURE__*/React.createElement("div", {
     className: "start-container",
     style: {
@@ -76,7 +94,7 @@ var ToolBar = function ToolBar(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-primary-filter"
   }, search && /*#__PURE__*/React.createElement(SearchInput, {
-    placeholder: searchPlaceholder != null ? searchPlaceholder : 'Search',
+    placeholder: (_ref2 = searchPlaceholder != null ? searchPlaceholder : labels.search) != null ? _ref2 : 'Search',
     handleChange: handleChange,
     handleSearch: handleSearch,
     searchValue: searchParam
@@ -97,13 +115,54 @@ var ToolBar = function ToolBar(_ref) {
     strokeLinejoin: "round",
     d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
   }))), tableHeaderActions, /*#__PURE__*/React.createElement("div", {
-    className: " pr-1 cursor-pointer relative  "
-  }, enableTableToggle && !isMobile && /*#__PURE__*/React.createElement("div", {
+    className: "pr-1 cursor-pointer relative table_custom_ctions"
+  }, (rowViewToggle || isFullScreen) && /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 qbs-row-switch-container"
+  }, rowViewToggle && /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2 table_cell_style qbs-table-top-icons"
+  }, /*#__PURE__*/React.createElement(TooltipComponent, {
+    tableBodyRef: toolbarRef,
+    title: (_labels$switchToDefau = labels.switchToDefaultView) != null ? _labels$switchToDefau : ''
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "qbs-table-view-btn",
+    onClick: function onClick() {
+      return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
+    }
+  }, /*#__PURE__*/React.createElement(DefaultView, {
+    className: "" + (defaultRowView ? 'active' : '')
+  }))), /*#__PURE__*/React.createElement(TooltipComponent, {
+    tableBodyRef: toolbarRef,
+    title: (_labels$switchToRelax = labels.switchToRelaxedView) != null ? _labels$switchToRelax : ''
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "qbs-table-view-btn",
+    onClick: function onClick() {
+      return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
+    }
+  }, /*#__PURE__*/React.createElement(ContentView, {
+    className: "" + (!defaultRowView ? 'active' : '')
+  })))), isFullScreen && /*#__PURE__*/React.createElement("div", {
+    className: "table_full_width qbs-table-top-icons"
+  }, /*#__PURE__*/React.createElement(TooltipComponent, {
+    tableBodyRef: toolbarRef,
+    title: (_labels$switchToFullS = labels.switchToFullScreen) != null ? _labels$switchToFullS : ''
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "qbs-table-view-btn",
+    onClick: function onClick() {
+      return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
+    }
+  }, /*#__PURE__*/React.createElement(ExpandIcon, {
+    className: "" + (fullWidthView ? 'active' : '')
+  }))))), enableTableToggle && !isMobile && /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-top-icons flex gap-2"
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Table View'
-  }, /*#__PURE__*/React.createElement("div", {
+    title: (_labels$switchToTable = labels.switchToTableView) != null ? _labels$switchToTable : ''
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "qbs-table-view-btn",
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(true);
     }
@@ -111,13 +170,15 @@ var ToolBar = function ToolBar(_ref) {
     className: "" + (tableViewToggle ? 'active' : '')
   }))), /*#__PURE__*/React.createElement("div", {
     className: "border-r h-4 w-1"
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(TooltipComponent, {
+    tableBodyRef: toolbarRef,
+    title: (_labels$switchToCardV = labels.switchToCardView) != null ? _labels$switchToCardV : ''
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "qbs-table-view-btn",
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(false);
     }
-  }, /*#__PURE__*/React.createElement(TooltipComponent, {
-    tableBodyRef: toolbarRef,
-    title: 'Switch to Card View'
   }, /*#__PURE__*/React.createElement(CardView, {
     className: "" + (!tableViewToggle ? 'active' : '')
   }))))))), isMobile && isOpen && /*#__PURE__*/React.createElement("div", {
@@ -130,16 +191,19 @@ var ToolBar = function ToolBar(_ref) {
     className: "qbs-table-toolbar-sub-container-start"
   }, /*#__PURE__*/React.createElement("div", {
     className: "selected-row"
-  }, "Selected Items(" + (checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) + ") "), /*#__PURE__*/React.createElement("div", {
+  }, formatSelectedItems(checkedKeys.length, labels)), /*#__PURE__*/React.createElement("div", {
     className: "selected-row-action"
   }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: "btn",
     onClick: function onClick() {
       return onSelect === null || onSelect === void 0 ? void 0 : onSelect([]);
     }
-  }, "Clear"), selectedRowActions === null || selectedRowActions === void 0 ? void 0 : selectedRowActions.map(function (actions, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, handleHide(actions) && /*#__PURE__*/React.createElement("button", {
-      key: index.toString(),
+  }, labels.clear), selectedRowActions === null || selectedRowActions === void 0 ? void 0 : selectedRowActions.map(function (actions, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index.toString()
+    }, handleHide(actions) && /*#__PURE__*/React.createElement("button", {
+      type: "button",
       className: "btn",
       disabled: actions.disabled,
       onClick: function onClick() {

package/es/qbsTable/commontypes.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
+import type { QbsTableLabels } from './labels';
 interface Content {
     cell: ReactNode | string;
     toolTip?: string;
@@ -82,6 +83,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;
@@ -127,6 +131,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 {
     title?: string;
@@ -155,6 +166,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/es/qbsTable/labels.d.ts

@@ -0,0 +1,25 @@
+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 declare const defaultQbsTableLabels: QbsTableLabels;
+export declare const mergeQbsTableLabels: (overrides?: QbsTableLabels) => QbsTableLabels;
+export declare const formatSelectedItems: (count: number, labels?: QbsTableLabels) => string;