qbs-react-grid 2.1.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/css/qbs-react-grid.css +1 -1
  2. package/dist/css/qbs-react-grid.min.css +1 -1
  3. package/dist/css/qbs-react-grid.min.css.map +1 -1
  4. package/es/Pagination.d.ts +3 -0
  5. package/es/Pagination.js +8 -3
  6. package/es/index.d.ts +1 -1
  7. package/es/less/qbs-table.less +95 -4
  8. package/es/qbsTable/QbsTable.js +50 -33
  9. package/es/qbsTable/TableCardList.js +47 -31
  10. package/es/qbsTable/Toolbar.js +15 -11
  11. package/es/qbsTable/commontypes.d.ts +4 -1
  12. package/es/qbsTable/labels.d.ts +48 -0
  13. package/es/qbsTable/labels.js +34 -0
  14. package/es/qbsTable/utilities/CardComponent.d.ts +2 -0
  15. package/es/qbsTable/utilities/CardComponent.js +7 -3
  16. package/es/qbsTable/utilities/CardMenuDropdown.d.ts +2 -0
  17. package/es/qbsTable/utilities/CardMenuDropdown.js +5 -2
  18. package/es/qbsTable/utilities/ColumShowHide.d.ts +2 -0
  19. package/es/qbsTable/utilities/ColumShowHide.js +9 -6
  20. package/es/qbsTable/utilities/SearchInput.d.ts +1 -0
  21. package/es/qbsTable/utilities/SearchInput.js +3 -1
  22. package/es/qbsTable/utilities/tablecalc.d.ts +1 -1
  23. package/es/qbsTable/utilities/tablecalc.js +7 -2
  24. package/lib/Pagination.d.ts +3 -0
  25. package/lib/Pagination.js +8 -3
  26. package/lib/index.d.ts +1 -1
  27. package/lib/less/qbs-table.less +95 -4
  28. package/lib/qbsTable/QbsTable.js +50 -33
  29. package/lib/qbsTable/TableCardList.js +47 -31
  30. package/lib/qbsTable/Toolbar.js +15 -11
  31. package/lib/qbsTable/commontypes.d.ts +4 -1
  32. package/lib/qbsTable/labels.d.ts +48 -0
  33. package/lib/qbsTable/labels.js +42 -0
  34. package/lib/qbsTable/utilities/CardComponent.d.ts +2 -0
  35. package/lib/qbsTable/utilities/CardComponent.js +7 -3
  36. package/lib/qbsTable/utilities/CardMenuDropdown.d.ts +2 -0
  37. package/lib/qbsTable/utilities/CardMenuDropdown.js +5 -2
  38. package/lib/qbsTable/utilities/ColumShowHide.d.ts +2 -0
  39. package/lib/qbsTable/utilities/ColumShowHide.js +9 -6
  40. package/lib/qbsTable/utilities/SearchInput.d.ts +1 -0
  41. package/lib/qbsTable/utilities/SearchInput.js +3 -1
  42. package/lib/qbsTable/utilities/tablecalc.d.ts +1 -1
  43. package/lib/qbsTable/utilities/tablecalc.js +7 -2
  44. package/package.json +1 -1
  45. package/src/Pagination.tsx +10 -3
  46. package/src/index.ts +1 -1
  47. package/src/less/qbs-table.less +95 -4
  48. package/src/qbsTable/QbsTable.tsx +33 -8
  49. package/src/qbsTable/TableCardList.tsx +31 -7
  50. package/src/qbsTable/Toolbar.tsx +17 -10
  51. package/src/qbsTable/commontypes.ts +6 -0
  52. package/src/qbsTable/labels.ts +58 -0
  53. package/src/qbsTable/utilities/CardComponent.tsx +7 -2
  54. package/src/qbsTable/utilities/CardMenuDropdown.tsx +10 -2
  55. package/src/qbsTable/utilities/ColumShowHide.tsx +10 -6
  56. package/src/qbsTable/utilities/SearchInput.tsx +3 -1
  57. package/src/qbsTable/utilities/tablecalc.ts +8 -2
@@ -1,4 +1,5 @@
1
1
  import React, { useRef, useState } from 'react';
2
+ import { mergeLabels } from '../labels';
2
3
  import CardMenuDropdown from './CardMenuDropdown';
