qbs-react-grid 2.0.3 → 2.0.5

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 (23) hide show
  1. package/es/qbsTable/QbsTable.js +37 -5
  2. package/es/qbsTable/Toolbar.js +45 -4
  3. package/es/qbsTable/commontypes.d.ts +11 -0
  4. package/es/qbsTable/utilities/ColumShowHide.d.ts +2 -0
  5. package/es/qbsTable/utilities/empty.js +1 -1
  6. package/es/qbsTable/utilities/icons.d.ts +3 -0
  7. package/es/qbsTable/utilities/icons.js +64 -0
  8. package/lib/qbsTable/QbsTable.js +37 -5
  9. package/lib/qbsTable/Toolbar.js +44 -3
  10. package/lib/qbsTable/commontypes.d.ts +11 -0
  11. package/lib/qbsTable/utilities/ColumShowHide.d.ts +2 -0
  12. package/lib/qbsTable/utilities/empty.js +1 -1
  13. package/lib/qbsTable/utilities/icons.d.ts +3 -0
  14. package/lib/qbsTable/utilities/icons.js +69 -2
  15. package/package.json +1 -1
  16. package/src/customSelect.tsx +88 -88
  17. package/src/qbsTable/QbsTable.tsx +30 -6
  18. package/src/qbsTable/Toolbar.tsx +32 -3
  19. package/src/qbsTable/commontypes.ts +15 -4
  20. package/src/qbsTable/utilities/ColumShowHide.tsx +23 -0
  21. package/src/qbsTable/utilities/empty.tsx +2 -2
  22. package/src/qbsTable/utilities/icons.tsx +77 -0
  23. package/src/utils/useTableRows.ts +1 -1
