es-grid-template 1.9.45 → 1.9.47

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 (20) hide show
  1. package/es/grid-component/type.d.ts +2 -0
  2. package/es/group-component/hook/utils.d.ts +3 -3
  3. package/es/table-component/TableContainer.js +3 -3
  4. package/es/table-component/TableContainerEdit.js +1 -1
  5. package/es/table-component/body/EditableCell.js +16 -14
  6. package/es/table-component/body/TableBodyCell.js +5 -3
  7. package/es/table-component/header/TableHeadCell2.js +3 -1
  8. package/es/table-component/header/TableHeadGroupCell.js +3 -1
  9. package/es/table-virtuoso/body/TableBodyCell.js +5 -3
  10. package/es/table-virtuoso/header/TableHeadCell.js +4 -0
  11. package/lib/grid-component/type.d.ts +2 -0
  12. package/lib/table-component/TableContainer.js +3 -3
  13. package/lib/table-component/TableContainerEdit.js +1 -1
  14. package/lib/table-component/body/EditableCell.js +16 -14
  15. package/lib/table-component/body/TableBodyCell.js +5 -3
  16. package/lib/table-component/header/TableHeadCell2.js +3 -1
  17. package/lib/table-component/header/TableHeadGroupCell.js +3 -1
  18. package/lib/table-virtuoso/body/TableBodyCell.js +5 -3
  19. package/lib/table-virtuoso/header/TableHeadCell.js +4 -0
  20. package/package.json +1 -1
package/es/grid-component/type.d.ts CHANGED
@@ -356,6 +356,8 @@ export type TableProps<RecordType = AnyObject> = {
356
356
  locale?: Locale;
357
357
  /** Cấu hình wrap text */
358
358
  wrapSettings?: IWrapSettings;
359
+ /** Hiển thị grid line */
360
+ gridLines?: "Both" | "Horizontal" | "Vertical" | "None";
359
361
  /** Bật chế độ tải dữ liệu vô hạn */
360
362
  infiniteScroll?: boolean;
361
363
  /** Hàm gọi khi cuộn đến cuối */
package/es/group-component/hook/utils.d.ts CHANGED
@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
194
194
  value: any;
195
195
  rowData: RecordType;
196
196
  }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
197
- onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
198
- onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
197
+ onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
198
+ onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
199
199
  onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
200
- onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
200
+ onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
201
201
  getValue?: (row: any, rowIndex: number) => any;
202
202
  getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
203
203
  headerCellProps?: import("./../../grid-component/type").CellProps;
package/es/table-component/TableContainer.js CHANGED
@@ -239,7 +239,7 @@ const TableContainer = props => {
239
239
  alignItems: 'center',
240
240
  gap: '1rem'
241
241
  }