3
4
  import { handleCellFormat } from './handleFormatCell';
4
5
  import { ArrowUpIcon } from './icons';
@@ -15,7 +16,9 @@ var CardComponent = function CardComponent(_ref) {
15
16
  cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
16
17
  handleMenuActions = _ref.handleMenuActions,
17
18
  _ref$childDetailHeadi = _ref.childDetailHeading,
18
- childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
19
+ childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi,
20
+ labelsProp = _ref.labels;
21
+ var labels = mergeLabels(labelsProp);
19
22
  var _useState = useState(false),
20
23
  viewMore = _useState[0],
21
24
  setViewMore = _useState[1];
@@ -64,10 +67,11 @@ var CardComponent = function CardComponent(_ref) {
64
67
  rowData: data,
65
68
  iconName: "more",
66
69
  rowIndex: index,
67
- handleMenuActions: handleMenuActions
70
+ handleMenuActions: handleMenuActions,
71
+ labels: labels
68
72
  })), columns.length > initialDisplayCount && /*#__PURE__*/React.createElement(TooltipComponent, {
69
73
  tableBodyRef: useCardRef,
70
- title: viewMore ? ' View Less' : 'View More',
74
+ title: viewMore ? labels.viewLess : labels.viewMore,
71
75
  enabled: false
72
76
  }, /*#__PURE__*/React.createElement("button", {
73
77
  onClick: toggleViewMore,
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ActionProps } from '../commontypes';
3
+ import { type QbsTableLabels } from '../labels';
3
4
  type Props = {
4
5
  iconName: string;
5
6
  actionDropDown: ActionProps[];
@@ -8,6 +9,7 @@ type Props = {
8
9
  dataTheme?: string;
9
10
  tableBodyRef: React.RefObject<HTMLDivElement>;
10
11
  rowIndex?: number;
12
+ labels?: QbsTableLabels;
11
13
  };
12
14
  declare const CardMenuDropdown: React.FC<Props>;
13
15
  export default CardMenuDropdown;
@@ -1,10 +1,13 @@
1
1
  import React, { useEffect, useRef, useState } from 'react';
2
+ import { mergeLabels } from '../labels';
2
3
  import { ThreeDotIcon } from './icons';
3
4
  import TooltipComponent from './ToolTip';
4
5
  var CardMenuDropdown = function CardMenuDropdown(_ref) {
5
6
  var actionDropDown = _ref.actionDropDown,
6
7
  handleMenuActions = _ref.handleMenuActions,
7
- rowData = _ref.rowData;
8
+ rowData = _ref.rowData,
9
+ labelsProp = _ref.labels;
10
+ var labels = mergeLabels(labelsProp);
8
11
  var _useState = useState(false),
9
12
  openMenu = _useState[0],
10
13
  setOpenMenu = _useState[1];
@@ -63,7 +66,7 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
63
66
  onClick: toggleMenu,
64
67
  ref: menuButtonRef
65
68
  }, /*#__PURE__*/React.createElement(TooltipComponent, {
66
- title: "Actions",
69
+ title: labels.actions,
67
70
  enabled: false,
68
71
  ref: menuButtonRef
69
72
  }, /*#__PURE__*/React.createElement(ThreeDotIcon, null))), openMenu && /*#__PURE__*/React.createElement("div", {
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { QbsColumnProps } from '../commontypes';
3
+ import { type QbsTableLabels } from '../labels';
3
4
  interface ColumnToggleProps {
4
5
  columns: QbsColumnProps[];
5
6
  onToggle: (columnName: string) => void;
@@ -11,6 +12,7 @@ interface ColumnToggleProps {
11
12
  tableHeight?: number;
12
13
  viewMode?: string;
13
14
  setViewMode?: (value: string) => void;
15
+ labels?: QbsTableLabels;
14
16
  }
15
17
  declare const ColumnToggle: React.FC<ColumnToggleProps>;
16
18
  export default ColumnToggle;
@@ -1,4 +1,5 @@
1
1
  import React, { useCallback, useEffect, useRef, useState } from 'react';
2
+ import { mergeLabels } from '../labels';
2
3
  import { SettingsIcon } from './icons';
3
4
  var ColumnToggle = function ColumnToggle(_ref) {
4
5
  var columns = _ref.columns,
@@ -9,7 +10,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
9
10
  handleResetColumns = _ref.handleResetColumns,
10
11
  handleColumnToggle = _ref.handleColumnToggle,
11
12
  _ref$tableHeight = _ref.tableHeight,
12
- tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
13
+ tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight,
14
+ labelsProp = _ref.labels;
15
+ var labels = mergeLabels(labelsProp);
13
16
  var _useState = useState(null),
14
17
  draggedItem = _useState[0],
15
18
  setDraggedItem = _useState[1];
@@ -164,7 +167,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
164
167
  className: "qbs-table-popup-item"
165
168
  }, /*#__PURE__*/React.createElement("div", {
166
169
  className: "qbs-table-popup-label"
167
- }, "FIXED COLUMNS"), /*#__PURE__*/React.createElement("div", {
170
+ }, labels.fixedColumns), /*#__PURE__*/React.createElement("div", {
168
171
  className: "qbs-table-columns-container"
169
172
  }, /*#__PURE__*/React.createElement("div", {
170
173
  className: "qbs-table-column"
@@ -176,7 +179,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
176
179
  className: "qbs-table-popup-item"
177
180
  }, /*#__PURE__*/React.createElement("div", {
178
181
  className: "qbs-table-popup-label"
179
- }, "VISIBLE COLUMNS"), /*#__PURE__*/React.createElement("div", {
182
+ }, labels.visibleColumns), /*#__PURE__*/React.createElement("div", {
180
183
  className: "qbs-table-columns-container"
181
184
  }, /*#__PURE__*/React.createElement("div", {
182
185
  className: "qbs-table-column"
@@ -188,7 +191,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
188
191
  className: "qbs-table-popup-item"
189
192
  }, /*#__PURE__*/React.createElement("div", {
190
193
  className: "qbs-table-popup-label"
191
- }, "AVAILABLE COLUMNS"), /*#__PURE__*/React.createElement("div", {
194
+ }, labels.availableColumns), /*#__PURE__*/React.createElement("div", {
192
195
  className: "qbs-table-columns-container"
193
196
  }, /*#__PURE__*/React.createElement("div", {
194
197
  className: "qbs-table-column"
@@ -209,12 +212,12 @@ var ColumnToggle = function ColumnToggle(_ref) {
209
212
  onClick: function onClick() {
210
213
  return handleResetColumns === null || handleResetColumns === void 0 ? void 0 : handleResetColumns();
211
214
  }
212
- }, "Reset to default"), /*#__PURE__*/React.createElement("a", {
215
+ }, labels.resetToDefault), /*#__PURE__*/React.createElement("a", {
213
216
  className: "qbs-table-reset-link",
214
217
  href: "#",
215
218
  onClick: function onClick() {
216
219
  return handleColToggle();
217
220
  }
218
- }, "Save"))))));
221
+ }, labels.save))))));
219
222
  };
