qbs-react-grid 2.2.5 → 2.2.9

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

@@ -10,10 +10,12 @@ var _reactRouterDom = require("react-router-dom");
 var _Cell = _interopRequireDefault(require("../Cell"));
 var _handleFormatCell = require("./utilities/handleFormatCell");
 var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
+var _VerticalDropDownMenu = _interopRequireDefault(require("./utilities/VerticalDropDownMenu"));
 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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var CHECKBOX_LINE_HEIGHT = '36px';
@@ -61,8 +63,21 @@ var ActionCell = /*#__PURE__*/_react["default"].memo(function (_ref2) {
     dataTheme = _ref2.dataTheme,
     actionProps = _ref2.actionProps,
     tableBodyRef = _ref2.tableBodyRef,
-    rowIndex = _ref2.rowIndex;
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_menuDropDown["default"], {
+    rowIndex = _ref2.rowIndex,
+    dropType = _ref2.dropType,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
+  return /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
+    dataTheme: dataTheme,
+    style: {
+      padding: 0
+    }
+  }), dropType === 'vertical' ? /*#__PURE__*/_react["default"].createElement(_VerticalDropDownMenu["default"], {
+    tableBodyRef: tableBodyRef,
+    actionDropDown: actionProps,
+    rowData: rowData,
+    rowIndex: rowIndex,
+    handleMenuActions: handleMenuActions
+  }) : /*#__PURE__*/_react["default"].createElement(_menuDropDown["default"], {
     tableBodyRef: tableBodyRef,
     actionDropDown: actionProps,
     rowData: rowData,
@@ -77,8 +92,10 @@ var ExpandCell = /*#__PURE__*/_react["default"].memo(function (_ref3) {
     dataKey = _ref3.dataKey,
     expandedRowKeys = _ref3.expandedRowKeys,
     onChange = _ref3.onChange,
-    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded2);
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded3);
   return /*#__PURE__*/_react["default"].createElement(_Cell["default"], props, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: "qbs-table-expand-btn",
     onClick: function onClick() {
       onChange(rowData);
     }
@@ -94,7 +111,7 @@ var ExpandCell = /*#__PURE__*/_react["default"].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["default"].createElement("svg", {
     width: "7",
     height: "10",
@@ -105,7 +122,7 @@ var ExpandCell = /*#__PURE__*/_react["default"].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"
   }))));
 });
 exports.ExpandCell = ExpandCell;
@@ -121,7 +138,7 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
     type = _ref4.type,
     path = _ref4.path,
     link = _ref4.link,
-    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded3);
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded4);
   return /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
     dataKey: dataKey
   }), link && !path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/_react["default"].createElement("a", {
@@ -145,7 +162,7 @@ var CustomRowStatus = /*#__PURE__*/_react["default"].memo(function (_ref5) {
     getIcon = _ref5.getIcon,
     path = _ref5.path,
     link = _ref5.link,
-    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, _excluded4);
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, _excluded5);
   var _useState = (0, _react.useState)('bottom-position'),
     dropdownPosition = _useState[0],
     setDropdownPosition = _useState[1];

package/lib/qbsTable/QbsTable.js

@@ -12,6 +12,7 @@ var _HeaderCell = _interopRequireDefault(require("../HeaderCell"));
 var _Pagination = _interopRequireDefault(require("../Pagination"));
 var _Table = _interopRequireDefault(require("../Table"));
 var _useResponsiveStore = _interopRequireDefault(require("../utils/useResponsiveStore"));
+var _labels = require("./labels");
 var _CustomTableCell = require("./CustomTableCell");
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _CardComponent = _interopRequireDefault(require("./utilities/CardComponent"));
@@ -112,7 +113,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 = (0, _react.useMemo)(function () {
+    return (0, _labels.mergeQbsTableLabels)(labelsProp);
+  }, [labelsProp]);
+  var pinSide = rtl ? 'left' : 'right';
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -265,7 +285,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 = (0, _react.useMemo)(function () {
     return document.getElementById('themeToggle');
@@ -565,6 +593,7 @@ var QbsTable = function QbsTable(_ref) {
     height: autoHeight ? undefined : height,
     key: tableKey,
     tableKey: tableKey,
+    rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
@@ -589,6 +618,7 @@ var QbsTable = function QbsTable(_ref) {
     columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
+    rowHeight: rowHeight,
     rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
     showHeader: true,
@@ -673,7 +703,7 @@ var QbsTable = function QbsTable(_ref) {
     getToolTip: customRowStatus.getToolTip
   })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
     width: 40,
-    fixed: "right"
+    fixed: pinSide
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -687,10 +717,12 @@ var QbsTable = function QbsTable(_ref) {
     tableHeight: height,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels,
+    rtl: rtl
   })), /*#__PURE__*/_react["default"].createElement(_Cell["default"], null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
     width: 40,
-    fixed: "right"
+    fixed: pinSide
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -704,13 +736,16 @@ var QbsTable = function QbsTable(_ref) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels,
+    rtl: rtl
   })), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
     tableBodyRef: tableBodyRef,
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    dropType: dropType
   }))) : /*#__PURE__*/_react["default"].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/lib/qbsTable/TableCardList.js

