es-grid-template 1.8.22 → 1.8.24

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 (15) hide show
  1. package/es/table-component/TableContainer.js +3 -1
  2. package/es/table-component/body/TableBodyCell.js +1 -36
  3. package/es/table-component/header/TableHeadCell2.js +1 -1
  4. package/es/table-component/hook/useColumns.js +1 -1
  5. package/es/table-component/style.scss +2 -1
  6. package/es/table-component/table/Grid.js +1 -1
  7. package/es/table-component/type.d.ts +1 -1
  8. package/lib/table-component/TableContainer.js +3 -1
  9. package/lib/table-component/body/TableBodyCell.js +1 -36
  10. package/lib/table-component/header/TableHeadCell2.js +1 -1
  11. package/lib/table-component/hook/useColumns.js +1 -1
  12. package/lib/table-component/style.scss +2 -1
  13. package/lib/table-component/table/Grid.js +1 -1
  14. package/lib/table-component/type.d.ts +1 -1
  15. package/package.json +1 -1
package/es/table-component/TableContainer.js CHANGED
@@ -106,7 +106,7 @@ const TableContainer = props => {
106
106
  // },
107
107
 
108
108
  measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
109
- overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
109
+ overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
110
110
  });
111
111
  const virtualColumns = columnVirtualizer.getVirtualItems();
112
112
  const cacheColumns = columnVirtualizer.measurementsCache;
@@ -148,6 +148,8 @@ const TableContainer = props => {
148
148
  // }
149
149
 
150
150
  if (columnSizingInfo.isResizingColumn === false) {
151
+ // khi resize end
152
+
151
153
  const aa = updateColumnWidthsRecursive(propsColumns, columnSizing);
152
154
  setColumns(aa);
153
155
 
package/es/table-component/body/TableBodyCell.js CHANGED
@@ -414,41 +414,6 @@ const TableBodyCell = props => {
414
414
  });
415
415
  }
416
416
  }
417
- }, /*#__PURE__*/React.createElement("div", {
418
- className: classNames('ui-rc_cell-content', {})
419
- }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
420
- className: "ui-rc-table-row-expand-trigger",
421
- style: {
422
- paddingLeft: `${cell.row.depth * 25}px`
423
- }
424
- }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
425
- // onClick: row.getToggleExpandedHandler(),
426
- onClick: () => {
427
- const keys = Object.keys(expanded);
428
- // @ts-ignore
429
- const tmp = {
430
- ...expanded
431
- };
432
- if (keys.includes(cell.row.id)) {
433
- delete tmp[cell.row.id];
434
- setExpanded(tmp);
435
- } else {
436
- setExpanded(old => ({
437
- ...old,
438
- [cell.row.id]: true
439
- }));
440
- }
441
- },
442
- style: {
443
- cursor: "pointer"
444
- },
445
- className: "ui-rc-table-row-expand"
446
- }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
447
- className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
448
- }) : /*#__PURE__*/React.createElement("span", {
449
- className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
450
- })) : /*#__PURE__*/React.createElement("span", {
451
- className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
452
- }))), flexRender(cell.column.columnDef.cell, cell.getContext())));
417
+ }, flexRender(cell.column.columnDef.cell, cell.getContext()));
453
418
  };
454
419
  export default TableBodyCell;
package/es/table-component/header/TableHeadCell2.js CHANGED
@@ -249,7 +249,7 @@ const TableHeadCell2 = props => {
249
249
  [`${prefix}-grid-filter-column`]: column.id !== 'selection_column',
250
250
  [`${prefix}-grid-selection-column`]: column.id === 'selection_column'
251
251
  })
