qbs-react-grid 2.0.16 → 2.2.0

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"));
@@ -99,7 +100,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 = (0, _react.useMemo)(function () {
+    return (0, _labels.mergeLabels)(labelsProp);
+  }, [labelsProp]);
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -110,8 +115,8 @@ var QbsTable = function QbsTable(_ref) {
     checkedKeys = _useState3[0],
     setCheckedKeys = _useState3[1];
   var dataTheme = (0, _react.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 = (0, _react.useState)(false),
     isOpen = _useState4[0],
@@ -214,7 +219,7 @@ var QbsTable = function QbsTable(_ref) {
   // useEffect(() => {
   // }, [columns]);
 
-  var handleClear = function handleClear(_ref2) {
+  var handleClear = function handleClear(_ref3) {
     setCheckedKeys([]);
     handleChecked([]);
   };
@@ -240,12 +245,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
   };
+  (0, _react.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 = (0, _react.useMemo)(function () {
-    return document.getElementById('themeToggle');
+    return typeof document !== 'undefined' ? document.getElementById('themeToggle') : null;
   }, []);
   (0, _react.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');
@@ -267,7 +279,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 = (0, _react.useCallback)(function (rowData) {
     var keyValue = dataRowKey;
     var key = rowData[keyValue];
@@ -327,26 +339,26 @@ var QbsTable = function QbsTable(_ref) {
     }) ? true : false;
   };
   var columnsRendered = (0, _react.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["default"].createElement(_react["default"].Fragment, null, isVisible && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
         header: groupHeader,
         fixed: fixed,
@@ -438,7 +450,7 @@ var QbsTable = function QbsTable(_ref) {
     bordered: bordered,
     renderEmpty: function renderEmpty(info) {
       return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/_react["default"].createElement(_empty["default"], {
-        title: emptyTitle != null ? emptyTitle : 'No Data Found',
+        title: emptyTitle != null ? emptyTitle : labels.noDataFound,
         subtitle: emptySubTitle
       });
     },
@@ -542,7 +554,8 @@ var QbsTable = function QbsTable(_ref) {
     tableHeight: height,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels
   })), /*#__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"
@@ -559,7 +572,8 @@ var QbsTable = function QbsTable(_ref) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    labels: labels
   })), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
     tableBodyRef: tableBodyRef,
     actionProps: actionProps,
@@ -568,7 +582,9 @@ var QbsTable = function QbsTable(_ref) {
     handleMenuActions: handleMenuActions,
     dataTheme: dataTheme
   }))), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
-    paginationProps: paginationProps
+    paginationProps: paginationProps,
+    labels: labels,
+    dataTheme: dataTheme
   }))));
 };
 var _default = QbsTable;

package/lib/qbsTable/Toolbar.js

@@ -8,12 +8,13 @@ var _useResponsiveStore = _interopRequireDefault(require("../utils/useResponsive
 var _debounce = _interopRequireDefault(require("./utilities/debounce"));
 var _icons = require("./utilities/icons");
 var _SearchInput = _interopRequireDefault(require("./utilities/SearchInput"));
+var _labels = require("./labels");
 var _tablecalc = require("./utilities/tablecalc");
 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 _checkedKeys$length, _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
   var pagination = _ref.pagination,
     _ref$paginationProps = _ref.paginationProps,
     paginationProps = _ref$paginationProps === void 0 ? {} : _ref$paginationProps,
@@ -44,7 +45,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 = (0, _labels.mergeLabels)(labelsProp);
   var debouncedOnSearch = (0, _react.useCallback)((0, _debounce["default"])(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var _useState = (0, _react.useState)(searchValue),
     searchParam = _useState[0],
@@ -93,7 +96,8 @@ 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: searchPlaceholder != null ? searchPlaceholder : labels.search,
+    searchAriaLabel: labels.searchAriaLabel,
     handleChange: handleChange,
     handleSearch: handleSearch,
     searchValue: searchParam
@@ -121,7 +125,7 @@ var ToolBar = function ToolBar(_ref) {
     className: "flex gap-2 table_cell_style"
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Default View'
+    title: labels.switchToDefaultView
   }, /*#__PURE__*/_react["default"].createElement("div", {
     onClick: function onClick() {
       return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
@@ -130,7 +134,7 @@ var ToolBar = function ToolBar(_ref) {
     className: "" + (defaultRowView ? 'active' : '')
   }))), /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Compact View'
+    title: labels.switchToRelaxedView
   }, /*#__PURE__*/_react["default"].createElement("div", {
     onClick: function onClick() {
       return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
@@ -141,7 +145,7 @@ var ToolBar = function ToolBar(_ref) {
     className: " table_full_width"
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Full Screen'
+    title: labels.switchToFullScreen
   }, /*#__PURE__*/_react["default"].createElement("div", {
     onClick: function onClick() {
       return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
@@ -152,7 +156,7 @@ var ToolBar = function ToolBar(_ref) {
     className: "qbs-table-top-icons flex gap-2"
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Table View'
+    title: labels.switchToTableView
   }, /*#__PURE__*/_react["default"].createElement("div", {
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(true);
@@ -167,7 +171,7 @@ var ToolBar = function ToolBar(_ref) {
     }
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: toolbarRef,
-    title: 'Switch to Card View'
+    title: labels.switchToCardView
   }, /*#__PURE__*/_react["default"].createElement(_icons.CardView, {
     className: "" + (!tableViewToggle ? 'active' : '')
   }))))))), isMobile && isOpen && /*#__PURE__*/_react["default"].createElement("div", {
@@ -180,25 +184,27 @@ 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)(labels.selectedItems, (_checkedKeys$length = checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) != null ? _checkedKeys$length : 0)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "selected-row-action"
   }, /*#__PURE__*/_react["default"].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["default"].createElement(_react["default"].Fragment, null, handleHide(actions) && /*#__PURE__*/_react["default"].createElement("button", {
       key: index.toString(),
-      className: "btn",
+      className: "btn " + (actions === null || actions === void 0 ? void 0 : actions.buttonClassName),
       disabled: actions.disabled,
       onClick: function onClick() {
         return actions === null || actions === void 0 ? void 0 : actions.action(checkedKeys);
       }
-    }, actions.actionTitle));
+    }, (actions === null || actions === void 0 ? void 0 : actions.icon) && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "mr-2"
+    }, actions === null || actions === void 0 ? void 0 : actions.icon), /*#__PURE__*/_react["default"].createElement("span", null, actions.actionTitle)));
   }))) : /*#__PURE__*/_react["default"].createElement("div", null, pagination && paginationProps && dataLength > 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "rows-count"
-  }, (0, _tablecalc.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)))));
+  }, (0, _tablecalc.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)))));
 };
 var _default = ToolBar;
 exports["default"] = _default;

