qbs-react-grid 2.1.0 → 2.2.1

package/es/less/qbs-table.less

@@ -104,12 +104,156 @@
   }
 }
 .qbs-table[data-theme='dark'] {
-  background-color: #333333;
-  color: #ffffff;
+  background-color: #1f1f1f;
+  color: #f5f5f5;
+
+  .qbs-table-border-wrap {
+    border-color: #3d3d3d;
+    background: #262626;
+  }
+
+  .qbs-table-toolbar-container,
+  .qbs-table-toolbar,
+  .qbs-table-toolbar-sub-container,
+  .sub-qbs-table-toolbar {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-search-container {
+    .input {
+      border-color: #4a4a4a;
+      background: #2d2d2d;
+      color: #f5f5f5;
+
+      &:hover,
+      &:focus {
+        border-color: #6b6b6b;
+        background: #2d2d2d;
+      }
+    }
+
+    .search-button,
+    .close-button {
+      color: #d1d1d1;
+      background-color: transparent;
+    }
+  }
+
+  .qbs-table-column-popup,
+  .qbs-table-popup-container {
+    background: #2d2d2d;
+    color: #f5f5f5;
+    border-color: #4a4a4a;
+  }
+
+  .qbs-table-popup-label,
+  .qbs-table-popup-value,
+  .qbs-table-reset-link {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-custom-pagination,
+  .qbs-table-pagination-text,
+  .rows-count {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-icon-container svg path {
+    stroke: #e5e5e5;
+  }
+
+  .custom-select-trigger,
+  .custom-select-options {
+    background: #2d2d2d;
+    color: #f5f5f5;
+    border-color: #4a4a4a;
+  }
+
+  .qbs-card-container {
+    border-color: #4a4a4a;
+    background: #262626;
+    color: #f5f5f5;
+  }
+
+  .nodata-title {
+    color: #f5f5f5;
+  }
+
+  .tooltiptext {
+    background-color: #3d3d3d;
+    color: #fff;
+  }
+}
+
+.qbs-table-custom-pagination[data-theme='dark'] {
+  color: #f5f5f5;
+
+  .rows-count,
+  .qbs-table-pagination-text {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-icon-container svg path {
+    stroke: #e5e5e5;
+  }
 }
+
 .rs-table-cell-content[data-theme='dark'] {
-  background-color: #333333;
-  color: #ffffff;
+  background-color: #262626;
+  color: #f5f5f5;
+}
+
+.qbs-table[data-theme='dark'] {
+  .rs-table,
+  .rs-table-body-row-wrapper,
+  .rs-table-row,
+  .rs-table-cell,
+  .rs-table-cell-group,
+  .rs-table-row-header,
+  .rs-table-row-header .rs-table-cell {
+    background-color: #262626;
+    color: #f5f5f5;
+  }
+
+  .rs-table-cell-content {
+    background-color: #262626;
+    color: #f5f5f5;
+  }
+
+  .rs-table-row-header .rs-table-cell-content,
+  .rs-table-cell-header .rs-table-cell-content {
+    background-color: #1b2028;
+    color: #f5f5f5;
+  }
+
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-content {
+    background-color: #1d2633;
+  }
+
+  .rs-table-cell {
+    border-color: #3d3d3d;
+  }
+
+  .rs-table-scrollbar {
+    background-color: #2d2d2d;
+  }
+
+  .rs-table-scrollbar-handle {
+    background-color: #5a5a5a;
+  }
+}
+
+.qbs-table[dir='rtl'] {
+  .rs-table-cell-header .rs-table-cell-content {
+    text-align: right;
+  }
+
+  .rs-table-cell-wrap {
+    justify-content: flex-start;
+    width: 100%;
+  }
 }
 /* Dropdown container */
 .qbs-table-menu-dropdown {

package/es/qbsTable/QbsTable.js

@@ -6,7 +6,9 @@ import ColumnGroup from '../ColumnGroup';
 import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
+import isRTL from '../utils/isRTL';
 import useResponsiveStore from '../utils/useResponsiveStore';
+import { mergeLabels } from './labels';
 import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
 import ToolBar from './Toolbar';
 import CardComponent from './utilities/CardComponent';
@@ -65,6 +67,7 @@ var QbsTable = function QbsTable(_ref) {
     _ref$actionProps = _ref.actionProps,
     actionProps = _ref$actionProps === void 0 ? [] : _ref$actionProps,
     theme = _ref.theme,
+    rtlProp = _ref.rtl,
     handleMenuActions = _ref.handleMenuActions,
     onRowClick = _ref.onRowClick,
     expandedRowKeys = _ref.expandedRowKeys,
@@ -127,7 +130,11 @@ var QbsTable = function QbsTable(_ref) {
     rowHeight = _ref.rowHeight,
     isFullScreen = _ref.isFullScreen,
     _ref$showHeader = _ref.showHeader,
-    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader;
+    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
+    labelsProp = _ref.labels;
+  var labels = useMemo(function () {
+    return mergeLabels(labelsProp);
+  }, [labelsProp]);
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -138,9 +145,10 @@ var QbsTable = function QbsTable(_ref) {
     checkedKeys = _useState3[0],
     setCheckedKeys = _useState3[1];
   var dataTheme = useMemo(function () {
-    var _localStorage$getItem;
-    return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
+    var _ref2;
+    return (_ref2 = theme != null ? theme : typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) != null ? _ref2 : 'light';
   }, [theme]);
+  var rtl = rtlProp != null ? rtlProp : isRTL();
   var _useState4 = useState(false),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
@@ -260,7 +268,7 @@ var QbsTable = function QbsTable(_ref) {
 
   // useEffect(() => {
   // }, [columns]);
-  var handleClear = function handleClear(_ref2) {
+  var handleClear = function handleClear(_ref3) {
     setCheckedKeys([]);
     handleChecked([]);
   };
@@ -295,12 +303,19 @@ var QbsTable = function QbsTable(_ref) {
     fullWidthView: fullWidthView,
     setTableFullView: setTableFullView,
     setRowViewToggle: setRowViewToggle,
-    isFullScreen: isFullScreen
+    isFullScreen: isFullScreen,
+    labels: labels
   };
+  useEffect(function () {
+    if (!dataTheme || typeof document === 'undefined') return;
+    document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
+    document.documentElement.dataset.theme = dataTheme;
+  }, [dataTheme]);
   var themeToggle = useMemo(function () {
-    return document.getElementById('themeToggle');
+    return typeof document !== 'undefined' ? document.getElementById('themeToggle') : null;
   }, []);
   useEffect(function () {
+    if (theme || typeof document === 'undefined') return;
     var handleThemeToggle = function handleThemeToggle() {
       if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
         document.body.setAttribute('data-theme', 'dark');
@@ -322,7 +337,7 @@ var QbsTable = function QbsTable(_ref) {
       themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [themeToggle]);
+  }, [theme, themeToggle]);
   var handleExpanded = useCallback(function (rowData) {
     var keyValue = dataRowKey;
     var key = rowData[keyValue];
@@ -498,26 +513,26 @@ var QbsTable = function QbsTable(_ref) {
   //   [columns, dataTheme]
   // );
   var columnsRendered = useMemo(function () {
-    return (columns != null ? columns : []).map(function (_ref3) {
-      var title = _ref3.title,
-        field = _ref3.field,
-        resizable = _ref3.resizable,
-        sortable = _ref3.sortable,
-        colWidth = _ref3.colWidth,
-        align = _ref3.align,
-        grouped = _ref3.grouped,
-        groupHeader = _ref3.groupHeader,
-        fixed = _ref3.fixed,
-        children = _ref3.children,
-        customCell = _ref3.customCell,
-        renderCell = _ref3.renderCell,
-        isVisible = _ref3.isVisible,
-        link = _ref3.link,
-        getPath = _ref3.getPath,
-        rowClick = _ref3.rowClick,
-        sortKey = _ref3.sortKey,
-        type = _ref3.type,
-        hideLink = _ref3.hideLink;
+    return (columns != null ? columns : []).map(function (_ref4) {
+      var title = _ref4.title,
+        field = _ref4.field,
+        resizable = _ref4.resizable,
+        sortable = _ref4.sortable,
+        colWidth = _ref4.colWidth,
+        align = _ref4.align,
+        grouped = _ref4.grouped,
+        groupHeader = _ref4.groupHeader,
+        fixed = _ref4.fixed,
+        children = _ref4.children,
+        customCell = _ref4.customCell,
+        renderCell = _ref4.renderCell,
+        isVisible = _ref4.isVisible,
+        link = _ref4.link,
+        getPath = _ref4.getPath,
+        rowClick = _ref4.rowClick,
+        sortKey = _ref4.sortKey,
+        type = _ref4.type,
+        hideLink = _ref4.hideLink;
       return isVisible ? grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
         header: groupHeader,
         fixed: fixed,
@@ -599,7 +614,8 @@ var QbsTable = function QbsTable(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "qbs-table " + classes.tableContainerClass,
-    "data-theme": dataTheme
+    "data-theme": dataTheme,
+    dir: rtl ? 'rtl' : 'ltr'
   }, toolbar && /*#__PURE__*/React.createElement(ToolBar, toolbarProps), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-border-wrap"
   }, tableViewToggle ? /*#__PURE__*/React.createElement(Table, {
@@ -607,6 +623,7 @@ var QbsTable = function QbsTable(_ref) {
     key: tableKey + REFRESH_KEY,
     tableKey: tableKey,
     data: data,
+    rtl: rtl,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
     wordWrap: wordWrap,
@@ -627,7 +644,7 @@ var QbsTable = function QbsTable(_ref) {
     bordered: bordered,
     renderEmpty: function renderEmpty(info) {
       return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
-        title: emptyTitle != null ? emptyTitle : 'No Data Found',
+        title: emptyTitle != null ? emptyTitle : labels.noDataFound,
         subtitle: emptySubTitle
       });
     },
@@ -733,7 +750,8 @@ var QbsTable = function QbsTable(_ref) {
     setViewMode: setViewMode,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels
   })), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
     width: 40,
     fixed: "right"
@@ -752,7 +770,8 @@ var QbsTable = function QbsTable(_ref) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels
   })), /*#__PURE__*/React.createElement(ActionCell, {
     tableBodyRef: tableBodyRef,
     dropType: dropType,
@@ -771,7 +790,7 @@ var QbsTable = function QbsTable(_ref) {
   }, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col gap-2 p-2 mt-6 card-empty-container"
   }, /*#__PURE__*/React.createElement(NoData, {
-    title: emptyTitle != null ? emptyTitle : 'No Data Found',
+    title: emptyTitle != null ? emptyTitle : labels.noDataFound,
     subtitle: emptySubTitle
   })), isLoading ? handleCustomCardLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, handleCustomCardLoader()) : /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col gap-2 p-2"
@@ -786,10 +805,13 @@ var QbsTable = function QbsTable(_ref) {
       childDetailHeading: childDetailHeading,
       columns: columns,
       tableBodyRef: tableBodyRef,
-      actionProps: actionProps
+      actionProps: actionProps,
+      labels: labels
     }));
   })), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
-    paginationProps: paginationProps
+    paginationProps: paginationProps,
+    labels: labels,
+    dataTheme: dataTheme
   }))));
 };
 export default QbsTable;

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 { mergeLabels } from './labels';
 import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
 import ToolBar from './Toolbar';
 import ColumToggle from './utilities/ColumShowHide';
@@ -93,7 +94,11 @@ var QbsTable = function QbsTable(_ref) {
     emptySubTitle = _ref.emptySubTitle,
     emptyTitle = _ref.emptyTitle,
     _ref$dropType = _ref.dropType,
-    dropType = _ref$dropType === void 0 ? 'horizontal' : _ref$dropType;
+    dropType = _ref$dropType === void 0 ? 'horizontal' : _ref$dropType,
+    labelsProp = _ref.labels;
+  var labels = useMemo(function () {
+    return mergeLabels(labelsProp);
+  }, [labelsProp]);
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -104,8 +109,8 @@ var QbsTable = function QbsTable(_ref) {
     checkedKeys = _useState3[0],
     setCheckedKeys = _useState3[1];
   var dataTheme = useMemo(function () {
-    var _localStorage$getItem;
-    return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
+    var _ref2;
+    return (_ref2 = theme != null ? theme : typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) != null ? _ref2 : 'light';
   }, [theme]);
   var _useState4 = useState(false),
     isOpen = _useState4[0],
@@ -208,7 +213,7 @@ var QbsTable = function QbsTable(_ref) {
   // useEffect(() => {
   // }, [columns]);
 
-  var handleClear = function handleClear(_ref2) {
+  var handleClear = function handleClear(_ref3) {
     setCheckedKeys([]);
     handleChecked([]);
   };
@@ -234,12 +239,19 @@ var QbsTable = function QbsTable(_ref) {
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
     dataLength: data === null || data === void 0 ? void 0 : data.length,
-    searchPlaceholder: searchPlaceholder
+    searchPlaceholder: searchPlaceholder,
+    labels: labels
   };
+  useEffect(function () {
+    if (!dataTheme || typeof document === 'undefined') return;
+    document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
+    document.documentElement.dataset.theme = dataTheme;
+  }, [dataTheme]);
   var themeToggle = useMemo(function () {
-    return document.getElementById('themeToggle');
+    return typeof document !== 'undefined' ? document.getElementById('themeToggle') : null;
   }, []);
   useEffect(function () {
+    if (theme || typeof document === 'undefined') return;
     var handleThemeToggle = function handleThemeToggle() {
       if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
         document.body.setAttribute('data-theme', 'dark');
@@ -261,7 +273,7 @@ var QbsTable = function QbsTable(_ref) {
       themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [themeToggle]);
+  }, [theme, themeToggle]);
   var handleExpanded = useCallback(function (rowData) {
     var keyValue = dataRowKey;
     var key = rowData[keyValue];
@@ -321,26 +333,26 @@ var QbsTable = function QbsTable(_ref) {
     }) ? true : false;
   };
   var columnsRendered = useMemo(function () {
-    return (columns != null ? columns : []).map(function (_ref3) {
-      var title = _ref3.title,
-        field = _ref3.field,
-        resizable = _ref3.resizable,
-        sortable = _ref3.sortable,
-        colWidth = _ref3.colWidth,
-        align = _ref3.align,
-        grouped = _ref3.grouped,
-        groupHeader = _ref3.groupHeader,
-        fixed = _ref3.fixed,
-        children = _ref3.children,
-        customCell = _ref3.customCell,
-        renderCell = _ref3.renderCell,
-        isVisible = _ref3.isVisible,
-        link = _ref3.link,
-        getPath = _ref3.getPath,
-        rowClick = _ref3.rowClick,
-        sortKey = _ref3.sortKey,
-        type = _ref3.type,
-        hideLink = _ref3.hideLink;
+    return (columns != null ? columns : []).map(function (_ref4) {
+      var title = _ref4.title,
+        field = _ref4.field,
+        resizable = _ref4.resizable,
+        sortable = _ref4.sortable,
+        colWidth = _ref4.colWidth,
+        align = _ref4.align,
+        grouped = _ref4.grouped,
+        groupHeader = _ref4.groupHeader,
+        fixed = _ref4.fixed,
+        children = _ref4.children,
+        customCell = _ref4.customCell,
+        renderCell = _ref4.renderCell,
+        isVisible = _ref4.isVisible,
+        link = _ref4.link,
+        getPath = _ref4.getPath,
+        rowClick = _ref4.rowClick,
+        sortKey = _ref4.sortKey,
+        type = _ref4.type,
+        hideLink = _ref4.hideLink;
       return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && /*#__PURE__*/React.createElement(React.Fragment, null, grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
         header: groupHeader,
         fixed: fixed,
@@ -432,7 +444,7 @@ var QbsTable = function QbsTable(_ref) {
     bordered: bordered,
     renderEmpty: function renderEmpty(info) {
       return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
-        title: emptyTitle != null ? emptyTitle : 'No Data Found',
+        title: emptyTitle != null ? emptyTitle : labels.noDataFound,
         subtitle: emptySubTitle
       });
     },
@@ -536,7 +548,8 @@ var QbsTable = function QbsTable(_ref) {
     tableHeight: height,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels
   })), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
     width: 40,
     fixed: "right"
@@ -553,7 +566,8 @@ var QbsTable = function QbsTable(_ref) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels
   })), /*#__PURE__*/React.createElement(ActionCell, {
     tableBodyRef: tableBodyRef,
     actionProps: actionProps,
@@ -562,7 +576,9 @@ var QbsTable = function QbsTable(_ref) {
     handleMenuActions: handleMenuActions,
     dataTheme: dataTheme
   }))), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
-    paginationProps: paginationProps
+    paginationProps: paginationProps,
+    labels: labels,
+    dataTheme: dataTheme
   }))));
 };
 export default QbsTable;

package/es/qbsTable/Toolbar.js

@@ -3,10 +3,11 @@ import useResponsiveStore from '../utils/useResponsiveStore';
 import debounce from './utilities/debounce';
 import { CardView, ContentView, DefaultView, ExpandIcon, TableView } from './utilities/icons';
 import SearchInput from './utilities/SearchInput';
+import { formatSelectedItems, mergeLabels } from './labels';
 import { getRowDisplayRange } from './utilities/tablecalc';
 import TooltipComponent from './utilities/ToolTip';
 var ToolBar = function ToolBar(_ref) {
-  var _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
+  var _checkedKeys$length, _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
   var pagination = _ref.pagination,
     _ref$paginationProps = _ref.paginationProps,
     paginationProps = _ref$paginationProps === void 0 ? {} : _ref$paginationProps,
@@ -37,7 +38,9 @@ var ToolBar = function ToolBar(_ref) {
     setTableFullView = _ref.setTableFullView,
     setRowViewToggle = _ref.setRowViewToggle,
     _ref$isFullScreen = _ref.isFullScreen,
-    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen;
+    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
+    labelsProp = _ref.labels;
+  var labels = mergeLabels(labelsProp);
   var debouncedOnSearch = useCallback(debounce(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var _useState = useState(searchValue),
     searchParam = _useState[0],
@@ -86,7 +89,8 @@ 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: searchPlaceholder != null ? searchPlaceholder : labels.search,
+    searchAriaLabel: labels.searchAriaLabel,
     handleChange: handleChange,
     handleSearch: handleSearch,
     searchValue: searchParam
@@ -114,7 +118,7 @@ var ToolBar = function ToolBar(_ref) {
     className: "flex gap-2 table_cell_style"
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Default View'
+    title: labels.switchToDefaultView
   }, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
       return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
@@ -123,7 +127,7 @@ var ToolBar = function ToolBar(_ref) {
     className: "" + (defaultRowView ? 'active' : '')
   }))), /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Relaxed View'
+    title: labels.switchToRelaxedView
   }, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
       return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
@@ -134,7 +138,7 @@ var ToolBar = function ToolBar(_ref) {
     className: " table_full_width"
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Full Screen'
+    title: labels.switchToFullScreen
   }, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
       return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
@@ -145,7 +149,7 @@ var ToolBar = function ToolBar(_ref) {
     className: "qbs-table-top-icons flex gap-2"
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Table View'
+    title: labels.switchToTableView
   }, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(true);
@@ -160,7 +164,7 @@ var ToolBar = function ToolBar(_ref) {
     }
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Card View'
+    title: labels.switchToCardView
   }, /*#__PURE__*/React.createElement(CardView, {
     className: "" + (!tableViewToggle ? 'active' : '')
   }))))))), isMobile && isOpen && /*#__PURE__*/React.createElement("div", {
@@ -173,14 +177,14 @@ 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(labels.selectedItems, (_checkedKeys$length = checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) != null ? _checkedKeys$length : 0)), /*#__PURE__*/React.createElement("div", {
     className: "selected-row-action"
   }, /*#__PURE__*/React.createElement("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) {
+  }, labels.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(),
       className: "btn " + (actions === null || actions === void 0 ? void 0 : actions.buttonClassName),
@@ -193,6 +197,6 @@ var ToolBar = function ToolBar(_ref) {
     }, actions === null || actions === void 0 ? void 0 : actions.icon), /*#__PURE__*/React.createElement("span", null, actions.actionTitle)));
   }))) : /*#__PURE__*/React.createElement("div", null, pagination && paginationProps && dataLength > 0 && /*#__PURE__*/React.createElement("div", {
     className: "rows-count"
-  }, getRowDisplayRange((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0)))));
+  }, getRowDisplayRange((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0, labels.showingRange)))));
 };
 export default ToolBar;