252
- }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== false && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
252
+ }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/React.createElement(Checkbox, {
253
253
  checked: table.getIsAllRowsSelected(),
254
254
  indeterminate: table.getIsSomeRowsSelected(),
255
255
  onChange: e => {
package/es/table-component/hook/useColumns.js CHANGED
@@ -144,7 +144,7 @@ export function convertToTanStackColumns({
144
144
  // enableResizing: true,
145
145
  id: field,
146
146
  size: width,
147
- accessorKey: field ?? '',
147
+ accessorKey: field,
148
148
  sortDescFirst: false,
149
149
  minSize: minWidth,
150
150
  // maxSize: maxWidth,
package/es/table-component/style.scss CHANGED
@@ -66,6 +66,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
66
66
 
67
67
  &.#{$prefix}-grid-cell-text-center {
68
68
  text-align: center;
69
+ justify-content: center;
69
70
 
70
71
  }
71
72
 
@@ -268,7 +269,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
268
269
 
269
270
  &:hover {
270
271
  .#{$prefix}-grid-cell:not(.editable) {
271
- background-color: $rowHoverBg;
272
+ // background-color: $rowHoverBg;
272
273
 
273
274
  &.cell-editable, &.#{$prefix}-grid-cell-index, &.#{$prefix}-grid-cell-selection {
274
275
  // background-color: transparent;
package/es/table-component/table/Grid.js CHANGED
@@ -146,7 +146,7 @@ const Grid = props => {
146
146
  const abb = table.getVisibleLeafColumns()?.[0];
147
147
  if (abb && Object.keys(columnSizingInfo).length === 0) {
148
148
  setColumnSizing({
149
- "#": abb.getSize()
149
+ [abb.id]: abb.getSize()
150
150
  });
151
151
  }
152
152
  }
package/es/table-component/type.d.ts CHANGED
@@ -81,7 +81,7 @@ export type ColumnTemplate<RecordType> = {
81
81
  field: string;
82
82
  };
83
83
  export type ColumnTable<RecordType = AnyObject> = {
84
- field?: string;
84
+ field: string;
85
85
  width?: number;
86
86
  maxWidth?: number;
87
87
  minWidth?: number;
package/lib/table-component/TableContainer.js CHANGED
@@ -116,7 +116,7 @@ const TableContainer = props => {
116
116
  // },
117
117
 
118
118
  measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
119
- overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
119
+ overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
120
120
  });
121
121
  const virtualColumns = columnVirtualizer.getVirtualItems();
122
122
  const cacheColumns = columnVirtualizer.measurementsCache;
@@ -158,6 +158,8 @@ const TableContainer = props => {
158
158
  // }
159
159
 
160
160
  if (columnSizingInfo.isResizingColumn === false) {
161
+ // khi resize end
162
+
161
163
  const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
162
164
  setColumns(aa);
163
165
 
package/lib/table-component/body/TableBodyCell.js CHANGED
@@ -421,41 +421,6 @@ const TableBodyCell = props => {
421
421
  });
422
422
  }
423
423
  }
424
- }, /*#__PURE__*/_react.default.createElement("div", {
425
- className: (0, _classnames.default)('ui-rc_cell-content', {})
426
- }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
427
- className: "ui-rc-table-row-expand-trigger",
428
- style: {
429
- paddingLeft: `${cell.row.depth * 25}px`
430
- }
431
- }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
432
- // onClick: row.getToggleExpandedHandler(),
433
- onClick: () => {
434
- const keys = Object.keys(expanded);
435
- // @ts-ignore
436
- const tmp = {
437
- ...expanded
438
- };
439
- if (keys.includes(cell.row.id)) {
440
- delete tmp[cell.row.id];
441
- setExpanded(tmp);
442
- } else {
443
- setExpanded(old => ({
444
- ...old,
445
- [cell.row.id]: true
446
- }));
447
- }
448
- },
449
- style: {
450
- cursor: "pointer"
451
- },
452
- className: "ui-rc-table-row-expand"
453
- }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
454
- className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
455
- }) : /*#__PURE__*/_react.default.createElement("span", {
456
- className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
457
- })) : /*#__PURE__*/_react.default.createElement("span", {
458
- className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
459
- }))), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
424
+ }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
460
425
  };
461
426
  var _default = exports.default = TableBodyCell;
package/lib/table-component/header/TableHeadCell2.js CHANGED
@@ -258,7 +258,7 @@ const TableHeadCell2 = props => {
258
258
  [`${prefix}-grid-filter-column`]: column.id !== 'selection_column',
259
259
  [`${prefix}-grid-selection-column`]: column.id === 'selection_column'
260
260
  })
261
- }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== false && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
261
+ }, column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
262
262
  checked: table.getIsAllRowsSelected(),
263
263
  indeterminate: table.getIsSomeRowsSelected(),
264
264
  onChange: e => {
package/lib/table-component/hook/useColumns.js CHANGED
@@ -155,7 +155,7 @@ function convertToTanStackColumns({
155
155
  // enableResizing: true,
156
156
  id: field,
157
157
  size: width,
158
- accessorKey: field ?? '',
158
+ accessorKey: field,
159
159
  sortDescFirst: false,
160
160
  minSize: minWidth,
161
161
  // maxSize: maxWidth,
package/lib/table-component/style.scss CHANGED
@@ -66,6 +66,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
66
66
 
67
67
  &.#{$prefix}-grid-cell-text-center {
68
68
  text-align: center;
69
+ justify-content: center;
69
70
 
70
71
  }
71
72
 
@@ -268,7 +269,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
268
269
 
269
270
  &:hover {
270
271
  .#{$prefix}-grid-cell:not(.editable) {
271
- background-color: $rowHoverBg;
272
+ // background-color: $rowHoverBg;
272
273
 
273
274
  &.cell-editable, &.#{$prefix}-grid-cell-index, &.#{$prefix}-grid-cell-selection {
274
275
  // background-color: transparent;
package/lib/table-component/table/Grid.js CHANGED
@@ -148,7 +148,7 @@ const Grid = props => {
148
148
  const abb = table.getVisibleLeafColumns()?.[0];
149
149
  if (abb && Object.keys(columnSizingInfo).length === 0) {
150
150
  setColumnSizing({
151
- "#": abb.getSize()
151
+ [abb.id]: abb.getSize()
152
152
  });
153
153
  }
154
154
  }
package/lib/table-component/type.d.ts CHANGED
@@ -81,7 +81,7 @@ export type ColumnTemplate<RecordType> = {
81
81
  field: string;
82
82
  };
83
83
  export type ColumnTable<RecordType = AnyObject> = {
84
- field?: string;
84
+ field: string;
85
85
  width?: number;
86
86
  maxWidth?: number;
87
87
  minWidth?: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "es-grid-template",
3
- "version": "1.8.22",
3
+ "version": "1.8.24",
4
4
  "description": "es-grid-template",
5
5
  "keywords": [
6
6
  "react",