220
223
  export default ColumnToggle;
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  export interface SearchProps {
3
3
  placeholder: string;
4
+ searchAriaLabel?: string;
4
5
  handleChange: (value: string) => void;
5
6
  searchValue: string | undefined;
6
7
  handleSearch: (value?: string) => void;
@@ -1,6 +1,8 @@
1
1
  import React, { memo, useCallback } from 'react';
2
2
  var SearchInput = function SearchInput(_ref) {
3
3
  var placeholder = _ref.placeholder,
4
+ _ref$searchAriaLabel = _ref.searchAriaLabel,
5
+ searchAriaLabel = _ref$searchAriaLabel === void 0 ? 'Search' : _ref$searchAriaLabel,
4
6
  handleChange = _ref.handleChange,
5
7
  searchValue = _ref.searchValue,
6
8
  handleSearch = _ref.handleSearch;
@@ -24,7 +26,7 @@ var SearchInput = function SearchInput(_ref) {
24
26
  placeholder: placeholder,
25
27
  value: searchValue != null ? searchValue : '',
26
28
  onChange: handleInputChange,
27
- "aria-label": "Search"
29
+ "aria-label": searchAriaLabel
28
30
  }), /*#__PURE__*/React.createElement("button", {
29
31
  className: "search-button absolute left-1 bottom-1.5 bg-white text-grey-dark",
30
32
  onClick: function onClick() {
@@ -1 +1 @@
1
- export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number): string;
1
+ export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number, formatRange?: (start: number, end: number, total: number) => string): string;
@@ -1,5 +1,10 @@
1
- export function getRowDisplayRange(totalRows, rowsPerPage, pageNumber) {
1
+ export function getRowDisplayRange(totalRows, rowsPerPage, pageNumber, formatRange) {
2
+ if (formatRange === void 0) {
3
+ formatRange = function formatRange(start, end, total) {
4
+ return "Showing " + start + " to " + end + " of " + total;
5
+ };
6
+ }
2
7
  var start = (pageNumber - 1) * rowsPerPage + 1;
3
8
  var end = Math.min(pageNumber * rowsPerPage, totalRows);
4
- return "Showing " + (start != null ? start : 0) + " to " + (end != null ? end : 0) + " of " + (totalRows != null ? totalRows : 0);
9
+ return formatRange(start != null ? start : 0, end != null ? end : 0, totalRows != null ? totalRows : 0);
5
10
  }
@@ -1,4 +1,5 @@
1
1
  import { FC } from 'react';
2
+ import { type QbsTableLabels } from './qbsTable/labels';
2
3
  type PageProps = {
3
4
  paginationProps: {
4
5
  total?: number;
@@ -9,6 +10,8 @@ type PageProps = {
9
10
  onRowsPerPage?: (row: number, page: number) => void;
10
11
  onPagination?: (row: number, page: number) => void;
11
12
  };
13
+ labels?: QbsTableLabels;
14
+ dataTheme?: string;
12
15
  };
13
16
  declare const Pagination: FC<PageProps>;
14
17
  export default Pagination;
package/lib/Pagination.js CHANGED
@@ -5,6 +5,7 @@ exports.__esModule = true;
5
5
  exports["default"] = void 0;
6
6
  var _react = _interopRequireWildcard(require("react"));
7
7
  var _customSelect = _interopRequireDefault(require("./customSelect"));
8
+ var _labels = require("./qbsTable/labels");
8
9
  var _tablecalc = require("./qbsTable/utilities/tablecalc");
9
10
  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); }
10
11
  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; }
@@ -41,7 +42,10 @@ var PageIndex = function PageIndex(_ref) {
41
42
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderPageNumbers());
42
43
  };