package/es/qbsTable/commontypes.d.ts

@@ -1,4 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react';
+import type { QbsTableLabels } from './labels';
+export type { QbsTableLabels };
 interface Content {
     cell: ReactNode | string;
     toolTip?: string;
@@ -69,6 +71,7 @@ export interface QbsTableProps {
     searchValue?: string;
     handleSearchValue?: (value?: string) => void;
     theme?: string;
+    rtl?: boolean;
     onRowClick?: (data: any) => void;
     cellBordered?: boolean;
     bordered?: boolean;
@@ -89,6 +92,7 @@ export interface QbsTableProps {
     advancefilter?: ReactElement | ReactNode;
     tableHeaderActions?: ReactElement | ReactNode;
     searchPlaceholder?: string;
+    labels?: QbsTableLabels;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;
@@ -167,6 +171,7 @@ export interface QbsTableToolbarProps {
     dataLength: number;
     headerHeight?: number;
     searchPlaceholder?: string;
+    labels?: QbsTableLabels;
     tableView?: boolean;
     enableTableToggle?: boolean;
     tableViewToggle?: boolean;
@@ -187,4 +192,3 @@ export interface QbsTableToolbarProps {
     setRowViewToggle?: (value: boolean) => void;
     isFullScreen?: boolean;
 }
-export {};