es-grid-template 1.9.46 → 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 +6 -6
  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 +6 -6
  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, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position">);
198
- onCellHeaderStyles?: Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "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, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "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,13 +308,13 @@ 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
319
  const maxTimeValue = !isEmpty(column.maxTime) ? dayjs(column.maxTime).format(timeFormat) : null;
320
320
  const minTimeValue = !isEmpty(column.minTime) ? dayjs(column.minTime).format(timeFormat) : null;
@@ -351,7 +351,7 @@ const EditableCell = props => {
351
351
  } else {
352
352
  // const datetime = dayjs(dateString as string, timeFormat, true);
353
353
 
354
- const newVal = moment(newDate.toDate()).format();
354
+ const newVal = newDate ? moment(newDate.toDate()).format() : undefined;
355
355
 
356
356
  // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
357
357
  onChange(newVal);
@@ -373,7 +373,7 @@ const EditableCell = props => {
373
373
  newValue = newState;
374
374
  } else {
375
375
  const datetime = dayjs(newState, timeFormat, true);
376
- const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : '';
376
+ const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : undefined;
377
377
  onChange(newVal);
378
378
  newValue = newVal;
379
379
  }
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,13 +316,13 @@ 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
327
  const maxTimeValue = !(0, _utils.isEmpty)(column.maxTime) ? (0, _dayjs.default)(column.maxTime).format(timeFormat) : null;
328
328
  const minTimeValue = !(0, _utils.isEmpty)(column.minTime) ? (0, _dayjs.default)(column.minTime).format(timeFormat) : null;
@@ -359,7 +359,7 @@ const EditableCell = props => {
359
359
  } else {
360
360
  // const datetime = dayjs(dateString as string, timeFormat, true);
361
361
 
362
- const newVal = (0, _moment.default)(newDate.toDate()).format();
362
+ const newVal = newDate ? (0, _moment.default)(newDate.toDate()).format() : undefined;
363
363
 
364
364
  // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
365
365
  onChange(newVal);
@@ -381,7 +381,7 @@ const EditableCell = props => {
381
381
  newValue = newState;
382
382
  } else {
383
383
  const datetime = (0, _dayjs.default)(newState, timeFormat, true);
384
- const newVal = datetime.isValid() ? (0, _moment.default)(datetime.toDate()).format() : '';
384
+ const newVal = datetime.isValid() ? (0, _moment.default)(datetime.toDate()).format() : undefined;
385
385
  onChange(newVal);
386
386
  newValue = newVal;
387
387
  }
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.46",
3
+ "version": "1.9.47",
4
4
  "description": "es-grid-template",
5
5
  "keywords": [
6
6
  "react",