43
44
  var Pagination = function Pagination(_ref2) {
44
- var paginationProps = _ref2.paginationProps;
45
+ var paginationProps = _ref2.paginationProps,
46
+ labelsProp = _ref2.labels,
47
+ dataTheme = _ref2.dataTheme;
48
+ var labels = (0, _labels.mergeLabels)(labelsProp);
45
49
  var _paginationProps$drop = paginationProps.dropOptions,
46
50
  dropOptions = _paginationProps$drop === void 0 ? [10, 20, 50, 100, 200] : _paginationProps$drop,
47
51
  _paginationProps$curr = paginationProps.currentPage,
@@ -82,13 +86,14 @@ var Pagination = function Pagination(_ref2) {
82
86
  };
83
87
  return /*#__PURE__*/_react["default"].createElement("div", {
84
88
  className: "qbs-table-custom-pagination",
89
+ "data-theme": dataTheme,
85
90
  style: {
86
91
  display: 'flex',
87
92
  justifyContent: 'space-between'
88
93
  }
89
94
  }, /*#__PURE__*/_react["default"].createElement("div", {
90
95
  className: "rows-count"
91
- }, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage)), /*#__PURE__*/_react["default"].createElement("div", {
96
+ }, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage, labels.showingRange)), /*#__PURE__*/_react["default"].createElement("div", {
92
97
  className: "qbs-table-pagination-right-block"
93
98
  }, /*#__PURE__*/_react["default"].createElement("button", {
94
99
  className: "qbs-table-icon-container",
@@ -167,7 +172,7 @@ var Pagination = function Pagination(_ref2) {
167
172
  className: "qbs-table-pagination-flexBox"
168
173
  }, /*#__PURE__*/_react["default"].createElement("span", {
169
174
  className: "qbs-table-pagination-text"
170
- }, "Items per page"), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
175
+ }, labels.itemsPerPage), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
171
176
  options: dropData,
172
177
  selectedValue: rowsPerPageState,
173
178
  onChange: handleRowsPerPage
package/lib/index.d.ts CHANGED
@@ -11,5 +11,5 @@ export type { ColumnProps } from './Column';
11
11
  export type { CellProps } from './Cell';
12
12
  export type { HeaderCellProps } from './HeaderCell';
13
13
  export type { ColumnGroupProps } from './ColumnGroup';
14
- export type { QbsTableProps } from './qbsTable/commontypes';
14
+ export type { QbsTableProps, QbsTableLabels } from './qbsTable/commontypes';
15
15
  export type { StandardProps, SortType, RowDataType, RowKeyType, TableSizeChangeEventName } from './@types/common';
@@ -104,12 +104,103 @@
104
104
  }