package/lib/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;
@@ -89,12 +91,15 @@ export interface QbsTableProps {
     advancefilter?: ReactElement | ReactNode;
     tableHeaderActions?: ReactElement | ReactNode;
     searchPlaceholder?: string;
+    labels?: QbsTableLabels;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;
         disabled?: boolean;
         hidden?: boolean;
         customHide?: string;
+        buttonClassName?: string;
+        icon?: ReactElement | ReactNode;
     }[];
     selectedRows?: (number | string)[];
     classes?: {
@@ -140,6 +145,7 @@ export interface QbsTableProps {
     dropType?: 'horizondal' | 'vertical';
     rowHeight?: number;
     isFullScreen?: boolean;
+    showHeader?: boolean;
 }
 export interface QbsTableToolbarProps {
     title?: string;
@@ -164,6 +170,7 @@ export interface QbsTableToolbarProps {
     dataLength: number;
     headerHeight?: number;
     searchPlaceholder?: string;
+    labels?: QbsTableLabels;
     tableView?: boolean;
     enableTableToggle?: boolean;
     tableViewToggle?: boolean;
@@ -174,6 +181,8 @@ export interface QbsTableToolbarProps {
         disabled?: boolean;
         hidden?: boolean;
         customHide?: string;
+        buttonClassName?: string;
+        icon?: ReactElement | ReactNode;
     }[];
     rowViewToggle?: boolean;
     defaultRowView?: boolean;
@@ -182,4 +191,3 @@ export interface QbsTableToolbarProps {
     setRowViewToggle?: (value: boolean) => void;
     isFullScreen?: boolean;
 }
-export {};

package/lib/qbsTable/labels.d.ts

@@ -0,0 +1,48 @@
+export interface 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 DEFAULT_QBS_TABLE_LABELS: Required<Omit<QbsTableLabels, 'showingRange'>> & {
+    showingRange: (start: number, end: number, total: number) => string;
+};
+export declare const mergeLabels: (labels?: QbsTableLabels) => {
+    showingRange: (start: number, end: number, total: number) => string;
+    search: string;
+    searchAriaLabel: string;
+    clear: string;
+    selectedItems: string;
+    switchToDefaultView: string;
+    switchToRelaxedView: string;
+    switchToFullScreen: string;
+    switchToTableView: string;
+    switchToCardView: string;
+    noDataFound: string;
+    itemsPerPage: string;
+    fixedColumns: string;
+    visibleColumns: string;
+    availableColumns: string;
+    resetToDefault: string;
+    save: string;
+    viewMore: string;
+    viewLess: string;
+    actions: string;
+};
+export declare const formatSelectedItems: (selectedItemsLabel: string, count: number) => string;

package/lib/qbsTable/labels.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.mergeLabels = exports.formatSelectedItems = exports.DEFAULT_QBS_TABLE_LABELS = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var DEFAULT_QBS_TABLE_LABELS = {
+  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.DEFAULT_QBS_TABLE_LABELS = DEFAULT_QBS_TABLE_LABELS;
+var mergeLabels = function mergeLabels(labels) {
+  var _labels$showingRange;
+  return (0, _extends2["default"])({}, DEFAULT_QBS_TABLE_LABELS, labels, {
+    showingRange: (_labels$showingRange = labels === null || labels === void 0 ? void 0 : labels.showingRange) != null ? _labels$showingRange : DEFAULT_QBS_TABLE_LABELS.showingRange
+  });
+};
+exports.mergeLabels = mergeLabels;
+var formatSelectedItems = function formatSelectedItems(selectedItemsLabel, count) {
+  return selectedItemsLabel + "(" + count + ") ";
+};
+exports.formatSelectedItems = formatSelectedItems;

package/lib/qbsTable/utilities/CardComponent.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { QbsColumnProps } from '../commontypes';
+import { type QbsTableLabels } from '../labels';
 type Props = {
     columns: QbsColumnProps[];
     data: any;
@@ -9,6 +10,7 @@ type Props = {
     handleMenuActions?: () => void;
     cardColumLimit?: number;
     childDetailHeading?: string;
+    labels?: QbsTableLabels;
 };
 declare const CardComponent: React.FC<Props>;
 export default CardComponent;

package/lib/qbsTable/utilities/CardComponent.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _labels = require("../labels");
 var _CardMenuDropdown = _interopRequireDefault(require("./CardMenuDropdown"));
 var _handleFormatCell = require("./handleFormatCell");
 var _icons = require("./icons");
@@ -22,7 +23,9 @@ var CardComponent = function CardComponent(_ref) {
     cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
     handleMenuActions = _ref.handleMenuActions,
     _ref$childDetailHeadi = _ref.childDetailHeading,
-    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi,
+    labelsProp = _ref.labels;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _useState = (0, _react.useState)(false),
     viewMore = _useState[0],
     setViewMore = _useState[1];
@@ -71,10 +74,11 @@ var CardComponent = function CardComponent(_ref) {
     rowData: data,
     iconName: "more",
     rowIndex: index,
-    handleMenuActions: handleMenuActions
+    handleMenuActions: handleMenuActions,
+    labels: labels
   })), columns.length > initialDisplayCount && /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: useCardRef,
-    title: viewMore ? ' View Less' : 'View More',
+    title: viewMore ? labels.viewLess : labels.viewMore,
     enabled: false
   }, /*#__PURE__*/_react["default"].createElement("button", {
     onClick: toggleViewMore,

package/lib/qbsTable/utilities/CardMenuDropdown.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ActionProps } from '../commontypes';
+import { type QbsTableLabels } from '../labels';
 type Props = {
     iconName: string;
     actionDropDown: ActionProps[];
@@ -8,6 +9,7 @@ type Props = {
     dataTheme?: string;
     tableBodyRef: React.RefObject<HTMLDivElement>;
     rowIndex?: number;
+    labels?: QbsTableLabels;
 };
 declare const CardMenuDropdown: React.FC<Props>;
 export default CardMenuDropdown;

package/lib/qbsTable/utilities/CardMenuDropdown.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _labels = require("../labels");
 var _icons = require("./icons");
 var _ToolTip = _interopRequireDefault(require("./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); }
@@ -11,7 +12,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CardMenuDropdown = function CardMenuDropdown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
-    rowData = _ref.rowData;
+    rowData = _ref.rowData,
+    labelsProp = _ref.labels;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _useState = (0, _react.useState)(false),
     openMenu = _useState[0],
     setOpenMenu = _useState[1];
@@ -70,7 +73,7 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
-    title: "Actions",
+    title: labels.actions,
     enabled: false,
     ref: menuButtonRef
   }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && /*#__PURE__*/_react["default"].createElement("div", {

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;
@@ -11,6 +12,7 @@ interface ColumnToggleProps {
     tableHeight?: number;
     viewMode?: string;
     setViewMode?: (value: string) => void;
+    labels?: QbsTableLabels;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;
 export default ColumnToggle;

package/lib/qbsTable/utilities/ColumShowHide.js

@@ -3,6 +3,7 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _labels = require("../labels");
 var _icons = require("./icons");
 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; }
@@ -15,7 +16,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
     handleResetColumns = _ref.handleResetColumns,
     handleColumnToggle = _ref.handleColumnToggle,
     _ref$tableHeight = _ref.tableHeight,
-    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
+    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight,
+    labelsProp = _ref.labels;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _useState = (0, _react.useState)(null),
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
@@ -170,7 +173,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-label"
-  }, "FIXED COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, labels.fixedColumns), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-column"
@@ -182,7 +185,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-label"
-  }, "VISIBLE COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, labels.visibleColumns), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-column"
@@ -194,7 +197,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-label"
-  }, "AVAILABLE COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, labels.availableColumns), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-column"
@@ -215,13 +218,13 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleResetColumns === null || handleResetColumns === void 0 ? void 0 : handleResetColumns();
     }
-  }, "Reset to default"), /*#__PURE__*/_react["default"].createElement("a", {
+  }, labels.resetToDefault), /*#__PURE__*/_react["default"].createElement("a", {
     className: "qbs-table-reset-link",
     href: "#",
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, "Save"))))));
+  }, labels.save))))));
 };
 var _default = ColumnToggle;
 exports["default"] = _default;

