qbs-react-grid 1.1.5 → 1.1.6
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.
- package/es/HeaderCell.js +1 -1
- package/es/qbsTable/QbsTable.js +10 -1
- package/lib/HeaderCell.js +1 -1
- package/lib/qbsTable/QbsTable.js +10 -1
- package/package.json +1 -1
- package/src/HeaderCell.tsx +1 -1
- package/src/qbsTable/QbsTable.tsx +17 -4
package/es/HeaderCell.js
CHANGED
|
@@ -106,7 +106,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
106
106
|
headerHeight: headerHeight,
|
|
107
107
|
isHeaderCell: true,
|
|
108
108
|
align: !groupHeader ? align : undefined,
|
|
109
|
-
verticalAlign: !groupHeader ?
|
|
109
|
+
verticalAlign: !groupHeader ? verticalAlign : undefined,
|
|
110
110
|
onClick: !groupHeader ? handleClick : undefined
|
|
111
111
|
}), children, renderSortColumn()), resizable ? /*#__PURE__*/React.createElement(ColumnResizeHandler, {
|
|
112
112
|
defaultColumnWidth: columnWidth,
|
package/es/qbsTable/QbsTable.js
CHANGED
|
@@ -271,6 +271,11 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
271
271
|
}
|
|
272
272
|
prevColumns.current = columns;
|
|
273
273
|
}, [columns, handleColumnsResizable]);
|
|
274
|
+
var findGrouped = function findGrouped() {
|
|
275
|
+
return columns !== null && columns !== void 0 && columns.find(function (item) {
|
|
276
|
+
return item.grouped;
|
|
277
|
+
}) ? true : false;
|
|
278
|
+
};
|
|
274
279
|
var columnsRendered = useMemo(function () {
|
|
275
280
|
return (columns != null ? columns : []).map(function (_ref3) {
|
|
276
281
|
var title = _ref3.title,
|
|
@@ -308,7 +313,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
308
313
|
fixed: child.fixed
|
|
309
314
|
}, /*#__PURE__*/React.createElement(HeaderCell, {
|
|
310
315
|
dataTheme: dataTheme,
|
|
311
|
-
verticalAlign:
|
|
316
|
+
verticalAlign: 'middle',
|
|
312
317
|
className: " " + classes.headerClass,
|
|
313
318
|
sortKey: child.sortKey
|
|
314
319
|
}, child.title), customCell || child.link ? /*#__PURE__*/React.createElement(CustomTableCell, {
|
|
@@ -332,6 +337,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
332
337
|
onResize: handleColumnWidth
|
|
333
338
|
}, /*#__PURE__*/React.createElement(HeaderCell, {
|
|
334
339
|
dataTheme: dataTheme,
|
|
340
|
+
verticalAlign: findGrouped() ? 'middle' : undefined,
|
|
335
341
|
className: " " + classes.headerClass,
|
|
336
342
|
sortKey: sortKey
|
|
337
343
|
}, title), customCell || link ? /*#__PURE__*/React.createElement(CustomTableCell, {
|
|
@@ -383,6 +389,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
383
389
|
align: "center",
|
|
384
390
|
fixed: "left"
|
|
385
391
|
}, /*#__PURE__*/React.createElement(HeaderCell, {
|
|
392
|
+
verticalAlign: findGrouped() ? 'middle' : undefined,
|
|
386
393
|
className: " " + classes.headerlClass
|
|
387
394
|
}, "#"), /*#__PURE__*/React.createElement(ExpandCell, {
|
|
388
395
|
dataKey: dataRowKey,
|
|
@@ -396,6 +403,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
396
403
|
style: {
|
|
397
404
|
padding: 0
|
|
398
405
|
},
|
|
406
|
+
verticalAlign: findGrouped() ? 'middle' : undefined,
|
|
399
407
|
dataTheme: dataTheme,
|
|
400
408
|
className: "qbs-checkbox-border-none " + classes.headerlClass
|
|
401
409
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -432,6 +440,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
432
440
|
width: 40,
|
|
433
441
|
fixed: "right"
|
|
434
442
|
}, /*#__PURE__*/React.createElement(HeaderCell, {
|
|
443
|
+
verticalAlign: findGrouped() ? 'middle' : undefined,
|
|
435
444
|
className: " " + classes.headerlClass,
|
|
436
445
|
dataTheme: dataTheme
|
|
437
446
|
}, !columnToggle ? /*#__PURE__*/React.createElement(SettingsIcon, null) : /*#__PURE__*/React.createElement(ColumToggle, {
|
package/lib/HeaderCell.js
CHANGED
|
@@ -113,7 +113,7 @@ var HeaderCell = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
|
|
|
113
113
|
headerHeight: headerHeight,
|
|
114
114
|
isHeaderCell: true,
|
|
115
115
|
align: !groupHeader ? align : undefined,
|
|
116
|
-
verticalAlign: !groupHeader ?
|
|
116
|
+
verticalAlign: !groupHeader ? verticalAlign : undefined,
|
|
117
117
|
onClick: !groupHeader ? handleClick : undefined
|
|
118
118
|
}), children, renderSortColumn()), resizable ? /*#__PURE__*/_react["default"].createElement(_ColumnResizeHandler["default"], {
|
|
119
119
|
defaultColumnWidth: columnWidth,
|
package/lib/qbsTable/QbsTable.js
CHANGED
|
@@ -278,6 +278,11 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
278
278
|
}
|
|
279
279
|
prevColumns.current = columns;
|
|
280
280
|
}, [columns, handleColumnsResizable]);
|
|
281
|
+
var findGrouped = function findGrouped() {
|
|
282
|
+
return columns !== null && columns !== void 0 && columns.find(function (item) {
|
|
283
|
+
return item.grouped;
|
|
284
|
+
}) ? true : false;
|
|
285
|
+
};
|
|
281
286
|
var columnsRendered = (0, _react.useMemo)(function () {
|
|
282
287
|
return (columns != null ? columns : []).map(function (_ref3) {
|
|
283
288
|
var title = _ref3.title,
|
|
@@ -315,7 +320,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
315
320
|
fixed: child.fixed
|
|
316
321
|
}, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
|
|
317
322
|
dataTheme: dataTheme,
|
|
318
|
-
verticalAlign:
|
|
323
|
+
verticalAlign: 'middle',
|
|
319
324
|
className: " " + classes.headerClass,
|
|
320
325
|
sortKey: child.sortKey
|
|
321
326
|
}, child.title), customCell || child.link ? /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomTableCell, {
|
|
@@ -339,6 +344,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
339
344
|
onResize: handleColumnWidth
|
|
340
345
|
}, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
|
|
341
346
|
dataTheme: dataTheme,
|
|
347
|
+
verticalAlign: findGrouped() ? 'middle' : undefined,
|
|
342
348
|
className: " " + classes.headerClass,
|
|
343
349
|
sortKey: sortKey
|
|
344
350
|
}, title), customCell || link ? /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomTableCell, {
|
|
@@ -390,6 +396,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
390
396
|
align: "center",
|
|
391
397
|
fixed: "left"
|
|
392
398
|
}, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
|
|
399
|
+
verticalAlign: findGrouped() ? 'middle' : undefined,
|
|
393
400
|
className: " " + classes.headerlClass
|
|
394
401
|
}, "#"), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ExpandCell, {
|
|
395
402
|
dataKey: dataRowKey,
|
|
@@ -403,6 +410,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
403
410
|
style: {
|
|
404
411
|
padding: 0
|
|
405
412
|
},
|
|
413
|
+
verticalAlign: findGrouped() ? 'middle' : undefined,
|
|
406
414
|
dataTheme: dataTheme,
|
|
407
415
|
className: "qbs-checkbox-border-none " + classes.headerlClass
|
|
408
416
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -439,6 +447,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
439
447
|
width: 40,
|
|
440
448
|
fixed: "right"
|
|
441
449
|
}, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
|
|
450
|
+
verticalAlign: findGrouped() ? 'middle' : undefined,
|
|
442
451
|
className: " " + classes.headerlClass,
|
|
443
452
|
dataTheme: dataTheme
|
|
444
453
|
}, !columnToggle ? /*#__PURE__*/_react["default"].createElement(_icons.SettingsIcon, null) : /*#__PURE__*/_react["default"].createElement(_ColumShowHide["default"], {
|
package/package.json
CHANGED
package/src/HeaderCell.tsx
CHANGED
|
@@ -144,7 +144,7 @@ const HeaderCell = React.forwardRef((props: HeaderCellProps, ref: React.Ref<HTML
|
|
|
144
144
|
headerHeight={headerHeight}
|
|
145
145
|
isHeaderCell={true}
|
|
146
146
|
align={!groupHeader ? align : undefined}
|
|
147
|
-
verticalAlign={!groupHeader ?
|
|
147
|
+
verticalAlign={!groupHeader ? verticalAlign : undefined}
|
|
148
148
|
onClick={!groupHeader ? handleClick : undefined}
|
|
149
149
|
>
|
|
150
150
|
{children}
|
|
@@ -259,7 +259,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
259
259
|
}
|
|
260
260
|
prevColumns.current = columns;
|
|
261
261
|
}, [columns, handleColumnsResizable]);
|
|
262
|
-
|
|
262
|
+
const findGrouped = () => {
|
|
263
|
+
return columns?.find(item => item.grouped) ? true : false;
|
|
264
|
+
};
|
|
263
265
|
const columnsRendered: React.ReactElement[] = useMemo(
|
|
264
266
|
() =>
|
|
265
267
|
(columns ?? []).map(
|
|
@@ -306,7 +308,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
306
308
|
>
|
|
307
309
|
<HeaderCell
|
|
308
310
|
dataTheme={dataTheme}
|
|
309
|
-
verticalAlign=
|
|
311
|
+
verticalAlign={'middle'}
|
|
310
312
|
className={` ${classes.headerClass}`}
|
|
311
313
|
sortKey={child.sortKey}
|
|
312
314
|
>
|
|
@@ -343,6 +345,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
343
345
|
>
|
|
344
346
|
<HeaderCell
|
|
345
347
|
dataTheme={dataTheme}
|
|
348
|
+
verticalAlign={findGrouped() ? 'middle' : undefined}
|
|
346
349
|
className={` ${classes.headerClass}`}
|
|
347
350
|
sortKey={sortKey}
|
|
348
351
|
>
|
|
@@ -405,7 +408,12 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
405
408
|
>
|
|
406
409
|
{rowExpand && (
|
|
407
410
|
<Column width={70} align="center" fixed="left">
|
|
408
|
-
<HeaderCell
|
|
411
|
+
<HeaderCell
|
|
412
|
+
verticalAlign={findGrouped() ? 'middle' : undefined}
|
|
413
|
+
className={` ${classes.headerlClass}`}
|
|
414
|
+
>
|
|
415
|
+
#
|
|
416
|
+
</HeaderCell>
|
|
409
417
|
<ExpandCell
|
|
410
418
|
dataKey={dataRowKey}
|
|
411
419
|
expandedRowKeys={expandedRowKeys}
|
|
@@ -417,6 +425,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
417
425
|
<Column width={50} align="center" fixed="left">
|
|
418
426
|
<HeaderCell
|
|
419
427
|
style={{ padding: 0 }}
|
|
428
|
+
verticalAlign={findGrouped() ? 'middle' : undefined}
|
|
420
429
|
dataTheme={dataTheme}
|
|
421
430
|
className={`qbs-checkbox-border-none ${classes.headerlClass}`}
|
|
422
431
|
>
|
|
@@ -460,7 +469,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
460
469
|
|
|
461
470
|
{actionProps && actionProps?.length > 0 && (
|
|
462
471
|
<Column width={40} fixed="right">
|
|
463
|
-
<HeaderCell
|
|
472
|
+
<HeaderCell
|
|
473
|
+
verticalAlign={findGrouped() ? 'middle' : undefined}
|
|
474
|
+
className={` ${classes.headerlClass}`}
|
|
475
|
+
dataTheme={dataTheme}
|
|
476
|
+
>
|
|
464
477
|
{!columnToggle ? (
|
|
465
478
|
<SettingsIcon />
|
|
466
479
|
) : (
|