105
105
  }
106
106
  .qbs-table[data-theme='dark'] {
107
- background-color: #333333;
108
- color: #ffffff;
107
+ background-color: #1f1f1f;
108
+ color: #f5f5f5;
109
+
110
+ .qbs-table-border-wrap {
111
+ border-color: #3d3d3d;
112
+ background: #262626;
113
+ }
114
+
115
+ .qbs-table-toolbar-container,
116
+ .qbs-table-toolbar,
117
+ .qbs-table-toolbar-sub-container,
118
+ .sub-qbs-table-toolbar {
119
+ color: #f5f5f5;
120
+ }
121
+
122
+ .qbs-table-search-container {
123
+ .input {
124
+ border-color: #4a4a4a;
125
+ background: #2d2d2d;
126
+ color: #f5f5f5;
127
+
128
+ &:hover,
129
+ &:focus {
130
+ border-color: #6b6b6b;
131
+ background: #2d2d2d;
132
+ }
133
+ }
134
+
135
+ .search-button,
136
+ .close-button {
137
+ color: #d1d1d1;
138
+ background-color: transparent;
139
+ }
140
+ }
141
+
142
+ .qbs-table-column-popup,
143
+ .qbs-table-popup-container {
144
+ background: #2d2d2d;
145
+ color: #f5f5f5;
146
+ border-color: #4a4a4a;
147
+ }
148
+
149
+ .qbs-table-popup-label,
150
+ .qbs-table-popup-value,
151
+ .qbs-table-reset-link {
152
+ color: #f5f5f5;
153
+ }
154
+
155
+ .qbs-table-custom-pagination,
156
+ .qbs-table-pagination-text,
157
+ .rows-count {
158
+ color: #f5f5f5;
159
+ }
160
+
161
+ .qbs-table-icon-container svg path {
162
+ stroke: #e5e5e5;
163
+ }
164
+
165
+ .custom-select-trigger,
166
+ .custom-select-options {
167
+ background: #2d2d2d;
168
+ color: #f5f5f5;
169
+ border-color: #4a4a4a;
170
+ }
171
+
172
+ .qbs-card-container {
173
+ border-color: #4a4a4a;
174
+ background: #262626;
175
+ color: #f5f5f5;
176
+ }
177
+
178
+ .nodata-title {
179
+ color: #f5f5f5;
180
+ }
181
+
182
+ .tooltiptext {
183
+ background-color: #3d3d3d;
184
+ color: #fff;
185
+ }
186
+ }
187
+
188
+ .qbs-table-custom-pagination[data-theme='dark'] {
189
+ color: #f5f5f5;
190
+
191
+ .rows-count,
192
+ .qbs-table-pagination-text {
193
+ color: #f5f5f5;
194
+ }
195
+
196
+ .qbs-table-icon-container svg path {
197
+ stroke: #e5e5e5;
198
+ }
109
199
  }
200
+
110
201
  .rs-table-cell-content[data-theme='dark'] {
111
- background-color: #333333;
112
- color: #ffffff;
202
+ background-color: #262626;
203
+ color: #f5f5f5;
113
204
  }
114
205
  /* Dropdown container */