@@ -11,6 +11,7 @@ var _ColumnGroup = _interopRequireDefault(require("../ColumnGroup"));
 var _HeaderCell = _interopRequireDefault(require("../HeaderCell"));
 var _Pagination = _interopRequireDefault(require("../Pagination"));
 var _Table = _interopRequireDefault(require("../Table"));
+var _labels = require("./labels");
 var _CustomTableCell = require("./CustomTableCell");
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _ColumShowHide = _interopRequireDefault(require("./utilities/ColumShowHide"));
@@ -97,7 +98,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 = (0, _react.useMemo)(function () {
+    return (0, _labels.mergeQbsTableLabels)(labelsProp);
+  }, [labelsProp]);
+  var pinSide = rtl ? 'left' : 'right';
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -243,7 +262,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 = (0, _react.useMemo)(function () {
     return document.getElementById('themeToggle');
@@ -424,6 +451,7 @@ var QbsTable = function QbsTable(_ref) {
     height: autoHeight ? undefined : height,
     key: tableKey,
     tableKey: tableKey,
+    rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
@@ -532,7 +560,7 @@ var QbsTable = function QbsTable(_ref) {
     getToolTip: customRowStatus.getToolTip
   })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
     width: 40,
-    fixed: "right"
+    fixed: pinSide
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -546,10 +574,12 @@ var QbsTable = function QbsTable(_ref) {
     tableHeight: height,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels,
+    rtl: rtl
   })), /*#__PURE__*/_react["default"].createElement(_Cell["default"], null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
     width: 40,
-    fixed: "right"
+    fixed: pinSide
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
@@ -563,13 +593,16 @@ var QbsTable = function QbsTable(_ref) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels,
+    rtl: rtl
   })), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
     tableBodyRef: tableBodyRef,
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    dropType: dropType
   }))), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
     paginationProps: paginationProps
   }))));

package/lib/qbsTable/Toolbar.js

@@ -5,6 +5,7 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _useResponsiveStore = _interopRequireDefault(require("../utils/useResponsiveStore"));
+var _labels = require("./labels");
 var _debounce = _interopRequireDefault(require("./utilities/debounce"));
 var _icons = require("./utilities/icons");
 var _SearchInput = _interopRequireDefault(require("./utilities/SearchInput"));
