qbs-react-grid 2.2.6 → 2.2.11

package/es/less/qbs-table.less

@@ -376,20 +376,54 @@
   gap: 10px;
   align-items: center;
 }
+.qbs-table-settings-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  > button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: #585858;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover,
+    &:focus {
+      background: transparent;
+      outline: none;
+    }
+  }
+}
+
 .qbs-table-column-popup {
-  position: fixed;
+  position: absolute;
+  top: calc(100% + 4px);
+  inset-inline-end: 0;
+  inset-inline-start: auto;
   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);
-  min-width: 272px;
+  min-width: 300px;
+  width: max-content;
+  max-width: min(400px, calc(100vw - 16px));
   gap: 4px;
   display: flex;
   flex-direction: column;
   max-height: 500px;
-  // overflow-y: auto;
 }
 .qbs-table-popup-container {
   max-width: 400px;
@@ -411,6 +445,34 @@
   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 {
+  text-align: right;
+}
+
+.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 +808,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

@@ -85,6 +85,8 @@ export var ExpandCell = /*#__PURE__*/React.memo(function (_ref3) {
     onChange = _ref3.onChange,
     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);
     }
@@ -100,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",
@@ -111,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) {

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';
@@ -107,7 +108,28 @@ var QbsTable = function QbsTable(_ref) {
     isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
     handleTableCardView = _ref.handleTableCardView,
     handleCustomCardLoader = _ref.handleCustomCardLoader,
-    dropType = _ref.dropType;
+    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 effectiveWordWrap = useMemo(function () {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? wordWrap : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -130,6 +152,16 @@ var QbsTable = function QbsTable(_ref) {
     setTableViewToggle = _useState5[1];
   var isMobile = useResponsiveStore();
   var tableBodyRef = useRef(null);
+  var _useState6 = useState(0),
+    rowViewRefreshKey = _useState6[0],
+    setRowViewRefreshKey = _useState6[1];
+  useEffect(function () {
+    if (rowViewToggle) {
+      setRowViewRefreshKey(function (key) {
+        return key + 1;
+      });
+    }
+  }, [defaultRowView, rowViewToggle]);
   var handleSortColumn = useCallback(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -260,7 +292,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');
@@ -558,12 +598,13 @@ var QbsTable = function QbsTable(_ref) {
     className: "qbs-table-border-wrap"
   }, tableViewToggle ? /*#__PURE__*/React.createElement(Table, {
     height: autoHeight ? undefined : height,
-    key: tableKey,
+    key: tableKey + "-" + rowViewRefreshKey,
     tableKey: tableKey,
+    rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
-    wordWrap: wordWrap,
+    wordWrap: effectiveWordWrap,
     autoHeight: autoHeight,
     sortColumn: sortColumn,
     style: {
@@ -584,6 +625,7 @@ var QbsTable = function QbsTable(_ref) {
     columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
+    rowHeight: rowHeight,
     rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
     showHeader: true,
@@ -682,7 +724,9 @@ 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"
@@ -699,7 +743,9 @@ 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,

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';
@@ -92,7 +93,27 @@ var QbsTable = function QbsTable(_ref) {
     autoHeight = _ref.autoHeight,
     emptySubTitle = _ref.emptySubTitle,
     emptyTitle = _ref.emptyTitle,
-    dropType = _ref.dropType;
+    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 effectiveWordWrap = useMemo(function () {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? wordWrap : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -238,7 +259,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');
@@ -419,10 +448,11 @@ var QbsTable = function QbsTable(_ref) {
     height: autoHeight ? undefined : height,
     key: tableKey,
     tableKey: tableKey,
+    rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
-    wordWrap: wordWrap,
+    wordWrap: effectiveWordWrap,
     autoHeight: autoHeight,
     sortColumn: sortColumn,
     style: {
@@ -541,7 +571,9 @@ 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"
@@ -558,7 +590,9 @@ 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,

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,21 @@ 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;
+  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 +67,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() {
@@ -66,7 +81,7 @@ var ToolBar = function ToolBar(_ref) {
     className: "qbs-table-toolbar-container",
     ref: toolbarRef
   }, /*#__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 +91,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,12 +112,69 @@ 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-cntainer"
+  }, 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("div", {
+    role: "button",
+    tabIndex: 0,
+    title: labels.switchToDefaultView,
+    onClick: function onClick() {
+      return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        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("div", {
+    role: "button",
+    tabIndex: 0,
+    title: labels.switchToRelaxedView,
+    onClick: function onClick() {
+      return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        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("div", {
+    role: "button",
+    tabIndex: 0,
+    title: labels.switchToFullScreen,
+    onClick: function onClick() {
+      return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        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'
+    title: (_labels$switchToTable = labels.switchToTableView) != null ? _labels$switchToTable : ''
   }, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(true);
@@ -111,13 +183,13 @@ 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("div", {
     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 +202,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;
@@ -83,6 +84,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;
@@ -128,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;
@@ -156,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;

package/es/qbsTable/labels.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export var defaultQbsTableLabels = {
+  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: function showingRange(start, end, total) {
+    return "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 var mergeQbsTableLabels = function mergeQbsTableLabels(overrides) {
+  return _extends({}, defaultQbsTableLabels, overrides);
+};
+export var formatSelectedItems = function formatSelectedItems(count, labels) {
+  var merged = mergeQbsTableLabels(labels);
+  return merged.selectedItems + " (" + count + ")";
+};

package/es/qbsTable/utilities/ColumShowHide.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { QbsColumnProps } from '../commontypes';
+import type { QbsTableLabels } from '../labels';
 interface ColumnToggleProps {
     columns: QbsColumnProps[];
     onToggle: (columnName: string) => void;
@@ -9,6 +10,8 @@ interface ColumnToggleProps {
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     handleResetColumns?: () => void;
     tableHeight?: number;
+    labels?: QbsTableLabels;
+    rtl?: boolean;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;
 export default ColumnToggle;