qbs-react-grid 2.2.6 → 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

@@ -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,25 @@ 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 pinSide = rtl ? 'left' : 'right';
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -260,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');
@@ -560,6 +587,7 @@ var QbsTable = function QbsTable(_ref) {
     height: autoHeight ? undefined : height,
     key: tableKey,
     tableKey: tableKey,
+    rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
@@ -584,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,
@@ -668,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,
@@ -682,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,
@@ -699,7 +730,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,24 @@ 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 pinSide = rtl ? 'left' : 'right';
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -238,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');
@@ -419,6 +445,7 @@ var QbsTable = function QbsTable(_ref) {
     height: autoHeight ? undefined : height,
     key: tableKey,
     tableKey: tableKey,
+    rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
@@ -527,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,
@@ -541,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,
@@ -558,7 +587,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,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;
@@ -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;