@@ -13,7 +14,7 @@ var _ToolTip = _interopRequireDefault(require("./utilities/ToolTip"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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,
@@ -34,7 +35,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 = (0, _react.useMemo)(function () {
+    return (0, _labels.mergeQbsTableLabels)(labelsProp);
+  }, [labelsProp]);
   var debouncedOnSearch = (0, _react.useCallback)((0, _debounce["default"])(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var _useState = (0, _react.useState)(searchValue),
     searchParam = _useState[0],
@@ -59,11 +76,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 = (0, _useResponsiveStore["default"])();
   var handleFilterClick = function handleFilterClick() {
@@ -71,9 +88,10 @@ var ToolBar = function ToolBar(_ref) {
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-toolbar-container",
-    ref: toolbarRef
+    ref: toolbarRef,
+    dir: rtl ? 'rtl' : 'ltr'
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "qbs-table-toolbar " + className
+    className: "qbs-table-toolbar " + (className != null ? className : '')
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "start-container",
     style: {
@@ -83,7 +101,7 @@ var ToolBar = function ToolBar(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-primary-filter"
   }, search && /*#__PURE__*/_react["default"].createElement(_SearchInput["default"], {
-    placeholder: searchPlaceholder != null ? searchPlaceholder : 'Search',
+    placeholder: (_ref2 = searchPlaceholder != null ? searchPlaceholder : labels.search) != null ? _ref2 : 'Search',
     handleChange: handleChange,
     handleSearch: handleSearch,
     searchValue: searchParam
@@ -104,13 +122,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["default"].createElement("div", {
-    className: " pr-1 cursor-pointer relative  "
-  }, enableTableToggle && !isMobile && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "pr-1 cursor-pointer relative table_custom_ctions"
+  }, (rowViewToggle || isFullScreen) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex gap-2 qbs-row-switch-container"
+  }, rowViewToggle && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex gap-2 table_cell_style qbs-table-top-icons"
+  }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
+    tableBodyRef: toolbarRef,
+    title: (_labels$switchToDefau = labels.switchToDefaultView) != null ? _labels$switchToDefau : ''
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: "qbs-table-view-btn",
+    onClick: function onClick() {
+      return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icons.DefaultView, {
+    className: "" + (defaultRowView ? 'active' : '')
+  }))), /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
+    tableBodyRef: toolbarRef,
+    title: (_labels$switchToRelax = labels.switchToRelaxedView) != null ? _labels$switchToRelax : ''
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: "qbs-table-view-btn",
+    onClick: function onClick() {
+      return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icons.ContentView, {
+    className: "" + (!defaultRowView ? 'active' : '')
+  })))), isFullScreen && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "table_full_width qbs-table-top-icons"
+  }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
+    tableBodyRef: toolbarRef,
+    title: (_labels$switchToFullS = labels.switchToFullScreen) != null ? _labels$switchToFullS : ''
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: "qbs-table-view-btn",
+    onClick: function onClick() {
+      return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icons.ExpandIcon, {
+    className: "" + (fullWidthView ? 'active' : '')
+  }))))), enableTableToggle && !isMobile && /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-top-icons flex gap-2"
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Table View'
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+    title: (_labels$switchToTable = labels.switchToTableView) != null ? _labels$switchToTable : ''
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: "qbs-table-view-btn",
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(true);
     }
@@ -118,13 +177,15 @@ var ToolBar = function ToolBar(_ref) {
     className: "" + (tableViewToggle ? 'active' : '')
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "border-r h-4 w-1"
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
+    tableBodyRef: toolbarRef,
+    title: (_labels$switchToCardV = labels.switchToCardView) != null ? _labels$switchToCardV : ''
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: "qbs-table-view-btn",
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(false);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
-    tableBodyRef: toolbarRef,
-    title: 'Switch to Card View'
   }, /*#__PURE__*/_react["default"].createElement(_icons.CardView, {
     className: "" + (!tableViewToggle ? 'active' : '')
   }))))))), isMobile && isOpen && /*#__PURE__*/_react["default"].createElement("div", {
@@ -137,16 +198,19 @@ var ToolBar = function ToolBar(_ref) {
     className: "qbs-table-toolbar-sub-container-start"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "selected-row"
-  }, "Selected Items(" + (checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) + ") "), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _labels.formatSelectedItems)(checkedKeys.length, labels)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "selected-row-action"
   }, /*#__PURE__*/_react["default"].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["default"].createElement(_react["default"].Fragment, null, handleHide(actions) && /*#__PURE__*/_react["default"].createElement("button", {
-      key: index.toString(),
+  }, labels.clear), selectedRowActions === null || selectedRowActions === void 0 ? void 0 : selectedRowActions.map(function (actions, index) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: index.toString()
+    }, handleHide(actions) && /*#__PURE__*/_react["default"].createElement("button", {
+      type: "button",
       className: "btn",
       disabled: actions.disabled,
       onClick: function onClick() {

package/lib/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/lib/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;