package/lib/qbsTable/utilities/SearchInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface SearchProps {
     placeholder: string;
+    searchAriaLabel?: string;
     handleChange: (value: string) => void;
     searchValue: string | undefined;
     handleSearch: (value?: string) => void;

package/lib/qbsTable/utilities/SearchInput.js

@@ -7,6 +7,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 SearchInput = function SearchInput(_ref) {
   var placeholder = _ref.placeholder,
+    _ref$searchAriaLabel = _ref.searchAriaLabel,
+    searchAriaLabel = _ref$searchAriaLabel === void 0 ? 'Search' : _ref$searchAriaLabel,
     handleChange = _ref.handleChange,
     searchValue = _ref.searchValue,
     handleSearch = _ref.handleSearch;
@@ -30,7 +32,7 @@ var SearchInput = function SearchInput(_ref) {
     placeholder: placeholder,
     value: searchValue != null ? searchValue : '',
     onChange: handleInputChange,
-    "aria-label": "Search"
+    "aria-label": searchAriaLabel
   }), /*#__PURE__*/_react["default"].createElement("button", {
     className: "search-button absolute left-1 bottom-1.5 bg-white text-grey-dark",
     onClick: function onClick() {

package/lib/qbsTable/utilities/tablecalc.d.ts

@@ -1 +1 @@
-export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number): string;
+export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number, formatRange?: (start: number, end: number, total: number) => string): string;

package/lib/qbsTable/utilities/tablecalc.js

@@ -2,8 +2,13 @@
 
 exports.__esModule = true;
 exports.getRowDisplayRange = getRowDisplayRange;
-function getRowDisplayRange(totalRows, rowsPerPage, pageNumber) {
+function getRowDisplayRange(totalRows, rowsPerPage, pageNumber, formatRange) {
+  if (formatRange === void 0) {
+    formatRange = function formatRange(start, end, total) {
+      return "Showing " + start + " to " + end + " of " + total;
+    };
+  }
   var start = (pageNumber - 1) * rowsPerPage + 1;
   var end = Math.min(pageNumber * rowsPerPage, totalRows);
-  return "Showing " + (start != null ? start : 0) + " to " + (end != null ? end : 0) + " of " + (totalRows != null ? totalRows : 0);
+  return formatRange(start != null ? start : 0, end != null ? end : 0, totalRows != null ? totalRows : 0);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "2.0.16",
+  "version": "2.2.0",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",