115
206
  .qbs-table-menu-dropdown {
@@ -12,6 +12,7 @@ var _HeaderCell = _interopRequireDefault(require("../HeaderCell"));
12
12
  var _Pagination = _interopRequireDefault(require("../Pagination"));
13
13
  var _Table = _interopRequireDefault(require("../Table"));
14
14
  var _useResponsiveStore = _interopRequireDefault(require("../utils/useResponsiveStore"));
15
+ var _labels = require("./labels");
15
16
  var _CustomTableCell = require("./CustomTableCell");
16
17
  var _Toolbar = _interopRequireDefault(require("./Toolbar"));
17
18
  var _CardComponent = _interopRequireDefault(require("./utilities/CardComponent"));
@@ -133,7 +134,11 @@ var QbsTable = function QbsTable(_ref) {
133
134
  rowHeight = _ref.rowHeight,
134
135
  isFullScreen = _ref.isFullScreen,
135
136
  _ref$showHeader = _ref.showHeader,
136
- showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader;
137
+ showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
138
+ labelsProp = _ref.labels;
139
+ var labels = (0, _react.useMemo)(function () {
140
+ return (0, _labels.mergeLabels)(labelsProp);
141
+ }, [labelsProp]);
137
142
  var _useState = (0, _react.useState)(false),
138
143
  loading = _useState[0],
139
144
  setLoading = _useState[1];
@@ -144,8 +149,8 @@ var QbsTable = function QbsTable(_ref) {
144
149
  checkedKeys = _useState3[0],
145
150
  setCheckedKeys = _useState3[1];
146
151
  var dataTheme = (0, _react.useMemo)(function () {
147
- var _localStorage$getItem;
148
- return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
152
+ var _ref2;
153
+ return (_ref2 = theme != null ? theme : typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) != null ? _ref2 : 'light';
149
154
  }, [theme]);
150
155
  var _useState4 = (0, _react.useState)(false),
151
156
  isOpen = _useState4[0],
@@ -266,7 +271,7 @@ var QbsTable = function QbsTable(_ref) {
266
271
 
267
272
  // useEffect(() => {
268
273
  // }, [columns]);
269
- var handleClear = function handleClear(_ref2) {
274
+ var handleClear = function handleClear(_ref3) {
270
275
  setCheckedKeys([]);
271
276
  handleChecked([]);
272
277
  };
@@ -301,12 +306,19 @@ var QbsTable = function QbsTable(_ref) {
301
306
  fullWidthView: fullWidthView,
302
307
  setTableFullView: setTableFullView,
303
308
  setRowViewToggle: setRowViewToggle,
304
- isFullScreen: isFullScreen
309
+ isFullScreen: isFullScreen,
310
+ labels: labels
305
311
  };
312
+ (0, _react.useEffect)(function () {
313
+ if (!dataTheme || typeof document === 'undefined') return;
314
+ document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
315
+ document.documentElement.dataset.theme = dataTheme;
316
+ }, [dataTheme]);
306
317
  var themeToggle = (0, _react.useMemo)(function () {
307
- return document.getElementById('themeToggle');
318
+ return typeof document !== 'undefined' ? document.getElementById('themeToggle') : null;
308
319
  }, []);
309
320
  (0, _react.useEffect)(function () {
321
+ if (theme || typeof document === 'undefined') return;
310
322
  var handleThemeToggle = function handleThemeToggle() {
311
323
  if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
312
324
  document.body.setAttribute('data-theme', 'dark');
@@ -328,7 +340,7 @@ var QbsTable = function QbsTable(_ref) {
328
340
  themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
329
341
  document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
330
342
  };
331
- }, [themeToggle]);
343
+ }, [theme, themeToggle]);
332
344
  var handleExpanded = (0, _react.useCallback)(function (rowData) {
333
345
  var keyValue = dataRowKey;
334
346
  var key = rowData[keyValue];
@@ -504,26 +516,26 @@ var QbsTable = function QbsTable(_ref) {
504
516
  // [columns, dataTheme]
505
517
  // );
506
518
  var columnsRendered = (0, _react.useMemo)(function () {
507
- return (columns != null ? columns : []).map(function (_ref3) {
508
- var title = _ref3.title,
509
- field = _ref3.field,
510
- resizable = _ref3.resizable,
511
- sortable = _ref3.sortable,
512
- colWidth = _ref3.colWidth,
513
- align = _ref3.align,
514
- grouped = _ref3.grouped,
515
- groupHeader = _ref3.groupHeader,
516
- fixed = _ref3.fixed,
517
- children = _ref3.children,
518
- customCell = _ref3.customCell,
519
- renderCell = _ref3.renderCell,
520
- isVisible = _ref3.isVisible,
521
- link = _ref3.link,
522
- getPath = _ref3.getPath,
523
- rowClick = _ref3.rowClick,
524
- sortKey = _ref3.sortKey,
525
- type = _ref3.type,
526
- hideLink = _ref3.hideLink;
519
+ return (columns != null ? columns : []).map(function (_ref4) {
520
+ var title = _ref4.title,
521
+ field = _ref4.field,
522
+ resizable = _ref4.resizable,
523
+ sortable = _ref4.sortable,
524
+ colWidth = _ref4.colWidth,
525
+ align = _ref4.align,
526
+ grouped = _ref4.grouped,
527
+ groupHeader = _ref4.groupHeader,
528
+ fixed = _ref4.fixed,
529
+ children = _ref4.children,
530
+ customCell = _ref4.customCell,
531
+ renderCell = _ref4.renderCell,
532
+ isVisible = _ref4.isVisible,
533
+ link = _ref4.link,
534
+ getPath = _ref4.getPath,
535
+ rowClick = _ref4.rowClick,
536
+ sortKey = _ref4.sortKey,
537
+ type = _ref4.type,
538
+ hideLink = _ref4.hideLink;
527
539
  return isVisible ? grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
528
540
  header: groupHeader,
529
541
  fixed: fixed,
@@ -633,7 +645,7 @@ var QbsTable = function QbsTable(_ref) {
633
645
  bordered: bordered,
634
646
  renderEmpty: function renderEmpty(info) {
635
647
  return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/_react["default"].createElement(_empty["default"], {
636
- title: emptyTitle != null ? emptyTitle : 'No Data Found',
648
+ title: emptyTitle != null ? emptyTitle : labels.noDataFound,
637
649
  subtitle: emptySubTitle
638
650
  });
639
651
  },
@@ -739,7 +751,8 @@ var QbsTable = function QbsTable(_ref) {
739
751
  setViewMode: setViewMode,
740
752
  setIsOpen: setIsOpen,
741
753
  handleResetColumns: handleResetColumns,
742
- handleColumnToggle: handleColumnToggle
754
+ handleColumnToggle: handleColumnToggle,
755
+ labels: labels
743
756
  })), /*#__PURE__*/_react["default"].createElement(_Cell["default"], null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
744
757
  width: 40,
745
758
  fixed: "right"
@@ -758,7 +771,8 @@ var QbsTable = function QbsTable(_ref) {
758
771
  isOpen: isOpen,
759
772
  setIsOpen: setIsOpen,
760
773
  handleResetColumns: handleResetColumns,
761
- handleColumnToggle: handleColumnToggle
774
+ handleColumnToggle: handleColumnToggle,
775
+ labels: labels
762
776
  })), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
763
777
  tableBodyRef: tableBodyRef,
764
778
  dropType: dropType,
@@ -777,7 +791,7 @@ var QbsTable = function QbsTable(_ref) {
777
791
  }, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/_react["default"].createElement("div", {
778
792
  className: "flex flex-col gap-2 p-2 mt-6 card-empty-container"
779
793
  }, /*#__PURE__*/_react["default"].createElement(_empty["default"], {
780
- title: emptyTitle != null ? emptyTitle : 'No Data Found',
794
+ title: emptyTitle != null ? emptyTitle : labels.noDataFound,
781
795
  subtitle: emptySubTitle
782
796
  })), isLoading ? handleCustomCardLoader ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, handleCustomCardLoader()) : /*#__PURE__*/_react["default"].createElement("div", {
783
797
  className: "flex flex-col gap-2 p-2"
@@ -792,10 +806,13 @@ var QbsTable = function QbsTable(_ref) {
792
806
  childDetailHeading: childDetailHeading,
793
807
  columns: columns,
794
808
  tableBodyRef: tableBodyRef,
795
- actionProps: actionProps
809
+ actionProps: actionProps,
810
+ labels: labels
796
811
  }));
797
812
  })), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
798
- paginationProps: paginationProps
813
+ paginationProps: paginationProps,
814
+ labels: labels,
815
+ dataTheme: dataTheme
799
816
  }))));
800
817
  };
801
818
  var _default = QbsTable;