242
- }, /*#__PURE__*/React.createElement("div", {
242
+ }, toolbarItemTop && toolbarItemTop?.length > 0 && /*#__PURE__*/React.createElement("div", {
243
243
  style: {
244
244
  flex: 1,
245
245
  overflow: 'hidden'
@@ -264,7 +264,7 @@ const TableContainer = props => {
264
264
  showTotal: (totalItems, range) =>
265
265
  // @ts-ignore
266
266
  `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
267
- }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
267
+ }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && toolbarItemTopRight.length > 0 && /*#__PURE__*/React.createElement("div", {
268
268
  style: {
269
269
  flex: 1,
270
270
  overflow: 'hidden'
@@ -367,7 +367,7 @@ const TableContainer = props => {
367
367
  fixedRightColumns: fixedRightColumns
368
368
  }))), /*#__PURE__*/React.createElement("div", {
369
369
  ref: bottomToolbarRef
370
- }, /*#__PURE__*/React.createElement("div", {
370
+ }, toolbarItemBottom && toolbarItemBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
371
371
  style: {
372
372
  flex: 1,
373
373
  overflow: 'hidden'
package/es/table-component/TableContainerEdit.js CHANGED
@@ -2041,7 +2041,7 @@ const TableContainerEdit = props => {
2041
2041
  alignItems: 'center',
2042
2042
  gap: '1rem'
2043
2043
  }
2044
- }, /*#__PURE__*/React.createElement("div", {
2044
+ }, toolbarItemsTop && toolbarItemsTop.length > 0 && /*#__PURE__*/React.createElement("div", {
2045
2045
  style: {
2046
2046
  flex: 1,
2047
2047
  overflow: 'hidden'
package/es/table-component/body/EditableCell.js CHANGED
@@ -308,17 +308,14 @@ const EditableCell = props => {
308
308
 
309
309
  // chỉ nhận giá trị dạng HH:mm | mm:HH => convert
310
310
 
311
- let time = value ?? null;
311
+ let time = value ?? undefined;
312
312
  const typeTime = getDateValueType(value);
313
313
  if (typeTime === 'time') {
314
- time = value ? dayjs(value, timeFormat) : null;
314
+ time = value ? dayjs(value, timeFormat) : undefined;
315
315
  } else {
316
- const abc = moment(value).format(timeFormat);
317
- time = abc ? dayjs(abc, timeFormat) : null;
316
+ const abc = value ? moment(value).format(timeFormat) : undefined;
317
+ time = abc ? dayjs(abc, timeFormat) : undefined;
318
318
  }
319
-
320
- // time = value ? dayjs(value, timeFormat) : null
321
-
322
319
  const maxTimeValue = !isEmpty(column.maxTime) ? dayjs(column.maxTime).format(timeFormat) : null;
323
320
  const minTimeValue = !isEmpty(column.minTime) ? dayjs(column.minTime).format(timeFormat) : null;
324
321
 
@@ -354,15 +351,11 @@ const EditableCell = props => {
354
351
  } else {
355
352
  // const datetime = dayjs(dateString as string, timeFormat, true);
356
353
 
357
- const newVal = moment(newDate.toDate()).format();
354
+ const newVal = newDate ? moment(newDate.toDate()).format() : undefined;
358
355
 
359
356
  // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
360
-
361
357
  onChange(newVal);
362
358
  }
363
-
364
- // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
365
-
366
359
  onChange(dateString);
367
360
  setTimeout(() => {
368
361
  // @ts-ignore
@@ -375,14 +368,23 @@ const EditableCell = props => {
375
368
  // @ts-ignore
376
369
  const prevState = record[dataIndex];
377
370
  const newState = itemState;
371
+ let newValue = newState;
372
+ if (typeTime === 'time') {
373
+ newValue = newState;
374
+ } else {
375
+ const datetime = dayjs(newState, timeFormat, true);
376
+ const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : undefined;
377
+ onChange(newVal);
378
+ newValue = newVal;
379
+ }
378
380
  if (prevState !== newState) {
379
381
  handleCellChange?.({
380
382
  key: key,
381
383
  field: column.field ?? column.field,
382
384
  record: formState,
383
385
  prevState,
384
- newState,
385
- option: newState,
386
+ newState: newValue,
387
+ option: newValue,
386
388
  indexCol,
387
389
  indexRow,
388
390
  type: 'blur'
package/es/table-component/body/TableBodyCell.js CHANGED
@@ -182,8 +182,12 @@ const TableBodyCell = props => {
182
182
  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
183
183
  const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
184
184
  const record = cell.row.original;
185
+ const allRows = table.getRowModel().flatRows;
186
+ const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
185
187
  const columnMeta = React.useMemo(() => cell.column.columnDef.meta ?? {}, [cell.column.columnDef.meta]);
186
- const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
188
+ const cellStyles1 = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
189
+ const cellStyles2 = typeof columnMeta.getCellProps === 'function' ? columnMeta.getCellProps(cell.getValue(), record, rowNumber).style : undefined;
190
+ const cellStyles = cellStyles2 ?? cellStyles1;
187
191
 
188
192
  // const tooltipContent: any = (isOpenTooltip === false)
189
193
  // ? ''
@@ -191,8 +195,6 @@ const TableBodyCell = props => {
191
195
  // ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
192
196
  // : cell.getValue()
193
197
 
194
- const allRows = table.getRowModel().flatRows;
195
- const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
196
198
  const colIndex = cell.column.getIndex();
197
199
  const isPinned = cell.column.getIsPinned();
198
200
  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
package/es/table-component/header/TableHeadCell2.js CHANGED
@@ -57,7 +57,9 @@ const TableHeadCell2 = props => {
57
57
  const originalColumn = column.columnDef.meta ?? {};
58
58
  const fieldOriginalKey = originalColumn?.fieldOriginal;
59
59
  const fieldOriginal = fieldOriginalKey ? visibleCols.find(it => it.id === fieldOriginalKey) : undefined;
60
- const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
60
+ const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
61
+ const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
62
+ const cellStyles = cellStyles2 ?? cellStyles1;
61
63
  const filtered = ((fieldOriginal ? fieldOriginal.getFilterValue() : column.getFilterValue()) ?? []).length > 0;
62
64
 
63
65
  // const cellContent = originalColumn.headerTemplate ? originalColumn.headerTemplate : (t ? t(originalColumn.headerText) : originalColumn.headerText)
package/es/table-component/header/TableHeadGroupCell.js CHANGED
@@ -24,7 +24,9 @@ const TableHeadGroupCell = props => {
24
24
  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
25
25
  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
26
26
  const originalColumn = column.columnDef.meta ?? {};
27
- const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
27
+ const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
28
+ const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
29
+ const cellStyles = cellStyles2 ?? cellStyles1;
28
30
 
29
31
  // const cellContent = originalColumn.headerTemplate ? originalColumn.headerTemplate : (t ? t(originalColumn.headerText) : originalColumn.headerText)
30
32
 
package/es/table-virtuoso/body/TableBodyCell.js CHANGED
@@ -170,13 +170,15 @@ const TableBodyCell = props => {
170
170
  const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
171
171
  const record = cell.row.original;
172
172
  const columnMeta = cell.column.columnDef.meta ?? {};
173
- const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
173
+ const allRows = table.getRowModel().flatRows;
174
+ const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
175
+ const cellStyles1 = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
176
+ const cellStyles2 = typeof columnMeta.getCellProps === 'function' ? columnMeta.getCellProps(cell.getValue(), record, rowNumber).style : undefined;
177
+ const cellStyles = cellStyles2 ?? cellStyles1;
174
178
  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
175
179
  value: cell.getValue(),
176
180
  rowData: record
177
181
  }) : columnMeta.tooltipDescription : cell.getValue();
178
- const allRows = table.getRowModel().flatRows;
179
- const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
180
182
  const colIndex = cell.column.getIndex();
181
183
  const isPinned = cell.column.getIsPinned();
182
184
  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
package/es/table-virtuoso/header/TableHeadCell.js CHANGED
@@ -52,7 +52,11 @@ const TableHeadCell = props => {
52
52
  React.useEffect(() => {
53
53
  setSelectedKeys(filterValue);
54
54
  }, []);
55
+ const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
56
+ const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
57
+ const cellStyles = cellStyles2 ?? cellStyles1;
55
58
  const style = {
59
+ ...cellStyles,
56
60
  transition: 'width transform 0.2s ease-in-out',
57
61
  whiteSpace: 'nowrap',
58
62
  borderTopWidth: rowIndex > 0 ? 0 : undefined
package/lib/grid-component/type.d.ts CHANGED
@@ -356,6 +356,8 @@ export type TableProps<RecordType = AnyObject> = {
356
356
  locale?: Locale;
357
357
  /** Cấu hình wrap text */
358
358
  wrapSettings?: IWrapSettings;
359
+ /** Hiển thị grid line */
360
+ gridLines?: "Both" | "Horizontal" | "Vertical" | "None";
359
361
  /** Bật chế độ tải dữ liệu vô hạn */
360
362
  infiniteScroll?: boolean;
361
363
  /** Hàm gọi khi cuộn đến cuối */
package/lib/table-component/TableContainer.js CHANGED
@@ -246,7 +246,7 @@ const TableContainer = props => {
246
246
  alignItems: 'center',
247
247
  gap: '1rem'
248
248
  }
249
- }, /*#__PURE__*/_react.default.createElement("div", {
249
+ }, toolbarItemTop && toolbarItemTop?.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
250
250
  style: {
251
251
  flex: 1,
252
252
  overflow: 'hidden'
@@ -271,7 +271,7 @@ const TableContainer = props => {
271
271
  showTotal: (totalItems, range) =>
272
272
  // @ts-ignore
273
273
  `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
274
- }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
274
+ }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && toolbarItemTopRight.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
275
275
  style: {
276
276
  flex: 1,
277
277
  overflow: 'hidden'
@@ -374,7 +374,7 @@ const TableContainer = props => {
374
374
  fixedRightColumns: fixedRightColumns
375
375
  }))), /*#__PURE__*/_react.default.createElement("div", {
376
376
  ref: bottomToolbarRef
377
- }, /*#__PURE__*/_react.default.createElement("div", {
377
+ }, toolbarItemBottom && toolbarItemBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
378
378
  style: {
379
379
  flex: 1,
380
380
  overflow: 'hidden'
package/lib/table-component/TableContainerEdit.js CHANGED
@@ -2042,7 +2042,7 @@ const TableContainerEdit = props => {
2042
2042
  alignItems: 'center',
2043
2043
  gap: '1rem'
2044
2044
  }
2045
- }, /*#__PURE__*/_react.default.createElement("div", {
2045
+ }, toolbarItemsTop && toolbarItemsTop.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
2046
2046
  style: {
2047
2047
  flex: 1,
2048
2048
  overflow: 'hidden'
package/lib/table-component/body/EditableCell.js CHANGED
@@ -316,17 +316,14 @@ const EditableCell = props => {
316
316
 
317
317
  // chỉ nhận giá trị dạng HH:mm | mm:HH => convert
318
318
 
319
- let time = value ?? null;
319
+ let time = value ?? undefined;
320
320
  const typeTime = (0, _utils.getDateValueType)(value);
321
321
  if (typeTime === 'time') {
322
- time = value ? (0, _dayjs.default)(value, timeFormat) : null;
322
+ time = value ? (0, _dayjs.default)(value, timeFormat) : undefined;
323
323
  } else {
324
- const abc = (0, _moment.default)(value).format(timeFormat);
325
- time = abc ? (0, _dayjs.default)(abc, timeFormat) : null;
324
+ const abc = value ? (0, _moment.default)(value).format(timeFormat) : undefined;
325
+ time = abc ? (0, _dayjs.default)(abc, timeFormat) : undefined;
326
326
  }
327
-
328
- // time = value ? dayjs(value, timeFormat) : null
329
-
330
327
  const maxTimeValue = !(0, _utils.isEmpty)(column.maxTime) ? (0, _dayjs.default)(column.maxTime).format(timeFormat) : null;
331
328
  const minTimeValue = !(0, _utils.isEmpty)(column.minTime) ? (0, _dayjs.default)(column.minTime).format(timeFormat) : null;
332
329
 
@@ -362,15 +359,11 @@ const EditableCell = props => {
362
359
  } else {
363
360
  // const datetime = dayjs(dateString as string, timeFormat, true);
364
361
 
365
- const newVal = (0, _moment.default)(newDate.toDate()).format();
362
+ const newVal = newDate ? (0, _moment.default)(newDate.toDate()).format() : undefined;
366
363
 
367
364
  // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
368
-
369
365
  onChange(newVal);
370
366
  }
371
-
372
- // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
373
-
374
367
  onChange(dateString);
375
368
  setTimeout(() => {
376
369
  // @ts-ignore
@@ -383,14 +376,23 @@ const EditableCell = props => {
383
376
  // @ts-ignore
384
377
  const prevState = record[dataIndex];
385
378
  const newState = itemState;
379
+ let newValue = newState;
380
+ if (typeTime === 'time') {
381
+ newValue = newState;
382
+ } else {
383
+ const datetime = (0, _dayjs.default)(newState, timeFormat, true);
384
+ const newVal = datetime.isValid() ? (0, _moment.default)(datetime.toDate()).format() : undefined;
385
+ onChange(newVal);
386
+ newValue = newVal;
387
+ }
386
388
  if (prevState !== newState) {
387
389
  handleCellChange?.({
388
390
  key: key,
389
391
  field: column.field ?? column.field,
390
392
  record: formState,
391
393
  prevState,
392
- newState,
393
- option: newState,
394
+ newState: newValue,
395
+ option: newValue,
394
396
  indexCol,
395
397
  indexRow,
396
398
  type: 'blur'
package/lib/table-component/body/TableBodyCell.js CHANGED
@@ -189,8 +189,12 @@ const TableBodyCell = props => {
189
189
  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
190
190
  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
191
191
  const record = cell.row.original;
192
+ const allRows = table.getRowModel().flatRows;
193
+ const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
192
194
  const columnMeta = _react.default.useMemo(() => cell.column.columnDef.meta ?? {}, [cell.column.columnDef.meta]);
193
- const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
195
+ const cellStyles1 = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
196
+ const cellStyles2 = typeof columnMeta.getCellProps === 'function' ? columnMeta.getCellProps(cell.getValue(), record, rowNumber).style : undefined;
197
+ const cellStyles = cellStyles2 ?? cellStyles1;
194
198
 
195
199
  // const tooltipContent: any = (isOpenTooltip === false)
196
200
  // ? ''
@@ -198,8 +202,6 @@ const TableBodyCell = props => {
198
202
  // ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
199
203
  // : cell.getValue()
200
204
 
201
- const allRows = table.getRowModel().flatRows;
202
- const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
203
205
  const colIndex = cell.column.getIndex();
204
206
  const isPinned = cell.column.getIsPinned();
205
207
  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
package/lib/table-component/header/TableHeadCell2.js CHANGED
@@ -66,7 +66,9 @@ const TableHeadCell2 = props => {
66
66
  const originalColumn = column.columnDef.meta ?? {};
67
67
  const fieldOriginalKey = originalColumn?.fieldOriginal;
68
68
  const fieldOriginal = fieldOriginalKey ? visibleCols.find(it => it.id === fieldOriginalKey) : undefined;
69
- const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
69
+ const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
70
+ const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
71
+ const cellStyles = cellStyles2 ?? cellStyles1;
70
72
  const filtered = ((fieldOriginal ? fieldOriginal.getFilterValue() : column.getFilterValue()) ?? []).length > 0;
71
73
 
72
74
  // const cellContent = originalColumn.headerTemplate ? originalColumn.headerTemplate : (t ? t(originalColumn.headerText) : originalColumn.headerText)
package/lib/table-component/header/TableHeadGroupCell.js CHANGED
@@ -33,7 +33,9 @@ const TableHeadGroupCell = props => {
33
33
  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
34
34
  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
35
35
  const originalColumn = column.columnDef.meta ?? {};
36
- const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
36
+ const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
37
+ const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
38
+ const cellStyles = cellStyles2 ?? cellStyles1;
37
39
 
38
40
  // const cellContent = originalColumn.headerTemplate ? originalColumn.headerTemplate : (t ? t(originalColumn.headerText) : originalColumn.headerText)
39
41
 
package/lib/table-virtuoso/body/TableBodyCell.js CHANGED
@@ -177,13 +177,15 @@ const TableBodyCell = props => {
177
177
  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
178
178
  const record = cell.row.original;
179
179
  const columnMeta = cell.column.columnDef.meta ?? {};
180
- const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
180
+ const allRows = table.getRowModel().flatRows;
181
+ const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
182
+ const cellStyles1 = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
183
+ const cellStyles2 = typeof columnMeta.getCellProps === 'function' ? columnMeta.getCellProps(cell.getValue(), record, rowNumber).style : undefined;
184
+ const cellStyles = cellStyles2 ?? cellStyles1;
181
185
  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
182
186
  value: cell.getValue(),
183
187
  rowData: record
184
188
  }) : columnMeta.tooltipDescription : cell.getValue();
185
- const allRows = table.getRowModel().flatRows;
186
- const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
187
189
  const colIndex = cell.column.getIndex();
188
190
  const isPinned = cell.column.getIsPinned();
189
191
  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
package/lib/table-virtuoso/header/TableHeadCell.js CHANGED
@@ -61,7 +61,11 @@ const TableHeadCell = props => {
61
61
  _react.default.useEffect(() => {
62
62
  setSelectedKeys(filterValue);
63
63
  }, []);
64
+ const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
65
+ const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
66
+ const cellStyles = cellStyles2 ?? cellStyles1;
64
67
  const style = {
68
+ ...cellStyles,
65
69
  transition: 'width transform 0.2s ease-in-out',
66
70
  whiteSpace: 'nowrap',
67
71
  borderTopWidth: rowIndex > 0 ? 0 : undefined
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "es-grid-template",
3
- "version": "1.9.45",
3
+ "version": "1.9.47",
4
4
  "description": "es-grid-template",
5
5
  "keywords": [
6
6
  "react",