qbs-react-grid 2.2.6 → 2.2.11

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"));
@@ -113,7 +114,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 = (0, _react.useMemo)(function () {
+    return (0, _labels.mergeQbsTableLabels)(labelsProp);
+  }, [labelsProp]);
+  var effectiveWordWrap = (0, _react.useMemo)(function () {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? wordWrap : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -136,6 +158,16 @@ var QbsTable = function QbsTable(_ref) {
     setTableViewToggle = _useState5[1];
   var isMobile = (0, _useResponsiveStore["default"])();
   var tableBodyRef = (0, _react.useRef)(null);
+  var _useState6 = (0, _react.useState)(0),
+    rowViewRefreshKey = _useState6[0],
+    setRowViewRefreshKey = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (rowViewToggle) {
+      setRowViewRefreshKey(function (key) {
+        return key + 1;
+      });
+    }
+  }, [defaultRowView, rowViewToggle]);
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -266,7 +298,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');
@@ -564,12 +604,13 @@ var QbsTable = function QbsTable(_ref) {
     className: "qbs-table-border-wrap"
   }, tableViewToggle ? /*#__PURE__*/_react["default"].createElement(_Table["default"], {
     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: {
@@ -590,6 +631,7 @@ var QbsTable = function QbsTable(_ref) {
     columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
+    rowHeight: rowHeight,
     rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
     showHeader: true,
@@ -688,7 +730,9 @@ 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"
@@ -705,7 +749,9 @@ 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,

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"));
@@ -98,7 +99,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 = (0, _react.useMemo)(function () {
+    return (0, _labels.mergeQbsTableLabels)(labelsProp);
+  }, [labelsProp]);
+  var effectiveWordWrap = (0, _react.useMemo)(function () {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? wordWrap : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -244,7 +265,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');
@@ -425,10 +454,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: {
@@ -547,7 +577,9 @@ 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"
@@ -564,7 +596,9 @@ 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,

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,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 = (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 +74,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() {
@@ -73,7 +88,7 @@ var ToolBar = function ToolBar(_ref) {
     className: "qbs-table-toolbar-container",
     ref: toolbarRef
   }, /*#__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 +98,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,12 +119,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["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-cntainer"
+  }, 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("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["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("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["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("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["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'
+    title: (_labels$switchToTable = labels.switchToTableView) != null ? _labels$switchToTable : ''
   }, /*#__PURE__*/_react["default"].createElement("div", {
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(true);
@@ -118,13 +190,13 @@ 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("div", {
     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 +209,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;
@@ -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/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;

package/lib/qbsTable/labels.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.mergeQbsTableLabels = exports.formatSelectedItems = exports.defaultQbsTableLabels = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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'
+};
+exports.defaultQbsTableLabels = defaultQbsTableLabels;
+var mergeQbsTableLabels = function mergeQbsTableLabels(overrides) {
+  return (0, _extends2["default"])({}, defaultQbsTableLabels, overrides);
+};
+exports.mergeQbsTableLabels = mergeQbsTableLabels;
+var formatSelectedItems = function formatSelectedItems(count, labels) {
+  var merged = mergeQbsTableLabels(labels);
+  return merged.selectedItems + " (" + count + ")";
+};
+exports.formatSelectedItems = formatSelectedItems;

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