package/es/qbsTable/QbsTable.js CHANGED
@@ -53,7 +53,7 @@ var QbsTable = function QbsTable(_ref) {
53
53
  _ref$height = _ref.height,
54
54
  height = _ref$height === void 0 ? 630 : _ref$height,
55
55
  onExpandChange = _ref.onExpandChange,
56
- wordWrap = _ref.wordWrap,
56
+ propsWordWrap = _ref.wordWrap,
57
57
  _ref$dataRowKey = _ref.dataRowKey,
58
58
  dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
59
59
  defaultExpandAllRows = _ref.defaultExpandAllRows,
@@ -99,7 +99,7 @@ var QbsTable = function QbsTable(_ref) {
99
99
  _ref$tableView = _ref.tableView,
100
100
  tableView = _ref$tableView === void 0 ? true : _ref$tableView,
101
101
  _ref$enableTableToggl = _ref.enableTableToggle,
102
- enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
102
+ enableTableToggle = _ref$enableTableToggl === void 0 ? true : _ref$enableTableToggl,
103
103
  _ref$cardColumLimit = _ref.cardColumLimit,
104
104
  cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
105
105
  _ref$childDetailHeadi = _ref.childDetailHeading,
@@ -112,7 +112,16 @@ var QbsTable = function QbsTable(_ref) {
112
112
  loadMoreData = _ref.loadMoreData,
113
113
  infiniteLoading = _ref.infiniteLoading,
114
114
  _ref$infiniteScroll = _ref.infiniteScroll,
115
- infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll;
115
+ infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
116
+ propsViewMode = _ref.viewMode,
117
+ _ref$rowViewToggle = _ref.rowViewToggle,
118
+ rowViewToggle = _ref$rowViewToggle === void 0 ? true : _ref$rowViewToggle,
119
+ _ref$defaultRowView = _ref.defaultRowView,
120
+ defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
121
+ _ref$fullWidthView = _ref.fullWidthView,
122
+ fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
123
+ setTableFullView = _ref.setTableFullView,
124
+ setRowViewToggle = _ref.setRowViewToggle;
116
125
  var _useState = useState(false),
117
126
  loading = _useState[0],
118
127
  setLoading = _useState[1];
@@ -136,6 +145,12 @@ var QbsTable = function QbsTable(_ref) {
136
145
  var isMobile = useResponsiveStore();
137
146
  var tableBodyRef = useRef(null);
138
147
  var wheelWrapperRef = useRef(null);
148
+ var _useState6 = useState(propsViewMode != null ? propsViewMode : 'expanded'),
149
+ viewMode = _useState6[0],
150
+ setViewMode = _useState6[1];
151
+ var _useState7 = useState(propsWordWrap != null ? propsWordWrap : false),
152
+ wordWrap = _useState7[0],
153
+ setWordWrap = _useState7[1];
139
154
  var handleSortColumn = useCallback(function (sortColumn, sortType) {
140
155
  setLoading(true);
141
156
  setTimeout(function () {
@@ -225,13 +240,21 @@ var QbsTable = function QbsTable(_ref) {
225
240
  });
226
241
  }
227
242
  }, [wordWrap]);
243
+ useEffect(function () {
244
+ if (!defaultRowView) {
245
+ setWordWrap('break-word');
246
+ } else {
247
+ setWordWrap(false);
248
+ }
249
+ REFRESH_KEY = REFRESH_KEY + 1;
250
+ }, [defaultRowView]);
228
251
  var onReorder = useCallback(function (columns) {
229
252
  setColumns(columns);
230
253
  }, []);
231
254
 
232
255
  // useEffect(() => {
233
256
  // }, [columns]);
234
-
257
+ console.log(viewMode);
235
258
  var handleClear = function handleClear(_ref2) {
236
259
  setCheckedKeys([]);
237
260
  handleChecked([]);
@@ -261,7 +284,12 @@ var QbsTable = function QbsTable(_ref) {
261
284
  searchPlaceholder: searchPlaceholder,
262
285
  setTableViewToggle: setTableViewToggle,
263
286
  tableViewToggle: tableViewToggle,
264
- enableTableToggle: enableTableToggle
287
+ enableTableToggle: enableTableToggle,
288
+ rowViewToggle: rowViewToggle,
289
+ defaultRowView: defaultRowView,
290
+ fullWidthView: fullWidthView,
291
+ setTableFullView: setTableFullView,
292
+ setRowViewToggle: setRowViewToggle
265
293
  };
266
294
  var themeToggle = useMemo(function () {
267
295
  return document.getElementById('themeToggle');
@@ -697,6 +725,8 @@ var QbsTable = function QbsTable(_ref) {
697
725
  onReorder: onReorder,
698
726
  isOpen: isOpen,
699
727
  tableHeight: height,
728
+ viewMode: viewMode,
729
+ setViewMode: setViewMode,
700
730
  setIsOpen: setIsOpen,
701
731
  handleResetColumns: handleResetColumns,
702
732
  handleColumnToggle: handleColumnToggle
@@ -713,6 +743,8 @@ var QbsTable = function QbsTable(_ref) {
713
743
  onToggle: handleToggle,
714
744
  tableHeight: height,
715
745
  onReorder: onReorder,
746
+ viewMode: viewMode,
747
+ setViewMode: setViewMode,
716
748
  isOpen: isOpen,
717
749
  setIsOpen: setIsOpen,
718
750
  handleResetColumns: handleResetColumns,
package/es/qbsTable/Toolbar.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useCallback, useRef, useState } from 'react';
2
2
  import useResponsiveStore from '../utils/useResponsiveStore';
3
3
  import debounce from './utilities/debounce';
4
- import { CardView, TableView } from './utilities/icons';
4
+ import { CardView, ContentView, DefaultView, ExpandIcon, TableView } from './utilities/icons';
5
5
  import SearchInput from './utilities/SearchInput';
6
6
  import { getRowDisplayRange } from './utilities/tablecalc';
7
7
  import TooltipComponent from './utilities/ToolTip';
@@ -27,7 +27,15 @@ var ToolBar = function ToolBar(_ref) {
27
27
  tableViewToggle = _ref.tableViewToggle,
28
28
  setTableViewToggle = _ref.setTableViewToggle,
29
29
  _ref$enableTableToggl = _ref.enableTableToggle,
30
- enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl;
30
+ enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
31
+ _ref$rowViewToggle = _ref.rowViewToggle,
32
+ rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
33
+ _ref$defaultRowView = _ref.defaultRowView,
34
+ defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
35
+ _ref$fullWidthView = _ref.fullWidthView,
36
+ fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
37
+ setTableFullView = _ref.setTableFullView,
38
+ setRowViewToggle = _ref.setRowViewToggle;
31
39
  var debouncedOnSearch = useCallback(debounce(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
32
40
  var _useState = useState(searchValue),
33
41
  searchParam = _useState[0],
@@ -97,8 +105,41 @@ var ToolBar = function ToolBar(_ref) {
97
105
  strokeLinejoin: "round",
98
106
  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"
99
107
  }))), tableHeaderActions, /*#__PURE__*/React.createElement("div", {
100
- className: " pr-1 cursor-pointer relative "
101
- }, enableTableToggle && !isMobile && /*#__PURE__*/React.createElement("div", {
108
+ className: " pr-1 cursor-pointer relative table_custom_ctions "
109
+ }, rowViewToggle && /*#__PURE__*/React.createElement("div", {
110
+ className: "flex gap-2 qbs-row-switch-cntainer"
111
+ }, /*#__PURE__*/React.createElement("div", {
112
+ className: "flex gap-2 table_cell_style"
113
+ }, /*#__PURE__*/React.createElement(TooltipComponent, {
114
+ tableBodyRef: toolbarRef,
115
+ title: 'Switch to Default View'
116
+ }, /*#__PURE__*/React.createElement("div", {
117
+ onClick: function onClick() {
118
+ return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
119
+ }
120
+ }, /*#__PURE__*/React.createElement(DefaultView, {
121
+ className: "" + (defaultRowView ? 'active' : '')
122
+ }))), /*#__PURE__*/React.createElement(TooltipComponent, {
123
+ tableBodyRef: toolbarRef,
124
+ title: 'Switch to Compact View'
125
+ }, /*#__PURE__*/React.createElement("div", {
126
+ onClick: function onClick() {
127
+ return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
128
+ }
129
+ }, /*#__PURE__*/React.createElement(ContentView, {
130
+ className: "" + (!defaultRowView ? 'active' : '')
131
+ })))), /*#__PURE__*/React.createElement("div", {
132
+ className: " table_full_width"
133
+ }, /*#__PURE__*/React.createElement(TooltipComponent, {
134
+ tableBodyRef: toolbarRef,
135
+ title: 'Switch to Full Screen'
136
+ }, /*#__PURE__*/React.createElement("div", {
137
+ onClick: function onClick() {
138
+ return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
139
+ }
140
+ }, /*#__PURE__*/React.createElement(ExpandIcon, {
141
+ className: "" + (fullWidthView ? 'active' : '')
142
+ }))))), enableTableToggle && !isMobile && /*#__PURE__*/React.createElement("div", {
102
143
  className: "qbs-table-top-icons flex gap-2"
103
144
  }, /*#__PURE__*/React.createElement(TooltipComponent, {
104
145
  tableBodyRef: toolbarRef,
package/es/qbsTable/commontypes.d.ts CHANGED
@@ -131,6 +131,12 @@ export interface QbsTableProps {
131
131
  loadMoreData?: () => void;
132
132
  infiniteScroll?: boolean;
133
133
  infiniteLoading?: boolean;
134
+ viewMode?: string;
135
+ rowViewToggle?: boolean;
136
+ defaultRowView?: boolean;
137
+ fullWidthView?: boolean;
138
+ setTableFullView?: (value: boolean) => void;
139
+ setRowViewToggle?: (value: boolean) => void;
134
140
  }
135
141
  export interface QbsTableToolbarProps {
136
142
  title?: string;
@@ -166,5 +172,10 @@ export interface QbsTableToolbarProps {
166
172
  hidden?: boolean;
167
173
  customHide?: string;
168
174
  }[];
175
+ rowViewToggle?: boolean;
176
+ defaultRowView?: boolean;
177
+ fullWidthView?: boolean;
178
+ setTableFullView?: (value: boolean) => void;
179
+ setRowViewToggle?: (value: boolean) => void;
169
180
  }
170
181
  export {};
package/es/qbsTable/utilities/ColumShowHide.d.ts CHANGED
@@ -9,6 +9,8 @@ interface ColumnToggleProps {
9
9
  handleColumnToggle?: (columns: QbsColumnProps[]) => void;
10
10
  handleResetColumns?: () => void;
11
11
  tableHeight?: number;
12
+ viewMode?: string;
13
+ setViewMode?: (value: string) => void;
12
14
  }
13
15
  declare const ColumnToggle: React.FC<ColumnToggleProps>;
14
16
  export default ColumnToggle;
package/es/qbsTable/utilities/empty.js CHANGED
@@ -70,7 +70,7 @@ var NoData = function NoData(_ref) {
70
70
  }), /*#__PURE__*/React.createElement("path", {
71
71
  fill: "#797979",
72
72
  d: "M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
73
- })), " ", ' '), /*#__PURE__*/React.createElement("p", {
73
+ })), ' '), /*#__PURE__*/React.createElement("p", {
74
74
  className: "text-center text-common font-bold text-blackAlt nodata-title"
75
75
  }, title), /*#__PURE__*/React.createElement("span", {
76
76
  className: "text-xxs font-medium text-grey-medium nodata-sub-title"
package/es/qbsTable/utilities/icons.d.ts CHANGED
@@ -6,3 +6,6 @@ export declare const TableIcon: React.FC<any>;
6
6
  export declare const CardIcon: React.FC<any>;
7
7
  export declare const CardView: React.FC<any>;
8
8
  export declare const TableView: React.FC<any>;
9
+ export declare const ExpandIcon: React.FC<any>;
10
+ export declare const ContentView: React.FC<any>;
11
+ export declare const DefaultView: React.FC<any>;
package/es/qbsTable/utilities/icons.js CHANGED
@@ -125,4 +125,68 @@ export var TableView = function TableView(_ref5) {
125
125
  stroke: "currentColor",
126
126
  strokeWidth: "1.5"
127
127
  }));
128
+ };
129
+ export var ExpandIcon = function ExpandIcon(_ref6) {
130
+ var className = _ref6.className;
131
+ return /*#__PURE__*/React.createElement("svg", {
132
+ width: "16",
133
+ height: "16",
134
+ className: className,
135
+ viewBox: "0 0 16 16",
136
+ fill: "none",
137
+ xmlns: "http://www.w3.org/2000/svg"
138
+ }, /*#__PURE__*/React.createElement("path", {
139
+ d: "M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668",
140
+ stroke: "#585858",
141
+ strokeWidth: "1.5",
142
+ strokeLinecap: "round",
143
+ strokeLinejoin: "round"
144
+ }));
145
+ };
146
+ export var ContentView = function ContentView(_ref7) {
147
+ var className = _ref7.className;
148
+ return /*#__PURE__*/React.createElement("svg", {
149
+ width: "16",
150
+ height: "17",
151
+ className: className,
152
+ viewBox: "0 0 16 17",
153
+ fill: "none",
154
+ xmlns: "http://www.w3.org/2000/svg"
155
+ }, /*#__PURE__*/React.createElement("path", {
156
+ d: "M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z",
157
+ stroke: "#585858",
158
+ strokeLinecap: "round",
159
+ strokeLinejoin: "round"
160
+ }), /*#__PURE__*/React.createElement("path", {
161
+ d: "M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z",
162
+ stroke: "#585858",
163
+ strokeLinecap: "round",
164
+ strokeLinejoin: "round"
165
+ }));
166
+ };
167
+ export var DefaultView = function DefaultView(_ref8) {
168
+ var className = _ref8.className;
169
+ return /*#__PURE__*/React.createElement("svg", {
170
+ width: "16",
171
+ height: "17",
172
+ className: className,
173
+ viewBox: "0 0 16 17",
174
+ fill: "none",
175
+ xmlns: "http://www.w3.org/2000/svg"
176
+ }, /*#__PURE__*/React.createElement("path", {
177
+ fillRule: "evenodd",
178
+ clipRule: "evenodd",
179
+ d: "M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z",
180
+ fill: "#585858"
181
+ }), /*#__PURE__*/React.createElement("path", {
182
+ fillRule: "evenodd",
183
+ clipRule: "evenodd",
184
+ d: "M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z",
185
+ fill: "#585858"
186
+ }), /*#__PURE__*/React.createElement("path", {
187
+ fillRule: "evenodd",
188
+ clipRule: "evenodd",
189
+ d: "M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z",
190
+ fill: "#585858"
191
+ }));
128
192
  };
package/lib/qbsTable/QbsTable.js CHANGED
@@ -59,7 +59,7 @@ var QbsTable = function QbsTable(_ref) {
59
59
  _ref$height = _ref.height,
60
60
  height = _ref$height === void 0 ? 630 : _ref$height,
61
61
  onExpandChange = _ref.onExpandChange,
62
- wordWrap = _ref.wordWrap,
62
+ propsWordWrap = _ref.wordWrap,
63
63
  _ref$dataRowKey = _ref.dataRowKey,
64
64
  dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
65
65
  defaultExpandAllRows = _ref.defaultExpandAllRows,
@@ -105,7 +105,7 @@ var QbsTable = function QbsTable(_ref) {
105
105
  _ref$tableView = _ref.tableView,
106
106
  tableView = _ref$tableView === void 0 ? true : _ref$tableView,
107
107
  _ref$enableTableToggl = _ref.enableTableToggle,
108
- enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
108
+ enableTableToggle = _ref$enableTableToggl === void 0 ? true : _ref$enableTableToggl,
109
109
  _ref$cardColumLimit = _ref.cardColumLimit,
110
110
  cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
111
111
  _ref$childDetailHeadi = _ref.childDetailHeading,
@@ -118,7 +118,16 @@ var QbsTable = function QbsTable(_ref) {
118
118
  loadMoreData = _ref.loadMoreData,
119
119
  infiniteLoading = _ref.infiniteLoading,
120
120
  _ref$infiniteScroll = _ref.infiniteScroll,
121
- infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll;
121
+ infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
122
+ propsViewMode = _ref.viewMode,
123
+ _ref$rowViewToggle = _ref.rowViewToggle,
124
+ rowViewToggle = _ref$rowViewToggle === void 0 ? true : _ref$rowViewToggle,
125
+ _ref$defaultRowView = _ref.defaultRowView,
126
+ defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
127
+ _ref$fullWidthView = _ref.fullWidthView,
128
+ fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
129
+ setTableFullView = _ref.setTableFullView,
130
+ setRowViewToggle = _ref.setRowViewToggle;
122
131
  var _useState = (0, _react.useState)(false),
123
132
  loading = _useState[0],
124
133
  setLoading = _useState[1];
@@ -142,6 +151,12 @@ var QbsTable = function QbsTable(_ref) {
142
151
  var isMobile = (0, _useResponsiveStore["default"])();
143
152
  var tableBodyRef = (0, _react.useRef)(null);
144
153
  var wheelWrapperRef = (0, _react.useRef)(null);
154
+ var _useState6 = (0, _react.useState)(propsViewMode != null ? propsViewMode : 'expanded'),
155
+ viewMode = _useState6[0],
156
+ setViewMode = _useState6[1];
157
+ var _useState7 = (0, _react.useState)(propsWordWrap != null ? propsWordWrap : false),
158
+ wordWrap = _useState7[0],
159
+ setWordWrap = _useState7[1];
145
160
  var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
146
161
  setLoading(true);
147
162
  setTimeout(function () {
@@ -231,13 +246,21 @@ var QbsTable = function QbsTable(_ref) {
231
246
  });
232
247
  }
233
248
  }, [wordWrap]);
249
+ (0, _react.useEffect)(function () {
250
+ if (!defaultRowView) {
251
+ setWordWrap('break-word');
252
+ } else {
253
+ setWordWrap(false);
254
+ }
255
+ REFRESH_KEY = REFRESH_KEY + 1;
256
+ }, [defaultRowView]);
234
257
  var onReorder = (0, _react.useCallback)(function (columns) {
235
258
  setColumns(columns);
236
259
  }, []);
237
260
 
238
261
  // useEffect(() => {
239
262
  // }, [columns]);
240
-
263
+ console.log(viewMode);
241
264
  var handleClear = function handleClear(_ref2) {
242
265
  setCheckedKeys([]);
243
266
  handleChecked([]);
@@ -267,7 +290,12 @@ var QbsTable = function QbsTable(_ref) {
267
290
  searchPlaceholder: searchPlaceholder,
268
291
  setTableViewToggle: setTableViewToggle,
269
292
  tableViewToggle: tableViewToggle,
270
- enableTableToggle: enableTableToggle
293
+ enableTableToggle: enableTableToggle,
294
+ rowViewToggle: rowViewToggle,
295
+ defaultRowView: defaultRowView,
296
+ fullWidthView: fullWidthView,
297
+ setTableFullView: setTableFullView,
298
+ setRowViewToggle: setRowViewToggle
271
299
  };
272
300
  var themeToggle = (0, _react.useMemo)(function () {
273
301
  return document.getElementById('themeToggle');
@@ -703,6 +731,8 @@ var QbsTable = function QbsTable(_ref) {
703
731
  onReorder: onReorder,
704
732
  isOpen: isOpen,
705
733
  tableHeight: height,
734
+ viewMode: viewMode,
735
+ setViewMode: setViewMode,
706
736
  setIsOpen: setIsOpen,
707
737
  handleResetColumns: handleResetColumns,
708
738
  handleColumnToggle: handleColumnToggle
@@ -719,6 +749,8 @@ var QbsTable = function QbsTable(_ref) {
719
749
  onToggle: handleToggle,
720
750
  tableHeight: height,
721
751
  onReorder: onReorder,
752
+ viewMode: viewMode,
753
+ setViewMode: setViewMode,
722
754
  isOpen: isOpen,
723
755
  setIsOpen: setIsOpen,
724
756
  handleResetColumns: handleResetColumns,
package/lib/qbsTable/Toolbar.js CHANGED
@@ -34,7 +34,15 @@ var ToolBar = function ToolBar(_ref) {
34
34
  tableViewToggle = _ref.tableViewToggle,
35
35
  setTableViewToggle = _ref.setTableViewToggle,
36
36
  _ref$enableTableToggl = _ref.enableTableToggle,
37
- enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl;
37
+ enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
38
+ _ref$rowViewToggle = _ref.rowViewToggle,
39
+ rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
40
+ _ref$defaultRowView = _ref.defaultRowView,
41
+ defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
42
+ _ref$fullWidthView = _ref.fullWidthView,
43
+ fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
44
+ setTableFullView = _ref.setTableFullView,
45
+ setRowViewToggle = _ref.setRowViewToggle;
38
46
  var debouncedOnSearch = (0, _react.useCallback)((0, _debounce["default"])(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
39
47
  var _useState = (0, _react.useState)(searchValue),
40
48
  searchParam = _useState[0],
@@ -104,8 +112,41 @@ var ToolBar = function ToolBar(_ref) {
104
112
  strokeLinejoin: "round",
105
113
  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"
106
114
  }))), tableHeaderActions, /*#__PURE__*/_react["default"].createElement("div", {
107
- className: " pr-1 cursor-pointer relative "
108
- }, enableTableToggle && !isMobile && /*#__PURE__*/_react["default"].createElement("div", {
115
+ className: " pr-1 cursor-pointer relative table_custom_ctions "
116
+ }, rowViewToggle && /*#__PURE__*/_react["default"].createElement("div", {
117
+ className: "flex gap-2 qbs-row-switch-cntainer"
118
+ }, /*#__PURE__*/_react["default"].createElement("div", {
119
+ className: "flex gap-2 table_cell_style"
120
+ }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
121
+ tableBodyRef: toolbarRef,
122
+ title: 'Switch to Default View'
123
+ }, /*#__PURE__*/_react["default"].createElement("div", {
124
+ onClick: function onClick() {
125
+ return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
126
+ }
127
+ }, /*#__PURE__*/_react["default"].createElement(_icons.DefaultView, {
128
+ className: "" + (defaultRowView ? 'active' : '')
129
+ }))), /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
130
+ tableBodyRef: toolbarRef,
131
+ title: 'Switch to Compact View'
132
+ }, /*#__PURE__*/_react["default"].createElement("div", {
133
+ onClick: function onClick() {
134
+ return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
135
+ }
136
+ }, /*#__PURE__*/_react["default"].createElement(_icons.ContentView, {
137
+ className: "" + (!defaultRowView ? 'active' : '')
138
+ })))), /*#__PURE__*/_react["default"].createElement("div", {
139
+ className: " table_full_width"
140
+ }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
141
+ tableBodyRef: toolbarRef,
142
+ title: 'Switch to Full Screen'
143
+ }, /*#__PURE__*/_react["default"].createElement("div", {
144
+ onClick: function onClick() {
145
+ return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
146
+ }
147
+ }, /*#__PURE__*/_react["default"].createElement(_icons.ExpandIcon, {
148
+ className: "" + (fullWidthView ? 'active' : '')
149
+ }))))), enableTableToggle && !isMobile && /*#__PURE__*/_react["default"].createElement("div", {
109
150
  className: "qbs-table-top-icons flex gap-2"
110
151
  }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
111
152
  tableBodyRef: toolbarRef,
package/lib/qbsTable/commontypes.d.ts CHANGED
@@ -131,6 +131,12 @@ export interface QbsTableProps {
131
131
  loadMoreData?: () => void;
132
132
  infiniteScroll?: boolean;
133
133
  infiniteLoading?: boolean;
134
+ viewMode?: string;
135
+ rowViewToggle?: boolean;
136
+ defaultRowView?: boolean;
137
+ fullWidthView?: boolean;
138
+ setTableFullView?: (value: boolean) => void;
139
+ setRowViewToggle?: (value: boolean) => void;
134
140
  }
135
141
  export interface QbsTableToolbarProps {
136
142
  title?: string;
@@ -166,5 +172,10 @@ export interface QbsTableToolbarProps {
166
172
  hidden?: boolean;
167
173
  customHide?: string;
168
174
  }[];
175
+ rowViewToggle?: boolean;
176
+ defaultRowView?: boolean;
177
+ fullWidthView?: boolean;
178
+ setTableFullView?: (value: boolean) => void;
179
+ setRowViewToggle?: (value: boolean) => void;
169
180
  }
170
181
  export {};
package/lib/qbsTable/utilities/ColumShowHide.d.ts CHANGED
@@ -9,6 +9,8 @@ interface ColumnToggleProps {
9
9
  handleColumnToggle?: (columns: QbsColumnProps[]) => void;
10
10
  handleResetColumns?: () => void;
11
11
  tableHeight?: number;
12
+ viewMode?: string;
13
+ setViewMode?: (value: string) => void;
12
14
  }
13
15
  declare const ColumnToggle: React.FC<ColumnToggleProps>;
14
16
  export default ColumnToggle;
package/lib/qbsTable/utilities/empty.js CHANGED
@@ -75,7 +75,7 @@ var NoData = function NoData(_ref) {
75
75
  }), /*#__PURE__*/_react["default"].createElement("path", {
76
76
  fill: "#797979",
77
77
  d: "M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
78
- })), " ", ' '), /*#__PURE__*/_react["default"].createElement("p", {
78
+ })), ' '), /*#__PURE__*/_react["default"].createElement("p", {
79
79
  className: "text-center text-common font-bold text-blackAlt nodata-title"
80
80
  }, title), /*#__PURE__*/_react["default"].createElement("span", {
81
81
  className: "text-xxs font-medium text-grey-medium nodata-sub-title"
package/lib/qbsTable/utilities/icons.d.ts CHANGED
@@ -6,3 +6,6 @@ export declare const TableIcon: React.FC<any>;
6
6
  export declare const CardIcon: React.FC<any>;
7
7
  export declare const CardView: React.FC<any>;
8
8
  export declare const TableView: React.FC<any>;
9
+ export declare const ExpandIcon: React.FC<any>;
10
+ export declare const ContentView: React.FC<any>;
11
+ export declare const DefaultView: React.FC<any>;
package/lib/qbsTable/utilities/icons.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
  exports.__esModule = true;
5
- exports.ThreeDotIcon = exports.TableView = exports.TableIcon = exports.SettingsIcon = exports.CardView = exports.CardIcon = exports.ArrowUpIcon = void 0;
5
+ exports.ThreeDotIcon = exports.TableView = exports.TableIcon = exports.SettingsIcon = exports.ExpandIcon = exports.DefaultView = exports.ContentView = exports.CardView = exports.CardIcon = exports.ArrowUpIcon = void 0;
6
6
  var _react = _interopRequireDefault(require("react"));
7
7
  var ThreeDotIcon = function ThreeDotIcon() {
8
8
  return /*#__PURE__*/_react["default"].createElement("svg", {
@@ -137,4 +137,71 @@ var TableView = function TableView(_ref5) {
137
137
  strokeWidth: "1.5"
138
138
  }));
139
139
  };
140
- exports.TableView = TableView;
140
+ exports.TableView = TableView;
141
+ var ExpandIcon = function ExpandIcon(_ref6) {
142
+ var className = _ref6.className;
143
+ return /*#__PURE__*/_react["default"].createElement("svg", {
144
+ width: "16",
145
+ height: "16",
146
+ className: className,
147
+ viewBox: "0 0 16 16",
148
+ fill: "none",
149
+ xmlns: "http://www.w3.org/2000/svg"
150
+ }, /*#__PURE__*/_react["default"].createElement("path", {
151
+ d: "M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668",
152
+ stroke: "#585858",
153
+ strokeWidth: "1.5",
154
+ strokeLinecap: "round",
155
+ strokeLinejoin: "round"
156
+ }));
157
+ };
158
+ exports.ExpandIcon = ExpandIcon;
159
+ var ContentView = function ContentView(_ref7) {
160
+ var className = _ref7.className;
161
+ return /*#__PURE__*/_react["default"].createElement("svg", {
162
+ width: "16",
163
+ height: "17",
164
+ className: className,
165
+ viewBox: "0 0 16 17",
166
+ fill: "none",
167
+ xmlns: "http://www.w3.org/2000/svg"
168
+ }, /*#__PURE__*/_react["default"].createElement("path", {
169
+ d: "M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z",
170
+ stroke: "#585858",
171
+ strokeLinecap: "round",
172
+ strokeLinejoin: "round"
173
+ }), /*#__PURE__*/_react["default"].createElement("path", {
174
+ d: "M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z",
175
+ stroke: "#585858",
176
+ strokeLinecap: "round",
177
+ strokeLinejoin: "round"
178
+ }));
179
+ };
180
+ exports.ContentView = ContentView;
181
+ var DefaultView = function DefaultView(_ref8) {
182
+ var className = _ref8.className;
183
+ return /*#__PURE__*/_react["default"].createElement("svg", {
184
+ width: "16",
185
+ height: "17",
186
+ className: className,
187
+ viewBox: "0 0 16 17",
188
+ fill: "none",
189
+ xmlns: "http://www.w3.org/2000/svg"
190
+ }, /*#__PURE__*/_react["default"].createElement("path", {
191
+ fillRule: "evenodd",
192
+ clipRule: "evenodd",
193
+ d: "M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z",
194
+ fill: "#585858"
195
+ }), /*#__PURE__*/_react["default"].createElement("path", {
196
+ fillRule: "evenodd",
197
+ clipRule: "evenodd",
198
+ d: "M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z",
199
+ fill: "#585858"
200
+ }), /*#__PURE__*/_react["default"].createElement("path", {
201
+ fillRule: "evenodd",
202
+ clipRule: "evenodd",
203
+ d: "M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z",
204
+ fill: "#585858"
205
+ }));
206
+ };
207
+ exports.DefaultView = DefaultView;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qbs-react-grid",
3
- "version": "2.0.3",
3
+ "version": "2.0.5",
4
4
  "description": "A React table component",
5
5
  "main": "lib/index.js",
6
6
  "typings": "lib/index.d.ts",
package/src/customSelect.tsx CHANGED
@@ -1,88 +1,88 @@
1
- import React, { FC, useState, useEffect, useRef } from 'react';
2
-
3
- type CustomSelectProps = {
4
- options: number[];
5
- selectedValue: number;
6
- onChange: (value: number) => void;
7
- };
8
-
9
- const CustomSelect: FC<CustomSelectProps> = ({ options, selectedValue, onChange }) => {
10
- const [isOpen, setIsOpen] = useState(false);
11
- const [dropdownPosition, setDropdownPosition] = useState('bottom');
12
- const ref = useRef<HTMLDivElement>(null);
13
- const inputRef = useRef<HTMLDivElement>(null);
14
-
15
- const adjustDropdownPosition = () => {
16
- if (inputRef.current) {
17
- const inputBoxRect = inputRef.current.getBoundingClientRect();
18
- const viewportHeight = window.innerHeight;
19
-
20
- const spaceAbove = inputBoxRect.top;
21
- const spaceBelow = viewportHeight - inputBoxRect.bottom;
22
-
23
- if (spaceAbove > spaceBelow) {
24
- setDropdownPosition('top');
25
- } else {
26
- setDropdownPosition('bottom');
27
- }
28
- }
29
- };
30
-
31
- const handleToggle = () => {
32
- setIsOpen(prevIsOpen => !prevIsOpen);
33
- };
34
-
35
- const handleSelect = (value: number) => {
36
- onChange(value);
37
- setIsOpen(false);
38
- };
39
-
40
- const handleClickOutside = (event: MouseEvent) => {
41
- if (ref.current && !ref.current.contains(event.target as Node)) {
42
- setIsOpen(false);
43
- }
44
- };
45
-
46
- useEffect(() => {
47
- if (isOpen) {
48
- adjustDropdownPosition();
49
- window.addEventListener('resize', adjustDropdownPosition);
50
- } else {
51
- window.removeEventListener('resize', adjustDropdownPosition);
52
- }
53
-
54
- return () => {
55
- window.removeEventListener('resize', adjustDropdownPosition);
56
- };
57
- }, [isOpen]);
58
-
59
- useEffect(() => {
60
- document.addEventListener('mousedown', handleClickOutside);
61
- return () => {
62
- document.removeEventListener('mousedown', handleClickOutside);
63
- };
64
- }, []);
65
-
66
- return (
67
- <div className="custom-select" ref={ref}>
68
- <div className="custom-select-trigger" onClick={handleToggle} ref={inputRef}>
69
- {selectedValue}
70
- </div>
71
- {isOpen && (
72
- <ul className={`custom-select-options ${dropdownPosition}`}>
73
- {options.map(option => (
74
- <li
75
- key={option}
76
- className={`custom-select-option ${option === selectedValue ? 'selected' : ''}`}
77
- onClick={() => handleSelect(option)}
78
- >
79
- {option}
80
- </li>
81
- ))}
82
- </ul>
83
- )}
84
- </div>
85
- );
86
- };
87
-
88
- export default CustomSelect;
1
+ import React, { FC, useState, useEffect, useRef } from 'react';
2
+
3
+ type CustomSelectProps = {
4
+ options: number[];
5
+ selectedValue: number;
6
+ onChange: (value: number) => void;
7
+ };
8
+
9
+ const CustomSelect: FC<CustomSelectProps> = ({ options, selectedValue, onChange }) => {
10
+ const [isOpen, setIsOpen] = useState(false);
11
+ const [dropdownPosition, setDropdownPosition] = useState('bottom');
12
+ const ref = useRef<HTMLDivElement>(null);
13
+ const inputRef = useRef<HTMLDivElement>(null);
14
+
15
+ const adjustDropdownPosition = () => {
16
+ if (inputRef.current) {
17
+ const inputBoxRect = inputRef.current.getBoundingClientRect();
18
+ const viewportHeight = window.innerHeight;
19
+
20
+ const spaceAbove = inputBoxRect.top;
21
+ const spaceBelow = viewportHeight - inputBoxRect.bottom;
22
+
23
+ if (spaceAbove > spaceBelow) {
24
+ setDropdownPosition('top');
25
+ } else {
26
+ setDropdownPosition('bottom');
27
+ }
28
+ }
29
+ };
30
+
31
+ const handleToggle = () => {
32
+ setIsOpen(prevIsOpen => !prevIsOpen);
33
+ };
34
+
35
+ const handleSelect = (value: number) => {
36
+ onChange(value);
37
+ setIsOpen(false);
38
+ };
39
+
40
+ const handleClickOutside = (event: MouseEvent) => {
41
+ if (ref.current && !ref.current.contains(event.target as Node)) {
42
+ setIsOpen(false);
43
+ }
44
+ };
45
+
46
+ useEffect(() => {
47
+ if (isOpen) {
48
+ adjustDropdownPosition();
49
+ window.addEventListener('resize', adjustDropdownPosition);
50
+ } else {
51
+ window.removeEventListener('resize', adjustDropdownPosition);
52
+ }
53
+
54
+ return () => {
55
+ window.removeEventListener('resize', adjustDropdownPosition);
56
+ };
57
+ }, [isOpen]);
58
+
59
+ useEffect(() => {
60
+ document.addEventListener('mousedown', handleClickOutside);
61
+ return () => {
62
+ document.removeEventListener('mousedown', handleClickOutside);
63
+ };
64
+ }, []);
65
+
66
+ return (
67
+ <div className="custom-select" ref={ref}>
68
+ <div className="custom-select-trigger" onClick={handleToggle} ref={inputRef}>
69
+ {selectedValue}
70
+ </div>
71
+ {isOpen && (
72
+ <ul className={`custom-select-options ${dropdownPosition}`}>
73
+ {options.map(option => (
74
+ <li
75
+ key={option}
76
+ className={`custom-select-option ${option === selectedValue ? 'selected' : ''}`}
77
+ onClick={() => handleSelect(option)}
78
+ >
79
+ {option}
80
+ </li>
81
+ ))}
82
+ </ul>
83
+ )}
84
+ </div>
85
+ );
86
+ };
87
+
88
+ export default CustomSelect;
package/src/qbsTable/QbsTable.tsx CHANGED
@@ -52,7 +52,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
52
52
  minHeight,
53
53
  height = 630,
54
54
  onExpandChange,
55
- wordWrap,
55
+ wordWrap: propsWordWrap,
56
56
  dataRowKey = 'id',
57
57
  defaultExpandAllRows,
58
58
  handleRowExpanded,
@@ -87,7 +87,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
87
87
  emptySubTitle,
88
88
  emptyTitle,
89
89
  tableView = true,
90
- enableTableToggle = false,
90
+ enableTableToggle = true,
91
91
  cardColumLimit = 5,
92
92
  childDetailHeading = '',
93
93
  isCustomTableCardView = false,
@@ -96,7 +96,13 @@ const QbsTable: React.FC<QbsTableProps> = ({
96
96
  hasMoreData,
97
97
  loadMoreData,
98
98
  infiniteLoading,
99
- infiniteScroll = false
99
+ infiniteScroll = false,
100
+ viewMode: propsViewMode,
101
+ rowViewToggle = true,
102
+ defaultRowView = true,
103
+ fullWidthView = false,
104
+ setTableFullView,
105
+ setRowViewToggle
100
106
  }) => {
101
107
  const [loading, setLoading] = useState(false);
102
108
  const [columns, setColumns] = useState(propColumn);
@@ -108,7 +114,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
108
114
  const isMobile = useResponsiveStore();
109
115
  const tableBodyRef = useRef<HTMLDivElement>(null);
110
116
  const wheelWrapperRef = useRef<HTMLDivElement>(null);
111
-
117
+ const [viewMode, setViewMode] = useState(propsViewMode ?? 'expanded');
118
+ const [wordWrap, setWordWrap] = useState(propsWordWrap ?? false);
112
119
  const handleSortColumn = useCallback(
113
120
  (sortColumn: any, sortType: any) => {
114
121
  setLoading(true);
@@ -212,6 +219,14 @@ const QbsTable: React.FC<QbsTableProps> = ({
212
219
  );
213
220
  }
214
221
  }, [wordWrap]);
222
+ useEffect(() => {
223
+ if (!defaultRowView) {
224
+ setWordWrap('break-word');
225
+ } else {
226
+ setWordWrap(false);
227
+ }
228
+ REFRESH_KEY = REFRESH_KEY + 1;
229
+ }, [defaultRowView]);
215
230
 
216
231
  const onReorder = useCallback((columns: QbsColumnProps[]) => {
217
232
  setColumns(columns);
@@ -219,7 +234,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
219
234
 
220
235
  // useEffect(() => {
221
236
  // }, [columns]);
222
-
237
+ console.log(viewMode);
223
238
  const handleClear = ([]) => {
224
239
  setCheckedKeys([]);
225
240
  handleChecked([]);
@@ -249,7 +264,12 @@ const QbsTable: React.FC<QbsTableProps> = ({
249
264
  searchPlaceholder: searchPlaceholder,
250
265
  setTableViewToggle: setTableViewToggle,
251
266
  tableViewToggle: tableViewToggle,
252
- enableTableToggle: enableTableToggle
267
+ enableTableToggle: enableTableToggle,
268
+ rowViewToggle: rowViewToggle,
269
+ defaultRowView: defaultRowView,
270
+ fullWidthView: fullWidthView,
271
+ setTableFullView: setTableFullView,
272
+ setRowViewToggle: setRowViewToggle
253
273
  };
254
274
  const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
255
275
 
@@ -733,6 +753,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
733
753
  onReorder={onReorder}
734
754
  isOpen={isOpen}
735
755
  tableHeight={height}
756
+ viewMode={viewMode}
757
+ setViewMode={setViewMode}
736
758
  setIsOpen={setIsOpen}
737
759
  handleResetColumns={handleResetColumns}
738
760
  handleColumnToggle={handleColumnToggle}
@@ -757,6 +779,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
757
779
  onToggle={handleToggle}
758
780
  tableHeight={height}
759
781
  onReorder={onReorder}
782
+ viewMode={viewMode}
783
+ setViewMode={setViewMode}
760
784
  isOpen={isOpen}
761
785
  setIsOpen={setIsOpen}
762
786
  handleResetColumns={handleResetColumns}
package/src/qbsTable/Toolbar.tsx CHANGED
@@ -3,7 +3,7 @@ import React, { useCallback, useRef, useState } from 'react';
3
3
  import useResponsiveStore from '../utils/useResponsiveStore';
4
4
  import { QbsTableToolbarProps } from './commontypes';
5
5
  import debounce from './utilities/debounce';
6
- import { CardView, TableView } from './utilities/icons';
6
+ import { CardView, ContentView, DefaultView, ExpandIcon, TableView } from './utilities/icons';
7
7
  import SearchInput from './utilities/SearchInput';
8
8
  import { getRowDisplayRange } from './utilities/tablecalc';
9
9
  import TooltipComponent from './utilities/ToolTip';
@@ -27,7 +27,12 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
27
27
  searchPlaceholder,
28
28
  tableViewToggle,
29
29
  setTableViewToggle,
30
- enableTableToggle = false
30
+ enableTableToggle = false,
31
+ rowViewToggle = false,
32
+ defaultRowView = true,
33
+ fullWidthView = false,
34
+ setTableFullView,
35
+ setRowViewToggle
31
36
  }) => {
32
37
  const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
33
38
  const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
@@ -103,7 +108,31 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
103
108
  </span>
104
109
  )}
105
110
  {tableHeaderActions}
106
- <div className=" pr-1 cursor-pointer relative ">
111
+ <div className=" pr-1 cursor-pointer relative table_custom_ctions ">
112
+ {rowViewToggle && (
113
+ <div className="flex gap-2 qbs-row-switch-cntainer">
114
+ <div className="flex gap-2 table_cell_style">
115
+ <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Default View'}>
116
+ <div onClick={() => setRowViewToggle?.(true)}>
117
+ <DefaultView className={`${defaultRowView ? 'active' : ''}`} />
118
+ </div>
119
+ </TooltipComponent>
120
+ <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Compact View'}>
121
+ <div onClick={() => setRowViewToggle?.(false)}>
122
+ <ContentView className={`${!defaultRowView ? 'active' : ''}`} />
123
+ </div>
124
+ </TooltipComponent>
125
+ </div>
126
+ <div className=" table_full_width">
127
+ <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Full Screen'}>
128
+ <div onClick={() => setTableFullView?.(!fullWidthView)}>
129
+ <ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
130
+ </div>
131
+ </TooltipComponent>
132
+ </div>
133
+ </div>
134
+ )}
135
+
107
136
  {enableTableToggle && !isMobile && (
108
137
  <div className="qbs-table-top-icons flex gap-2">
109
138
  <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Table View'}>
package/src/qbsTable/commontypes.ts CHANGED
@@ -130,10 +130,16 @@ export interface QbsTableProps {
130
130
  handleTableCardView?: (data: any) => React.ReactNode;
131
131
  isCustomTableCardView?: boolean;
132
132
  handleCustomCardLoader?: () => React.ReactNode;
133
- hasMoreData?: boolean
134
- loadMoreData?: ()=> void
135
- infiniteScroll?: boolean
136
- infiniteLoading?:boolean
133
+ hasMoreData?: boolean;
134
+ loadMoreData?: () => void;
135
+ infiniteScroll?: boolean;
136
+ infiniteLoading?: boolean;
137
+ viewMode?: string;
138
+ rowViewToggle?: boolean;
139
+ defaultRowView?: boolean;
140
+ fullWidthView?: boolean;
141
+ setTableFullView?: (value: boolean) => void;
142
+ setRowViewToggle?: (value: boolean) => void;
137
143
  }
138
144
 
139
145
  export interface QbsTableToolbarProps {
@@ -170,4 +176,9 @@ export interface QbsTableToolbarProps {
170
176
  hidden?: boolean;
171
177
  customHide?: string;
172
178
  }[];
179
+ rowViewToggle?: boolean;
180
+ defaultRowView?: boolean;
181
+ fullWidthView?: boolean;
182
+ setTableFullView?: (value: boolean) => void;
183
+ setRowViewToggle?: (value: boolean) => void;
173
184
  }
package/src/qbsTable/utilities/ColumShowHide.tsx CHANGED
@@ -12,6 +12,8 @@ interface ColumnToggleProps {
12
12
  handleColumnToggle?: (columns: QbsColumnProps[]) => void;
13
13
  handleResetColumns?: () => void;
14
14
  tableHeight?: number;
15
+ viewMode?: string;
16
+ setViewMode?: (value: string) => void;
15
17
  }
16
18
 
17
19
  const ColumnToggle: React.FC<ColumnToggleProps> = ({
@@ -239,6 +241,27 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
239
241
  </div>
240
242
  </>
241
243
  )}
244
+ {/* <div className="qbs-table-popup-item">
245
+ <label className="flex items-center gap-2">
246
+ <input
247
+ type="radio"
248
+ value="compact"
249
+ checked={viewMode === 'compact'}
250
+ onChange={() => setViewMode?.('compact')}
251
+ />
252
+ Compact View
253
+ </label>
254
+
255
+ <label className="flex items-center gap-2">
256
+ <input
257
+ type="radio"
258
+ value="expanded"
259
+ checked={viewMode === 'expanded'}
260
+ onChange={() => setViewMode?.('expanded')}
261
+ />
262
+ Default View
263
+ </label>
264
+ </div> */}
242
265
  </div>
243
266
  </div>
244
267
  )}
package/src/qbsTable/utilities/empty.tsx CHANGED
@@ -18,7 +18,7 @@ const NoData: React.FC<props> = ({ title, subtitle }) => {
18
18
  }}
19
19
  >
20
20
  <div style={{ width: 145, marginBottom: 20 }} className="nodata-img">
21
- <svg
21
+ <svg
22
22
  xmlns="http://www.w3.org/2000/svg"
23
23
  width="148"
24
24
  height="132"
@@ -71,7 +71,7 @@ const NoData: React.FC<props> = ({ title, subtitle }) => {
71
71
  fill="#797979"
72
72
  d="M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
73
73
  ></path>
74
- </svg> {' '}
74
+ </svg>{' '}
75
75
  </div>
76
76
  <p className="text-center text-common font-bold text-blackAlt nodata-title">{title}</p>
77
77
  <span className="text-xxs font-medium text-grey-medium nodata-sub-title">{subtitle}</span>
package/src/qbsTable/utilities/icons.tsx CHANGED
@@ -134,3 +134,80 @@ export const TableView: React.FC<any> = ({ className }) => {
134
134
  </svg>
135
135
  );
136
136
  };
137
+
138
+ export const ExpandIcon: React.FC<any> = ({ className }) => {
139
+ return (
140
+ <svg
141
+ width="16"
142
+ height="16"
143
+ className={className}
144
+ viewBox="0 0 16 16"
145
+ fill="none"
146
+ xmlns="http://www.w3.org/2000/svg"
147
+ >
148
+ <path
149
+ d="M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668"
150
+ stroke="#585858"
151
+ strokeWidth="1.5"
152
+ strokeLinecap="round"
153
+ strokeLinejoin="round"
154
+ />
155
+ </svg>
156
+ );
157
+ };
158
+ export const ContentView: React.FC<any> = ({ className }) => {
159
+ return (
160
+ <svg
161
+ width="16"
162
+ height="17"
163
+ className={className}
164
+ viewBox="0 0 16 17"
165
+ fill="none"
166
+ xmlns="http://www.w3.org/2000/svg"
167
+ >
168
+ <path
169
+ d="M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z"
170
+ stroke="#585858"
171
+ strokeLinecap="round"
172
+ strokeLinejoin="round"
173
+ />
174
+ <path
175
+ d="M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z"
176
+ stroke="#585858"
177
+ strokeLinecap="round"
178
+ strokeLinejoin="round"
179
+ />
180
+ </svg>
181
+ );
182
+ };
183
+ export const DefaultView: React.FC<any> = ({ className }) => {
184
+ return (
185
+ <svg
186
+ width="16"
187
+ height="17"
188
+ className={className}
189
+ viewBox="0 0 16 17"
190
+ fill="none"
191
+ xmlns="http://www.w3.org/2000/svg"
192
+ >
193
+ <path
194
+ fillRule="evenodd"
195
+ clipRule="evenodd"
196
+ d="M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z"
197
+ fill="#585858"
198
+ />
199
+ <path
200
+ fillRule="evenodd"
201
+ clipRule="evenodd"
202
+ d="M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z"
203
+ fill="#585858"
204
+ />
205
+ <path
206
+ fillRule="evenodd"
207
+ clipRule="evenodd"
208
+ d="M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z"
209
+ fill="#585858"
210
+ />
211
+ </svg>
212
+ );
213
+ };
package/src/utils/useTableRows.ts CHANGED
@@ -8,7 +8,7 @@ import defer from './defer';
8
8
 
9
9
  interface TableRowsProps<Row, Key> {
10
10
  prefix: (str: string) => string;
11
- wordWrap?: boolean | 'break-all' | 'break-word' | 'keep-all'| 'fit-content';
11
+ wordWrap?: boolean | 'break-all' | 'break-word' | 'keep-all' | 'fit-content';
12
12
  data: readonly Row[];
13
13
  expandedRowKeys: readonly Key[];
14
14
  }