react-table-edit 0.1.6 → 0.1.8

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 (5) hide show
  1. package/dist/index.d.mts +10 -5
  2. package/dist/index.d.ts +10 -5
  3. package/dist/index.js +151 -99
  4. package/dist/index.mjs +151 -99
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -47,7 +47,6 @@ type IColumnTable = {
47
47
  isPrimarykey?: boolean;
48
48
  isUnikey?: boolean;
49
49
  haveSum?: boolean;
50
- fixedType?: 'left' | 'right' | undefined;
51
50
  validate?: any;
52
51
  disabledCondition?: any;
53
52
  callback?: any;
@@ -57,8 +56,9 @@ type IColumnTable = {
57
56
  editEnable?: boolean;
58
57
  visible?: boolean;
59
58
  invisibleDisable?: boolean;
60
- textAlign?: ITextAlign;
61
59
  editType?: IEditType;
60
+ textAlign?: ITextAlign;
61
+ fixedType?: 'left' | 'right' | undefined;
62
62
  template?: any;
63
63
  commandItems?: ICommandItem[];
64
64
  editTypeCondition?: any;
@@ -66,6 +66,11 @@ type IColumnTable = {
66
66
  numericSettings?: ISettingNumericElement;
67
67
  selectSettings?: ISettingSelectElement;
68
68
  formSettings?: ISettingFormElement;
69
+ columns?: IColumnTable[];
70
+ };
71
+ type IFToolbarOptions = {
72
+ align: 'left' | 'right' | 'center';
73
+ template: any;
69
74
  };
70
75
  type IFTableEditProps = {
71
76
  dataSource: any[];
@@ -74,8 +79,8 @@ type IFTableEditProps = {
74
79
  showTopToolbar?: boolean;
75
80
  showBottomToolbar?: boolean;
76
81
  defaultValue?: any;
77
- toolbarOptions?: any[];
78
- toolbarBottomOptions?: any[];
82
+ toolbarOptions?: IFToolbarOptions[];
83
+ toolbarBottomOptions?: IFToolbarOptions[];
79
84
  columns: IColumnTable[];
80
85
  setDataSource?: any;
81
86
  commandClick?: any;
@@ -146,4 +151,4 @@ declare const notificationError: (param: string) => string;
146
151
  declare const notificationSuccess: (param: string) => string;
147
152
  declare const messageBoxConfirm2: (t: TFunction<"translation", undefined>, data: any, data2: any, message: string) => Promise<boolean>;
148
153
 
149
- export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditProps, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess };
154
+ export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditProps, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess };
package/dist/index.d.ts CHANGED
@@ -47,7 +47,6 @@ type IColumnTable = {
47
47
  isPrimarykey?: boolean;
48
48
  isUnikey?: boolean;
49
49
  haveSum?: boolean;
50
- fixedType?: 'left' | 'right' | undefined;
51
50
  validate?: any;
52
51
  disabledCondition?: any;
53
52
  callback?: any;
@@ -57,8 +56,9 @@ type IColumnTable = {
57
56
  editEnable?: boolean;
58
57
  visible?: boolean;
59
58
  invisibleDisable?: boolean;
60
- textAlign?: ITextAlign;
61
59
  editType?: IEditType;
60
+ textAlign?: ITextAlign;
61
+ fixedType?: 'left' | 'right' | undefined;
62
62
  template?: any;
63
63
  commandItems?: ICommandItem[];
64
64
  editTypeCondition?: any;
@@ -66,6 +66,11 @@ type IColumnTable = {
66
66
  numericSettings?: ISettingNumericElement;
67
67
  selectSettings?: ISettingSelectElement;
68
68
  formSettings?: ISettingFormElement;
69
+ columns?: IColumnTable[];
70
+ };
71
+ type IFToolbarOptions = {
72
+ align: 'left' | 'right' | 'center';
73
+ template: any;
69
74
  };
70
75
  type IFTableEditProps = {
71
76
  dataSource: any[];
@@ -74,8 +79,8 @@ type IFTableEditProps = {
74
79
  showTopToolbar?: boolean;
75
80
  showBottomToolbar?: boolean;
76
81
  defaultValue?: any;
77
- toolbarOptions?: any[];
78
- toolbarBottomOptions?: any[];
82
+ toolbarOptions?: IFToolbarOptions[];
83
+ toolbarBottomOptions?: IFToolbarOptions[];
79
84
  columns: IColumnTable[];
80
85
  setDataSource?: any;
81
86
  commandClick?: any;
@@ -146,4 +151,4 @@ declare const notificationError: (param: string) => string;
146
151
  declare const notificationSuccess: (param: string) => string;
147
152
  declare const messageBoxConfirm2: (t: TFunction<"translation", undefined>, data: any, data2: any, message: string) => Promise<boolean>;
148
153
 
149
- export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditProps, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess };
154
+ export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditProps, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess };
package/dist/index.js CHANGED
@@ -1428,7 +1428,9 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1428
1428
  const [refreshRow, setRefreshRow] = (0, import_react12.useState)(false);
1429
1429
  const [indexFocus, setIndexFocus] = (0, import_react12.useState)();
1430
1430
  const [selectedRows, setSelectedRows] = (0, import_react12.useState)([]);
1431
- const [tableColumns, setTableColumns] = (0, import_react12.useState)([]);
1431
+ const [headerColumns, setHeaderColumns] = (0, import_react12.useState)([[]]);
1432
+ const [contentColumns, setContentColumns] = (0, import_react12.useState)([]);
1433
+ const [levelCol, setLevelCol] = (0, import_react12.useState)(0);
1432
1434
  const [columnFistEdit, setColumnFistEdit] = (0, import_react12.useState)(0);
1433
1435
  const [columnLastEdit, setColumnlastEdit] = (0, import_react12.useState)(0);
1434
1436
  const [objWidthFix, setObjWidthFix] = (0, import_react12.useState)({});
@@ -1445,14 +1447,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1445
1447
  let indexlast = -1;
1446
1448
  let letfWidthFix = 0;
1447
1449
  let rightWidthFix = 0;
1448
- tableColumns.forEach((item, index) => {
1450
+ contentColumns.forEach((item, index) => {
1449
1451
  if (item.fixedType === "left" && item.visible !== false) {
1450
1452
  objWidthFix[index] = letfWidthFix;
1451
1453
  letfWidthFix += Number(item.minWidth ? item.minWidth : item.field === "#" ? 40 : item.width ? item.width : 0);
1452
1454
  }
1453
- if (tableColumns[tableColumns.length - 1 - index].fixedType === "right" && tableColumns[tableColumns.length - 1 - index].visible !== false) {
1454
- objWidthFix[tableColumns.length - 1 - index] = rightWidthFix;
1455
- rightWidthFix += Number(tableColumns[tableColumns.length - 1 - index].minWidth ? tableColumns[tableColumns.length - 1 - index].minWidth : tableColumns[tableColumns.length - 1 - index].field === "#" ? 40 : tableColumns[tableColumns.length - 1 - index].width ? tableColumns[tableColumns.length - 1 - index].width : 0);
1455
+ if (contentColumns[contentColumns.length - 1 - index].fixedType === "right" && contentColumns[contentColumns.length - 1 - index].visible !== false) {
1456
+ objWidthFix[contentColumns.length - 1 - index] = rightWidthFix;
1457
+ rightWidthFix += Number(contentColumns[contentColumns.length - 1 - index].minWidth ? contentColumns[contentColumns.length - 1 - index].minWidth : contentColumns[contentColumns.length - 1 - index].field === "#" ? 40 : contentColumns[contentColumns.length - 1 - index].width ? contentColumns[contentColumns.length - 1 - index].width : 0);
1456
1458
  }
1457
1459
  if (item.editEnable && item.visible !== false && !item.disabledCondition) {
1458
1460
  if (indexFirst === -1) {
@@ -1464,12 +1466,51 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1464
1466
  setObjWidthFix(objWidthFix);
1465
1467
  setColumnFistEdit(indexFirst + 1);
1466
1468
  setColumnlastEdit(indexlast + 1);
1467
- }, [tableColumns]);
1469
+ }, [contentColumns]);
1468
1470
  (0, import_react12.useEffect)(() => {
1469
- setTableColumns(columns.map((item, index) => {
1470
- return { ...item, visible: item.invisibleDisable ? item.visible : tableColumns[index]?.visible ?? item.visible };
1471
- }));
1471
+ const arrHeaderColumns = [];
1472
+ const arrContentColumns = [];
1473
+ let headerLevelCol = 0;
1474
+ if (levelCol) {
1475
+ headerLevelCol = levelCol;
1476
+ } else {
1477
+ headerLevelCol = stretchColumn(columns, 0);
1478
+ setLevelCol(headerLevelCol);
1479
+ }
1480
+ for (let i = 0; i < headerLevelCol; i++) {
1481
+ arrHeaderColumns.push([]);
1482
+ }
1483
+ getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelCol);
1484
+ setHeaderColumns(arrHeaderColumns);
1485
+ setContentColumns(arrContentColumns);
1472
1486
  }, [columns]);
1487
+ const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevel) => {
1488
+ array.forEach((item, index) => {
1489
+ const ele = { ...item, visible: item.invisibleDisable ? item.visible : arrHeaderColumns[0][index]?.visible ?? item.visible, rowspan: 1, index: 0 };
1490
+ if (item.columns && item.columns?.length > 0) {
1491
+ const countLevel = getNestedChildren(item.columns, arrHeaderColumns, arrContentColumns, level + 1, maxLevel);
1492
+ arrHeaderColumns[maxLevel - 1 - countLevel].push(ele);
1493
+ } else {
1494
+ ele.rowspan = maxLevel - level;
1495
+ ele.index = arrContentColumns.length;
1496
+ arrHeaderColumns[level].push(ele);
1497
+ arrContentColumns.push(ele);
1498
+ }
1499
+ });
1500
+ return level;
1501
+ };
1502
+ const stretchColumn = (subColumns, headerLevelCol) => {
1503
+ let count = headerLevelCol + 1;
1504
+ subColumns.map((item) => {
1505
+ if (item.columns && item.columns.length > 0) {
1506
+ const newCount = stretchColumn(item.columns, headerLevelCol + 1);
1507
+ if (newCount > count) {
1508
+ count = newCount;
1509
+ }
1510
+ }
1511
+ });
1512
+ return count;
1513
+ };
1473
1514
  const handleRefeshRow = () => {
1474
1515
  setRefreshRow(true);
1475
1516
  setTimeout(() => {
@@ -1481,16 +1522,16 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1481
1522
  const rs = rowChange(row, indexRow, col.field);
1482
1523
  if (rs && rs?.then) {
1483
1524
  rs.then(() => {
1484
- for (let index = 0; index <= tableColumns.length; index++) {
1485
- if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
1525
+ for (let index = 0; index <= contentColumns.length; index++) {
1526
+ if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && contentColumns[index] && contentColumns[index].editEnable) {
1486
1527
  const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
1487
1528
  if (element) {
1488
1529
  if (element.className.includes("input-element")) {
1489
- element.value = row[tableColumns[index].field] ?? "";
1530
+ element.value = row[contentColumns[index].field] ?? "";
1490
1531
  } else if (element.className.includes("input-numeric")) {
1491
- element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
1532
+ element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
1492
1533
  } else if (element.className.includes("input-checkbox")) {
1493
- element.checked = row[tableColumns[index].field] ?? false;
1534
+ element.checked = row[contentColumns[index].field] ?? false;
1494
1535
  }
1495
1536
  }
1496
1537
  }
@@ -1501,16 +1542,16 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1501
1542
  }
1502
1543
  });
1503
1544
  } else {
1504
- for (let index = 0; index <= tableColumns.length; index++) {
1505
- if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
1545
+ for (let index = 0; index <= contentColumns.length; index++) {
1546
+ if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && contentColumns[index] && contentColumns[index].editEnable) {
1506
1547
  const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
1507
1548
  if (element) {
1508
1549
  if (element.className.includes("input-element")) {
1509
- element.value = row[tableColumns[index].field] ?? "";
1550
+ element.value = row[contentColumns[index].field] ?? "";
1510
1551
  } else if (element.className.includes("input-numeric")) {
1511
- element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
1552
+ element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
1512
1553
  } else if (element.className.includes("input-checkbox")) {
1513
- element.checked = row[tableColumns[index].field] ?? false;
1554
+ element.checked = row[contentColumns[index].field] ?? false;
1514
1555
  }
1515
1556
  }
1516
1557
  }
@@ -1973,8 +2014,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1973
2014
  const checkKeyDown = (e, row, col, indexRow, indexCol) => {
1974
2015
  if (e.code === "ArrowRight") {
1975
2016
  let newIndexCol = -1;
1976
- for (let i = indexCol; i < tableColumns.length; i++) {
1977
- if (tableColumns[i].editEnable && tableColumns[i].visible !== false && (!tableColumns[i].disabledCondition || !tableColumns[i].disabledCondition(row))) {
2017
+ for (let i = indexCol; i < contentColumns.length; i++) {
2018
+ if (contentColumns[i].editEnable && contentColumns[i].visible !== false && (!contentColumns[i].disabledCondition || !contentColumns[i].disabledCondition(row))) {
1978
2019
  newIndexCol = i + 1;
1979
2020
  break;
1980
2021
  }
@@ -1995,7 +2036,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1995
2036
  if (e.code === "ArrowLeft") {
1996
2037
  let newIndexCol = -1;
1997
2038
  for (let i = indexCol - 2; i >= 0; i--) {
1998
- if (tableColumns[i].editEnable && tableColumns[i].visible !== false && (!tableColumns[i].disabledCondition || !tableColumns[i].disabledCondition(row))) {
2039
+ if (contentColumns[i].editEnable && contentColumns[i].visible !== false && (!contentColumns[i].disabledCondition || !contentColumns[i].disabledCondition(row))) {
1999
2040
  newIndexCol = i + 1;
2000
2041
  break;
2001
2042
  }
@@ -2205,7 +2246,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2205
2246
  dataSource?.push(dataRow);
2206
2247
  }
2207
2248
  arrayCol.forEach((element, index) => {
2208
- const column = tableColumns[col + index];
2249
+ const column = contentColumns[col + index];
2209
2250
  if ((!column.disabledCondition || !column.disabledCondition(row)) && column.editEnable) {
2210
2251
  dataRow[column.field] = element;
2211
2252
  }
@@ -2271,19 +2312,16 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2271
2312
  "td",
2272
2313
  {
2273
2314
  className: (0, import_classnames9.default)(
2274
- `e-rowcell p-0 fix-${col.fixedType}`,
2315
+ `r-rowcell p-0 fix-${col.fixedType}`,
2275
2316
  { "cell-fixed": col.fixedType },
2276
- { "e-active": isSelected && editDisable || indexFocus === indexRow }
2317
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
2277
2318
  ),
2278
2319
  style: {
2279
- width: col.width,
2280
- minWidth: col.minWidth,
2281
- maxWidth: col.maxWidth,
2282
2320
  left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2283
2321
  right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2284
2322
  textAlign: col.textAlign ? col.textAlign : "left"
2285
2323
  },
2286
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
2324
+ children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
2287
2325
  },
2288
2326
  `col-${indexRow}-${indexCol}`
2289
2327
  );
@@ -2291,12 +2329,9 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2291
2329
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2292
2330
  "td",
2293
2331
  {
2294
- className: (0, import_classnames9.default)(`e-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
2332
+ className: (0, import_classnames9.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
2295
2333
  tabIndex: Number(`${indexRow}${indexCol}`),
2296
2334
  style: {
2297
- width: 40,
2298
- minWidth: 40,
2299
- maxWidth: 40,
2300
2335
  left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2301
2336
  right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2302
2337
  textAlign: "center"
@@ -2338,7 +2373,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2338
2373
  e.stopPropagation();
2339
2374
  }
2340
2375
  },
2341
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-rowcell-div pt-50", children: indexRow + 1 })
2376
+ children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
2342
2377
  },
2343
2378
  `col-${indexRow}-${indexCol}`
2344
2379
  );
@@ -2347,14 +2382,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2347
2382
  "td",
2348
2383
  {
2349
2384
  className: (0, import_classnames9.default)(
2350
- `e-rowcell p-0 fix-${col.fixedType}`,
2385
+ `r-rowcell p-0 fix-${col.fixedType}`,
2351
2386
  { "cell-fixed": col.fixedType },
2352
- { "e-active": isSelected && editDisable || indexFocus === indexRow }
2387
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
2353
2388
  ),
2354
2389
  style: {
2355
- width: col.width,
2356
- minWidth: col.minWidth,
2357
- maxWidth: col.maxWidth,
2358
2390
  left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2359
2391
  right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2360
2392
  textAlign: col.textAlign ? col.textAlign : "center"
@@ -2362,7 +2394,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2362
2394
  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2363
2395
  "div",
2364
2396
  {
2365
- className: "e-rowcell-div cursor-pointer",
2397
+ className: "r-rowcell-div cursor-pointer",
2366
2398
  onClick: (e) => {
2367
2399
  if (selectEnable) {
2368
2400
  const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
@@ -2414,9 +2446,9 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2414
2446
  "td",
2415
2447
  {
2416
2448
  className: (0, import_classnames9.default)(
2417
- `e-rowcell fix-${col.fixedType}`,
2449
+ `r-rowcell fix-${col.fixedType}`,
2418
2450
  { "cell-fixed": col.fixedType },
2419
- { "e-active": isSelected && editDisable || indexFocus === indexRow }
2451
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
2420
2452
  ),
2421
2453
  style: {
2422
2454
  left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
@@ -2456,45 +2488,53 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2456
2488
  }
2457
2489
  },
2458
2490
  title: `${value ?? ""}`,
2459
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
2491
+ children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-rowcell-div"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
2460
2492
  "div",
2461
2493
  {
2462
2494
  id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
2463
- className: (0, import_classnames9.default)("e-rowcell-div", { "is-invalid": errorMessage }),
2464
- style: { padding: typeDis !== 1 ? errorMessage ? "2px 10px" : "6px 10px" : 2 },
2495
+ className: (0, import_classnames9.default)("r-rowcell-content", { "is-invalid": errorMessage }),
2496
+ style: {
2497
+ margin: typeDis !== 1 && !errorMessage ? "6px 10px" : 2,
2498
+ maxWidth: col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth
2499
+ },
2465
2500
  children: [
2466
2501
  typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : typeDis === 2 ? col.template(row, indexRow) : value,
2467
2502
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "icon-table", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ej2_react_popups.TooltipComponent, { className: (0, import_classnames9.default)("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.AlertCircle, { fontSize: 16.5 }) }) })
2468
2503
  ]
2469
2504
  }
2470
- )
2505
+ ) })
2471
2506
  },
2472
2507
  `col-${indexRow}-${indexCol}`
2473
2508
  ) }, indexCol);
2474
2509
  }
2475
2510
  };
2476
- const renderHeaderCol = (col, indexCol) => {
2511
+ const renderHeaderCol = (col, indexCol, indexParent) => {
2477
2512
  if (col.field === "checkbox") {
2478
2513
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2479
2514
  "th",
2480
2515
  {
2516
+ rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
2517
+ colSpan: col.columns?.length ?? 1,
2481
2518
  className: (0, import_classnames9.default)(
2482
- `e-headercell fix-${col.fixedType}`,
2519
+ `r-headercell fix-${col.fixedType}`,
2483
2520
  { "cell-fixed": col.fixedType }
2484
2521
  ),
2485
2522
  style: {
2486
2523
  width: col.width,
2487
- padding: 0,
2488
2524
  minWidth: col.minWidth,
2489
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2490
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2525
+ top: `${indexParent * 42}px`,
2526
+ left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
2527
+ right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
2491
2528
  maxWidth: col.maxWidth
2492
2529
  },
2493
2530
  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2494
2531
  "div",
2495
2532
  {
2496
- style: { textAlign: "center", justifyContent: col.textAlign ?? "center" },
2497
- className: (0, import_classnames9.default)("e-headercell-div"),
2533
+ style: {
2534
+ height: `${(col.rowspan ?? 1) * 42}px`,
2535
+ justifyContent: col.textAlign ?? "center"
2536
+ },
2537
+ className: (0, import_classnames9.default)("r-headercell-div"),
2498
2538
  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2499
2539
  import_reactstrap8.Input,
2500
2540
  {
@@ -2527,24 +2567,29 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2527
2567
  children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2528
2568
  "th",
2529
2569
  {
2570
+ rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
2571
+ colSpan: col.columns?.length ?? 1,
2530
2572
  className: (0, import_classnames9.default)(
2531
- `e-headercell fix-${col.fixedType}`,
2573
+ `r-headercell fix-${col.fixedType}`,
2532
2574
  { "cell-fixed": col.fixedType }
2533
2575
  ),
2534
2576
  style: {
2535
- padding: 0,
2536
2577
  width: 40,
2537
2578
  minWidth: 40,
2538
2579
  maxWidth: 40,
2539
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2540
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0
2580
+ top: `${indexParent * 42}px`,
2581
+ left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
2582
+ right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0
2541
2583
  },
2542
2584
  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2543
2585
  "div",
2544
2586
  {
2545
2587
  title: t(col.headerText ?? ""),
2546
- style: { textAlign: "center", justifyContent: col.textAlign ?? "center" },
2547
- className: "e-headercell-div",
2588
+ style: {
2589
+ height: `${(col.rowspan ?? 1) * 42}px`,
2590
+ justifyContent: col.textAlign ?? "center"
2591
+ },
2592
+ className: "r-headercell-div",
2548
2593
  children: t(col.headerText ?? "")
2549
2594
  }
2550
2595
  )
@@ -2560,24 +2605,29 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2560
2605
  children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2561
2606
  "th",
2562
2607
  {
2608
+ rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
2609
+ colSpan: col.columns?.length ?? 1,
2563
2610
  className: (0, import_classnames9.default)(
2564
- `e-headercell fix-${col.fixedType}`,
2611
+ `r-headercell fix-${col.fixedType}`,
2565
2612
  { "cell-fixed": col.fixedType }
2566
2613
  ),
2567
2614
  style: {
2568
2615
  width: col.width,
2569
- padding: 0,
2570
2616
  minWidth: col.minWidth,
2571
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2572
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2617
+ top: `${indexParent * 42}px`,
2618
+ left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
2619
+ right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
2573
2620
  maxWidth: col.maxWidth
2574
2621
  },
2575
2622
  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2576
2623
  "div",
2577
2624
  {
2578
2625
  title: t(col.headerText ?? ""),
2579
- style: { textAlign: "center", justifyContent: col.textAlign ?? "left" },
2580
- className: "e-headercell-div",
2626
+ style: {
2627
+ height: `${(col.rowspan ?? 1) * 42}px`,
2628
+ justifyContent: col.textAlign ?? "center"
2629
+ },
2630
+ className: "r-headercell-div",
2581
2631
  children: t(col.headerText ?? "")
2582
2632
  }
2583
2633
  )
@@ -2593,7 +2643,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2593
2643
  "td",
2594
2644
  {
2595
2645
  className: (0, import_classnames9.default)(
2596
- `e-summarycell p-0 px-50 fix-${col.fixedType}`,
2646
+ `p-0 px-50 fix-${col.fixedType}`,
2597
2647
  { "cell-fixed": col.fixedType }
2598
2648
  ),
2599
2649
  style: {
@@ -2615,43 +2665,43 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2615
2665
  ) }, `summarycell-${indexCol}`);
2616
2666
  };
2617
2667
  const renderToolbarTop = () => {
2618
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: "table_custom_top_toolbar", className: "e-control e-toolbar", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-toolbar-items e-tbar-pos", children: [
2619
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-left", children: toolbarTopOption?.map((item, index) => {
2620
- return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
2668
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-toolbar-items", children: [
2669
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
2670
+ return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
2621
2671
  }) }),
2622
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-center", children: toolbarTopOption?.map((item, index) => {
2623
- return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
2672
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
2673
+ return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
2624
2674
  }) }),
2625
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-right", children: toolbarTopOption?.map((item, index) => {
2626
- return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
2675
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
2676
+ return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
2627
2677
  }) })
2628
2678
  ] }) });
2629
2679
  };
2630
2680
  const renderToolbarBottom = () => {
2631
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: "table_custom_bottom_toolbar", className: "e-control e-toolbar e-lib e-keyboard ", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-toolbar-items e-tbar-pos", children: [
2632
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-toolbar-left", children: [
2633
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
2681
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-toolbar-items", children: [
2682
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-toolbar-left", children: [
2683
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
2634
2684
  (indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
2635
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template", { "d-none": editDisable || addDisable || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: () => {
2685
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item", { "d-none": editDisable || addDisable || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: () => {
2636
2686
  handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
2637
2687
  }, className: "d-flex", children: t("Duplicate") }) }),
2638
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template", { "d-none": editDisable || addDisable || insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
2639
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template", { "d-none": editDisable || addDisable || insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
2688
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item", { "d-none": editDisable || addDisable || insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
2689
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item", { "d-none": editDisable || addDisable || insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
2640
2690
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: " " }),
2641
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template", { "d-none": editDisable || addDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
2691
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item", { "d-none": editDisable || addDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
2642
2692
  toolbarBottomOptions?.map((item, index) => {
2643
- return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
2693
+ return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
2644
2694
  })
2645
2695
  ] }),
2646
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-center", children: toolbarBottomOptions?.map((item, index) => {
2647
- return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
2696
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-center", children: toolbarBottomOptions?.map((item, index) => {
2697
+ return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
2648
2698
  }) }),
2649
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-toolbar-right", children: [
2699
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-toolbar-right", children: [
2650
2700
  toolbarBottomOptions?.map((item, index) => {
2651
- return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
2701
+ return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
2652
2702
  }),
2653
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template me-25"), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
2654
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("e-toolbar-item e-template me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_reactstrap8.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
2703
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
2704
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_reactstrap8.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
2655
2705
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.DropdownToggle, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.Info, { className: "cursor-pointer" }) }),
2656
2706
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.DropdownMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "d-flex flex-column p-50 py-25", children: [
2657
2707
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
@@ -2665,29 +2715,31 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2665
2715
  };
2666
2716
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react12.Fragment, { children: [
2667
2717
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "react-table-edit", children: [
2668
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "e-grid e-default e-bothlines", ref: gridRef, children: [
2718
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
2669
2719
  showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
2670
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "e-gridcontent", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: tableElement, className: "e-content", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { style: { width: "100%" }, children: [
2671
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: "e-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "e-row", role: "row", children: tableColumns.map((col, index) => {
2672
- return renderHeaderCol(col, index);
2673
- }) }) }),
2674
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "e-gridcontent", style: { overflowY: "scroll" }, children: dataSource?.map((row, indexRow) => {
2720
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { style: { width: "100%" }, children: [
2721
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
2722
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
2723
+ return renderHeaderCol(col, index, indexParent);
2724
+ }) }, indexParent);
2725
+ }) }),
2726
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "r-gridcontent", style: { overflowY: "scroll" }, children: dataSource?.map((row, indexRow) => {
2675
2727
  const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
2676
2728
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2677
2729
  "tr",
2678
2730
  {
2679
- className: "e-row",
2680
- children: tableColumns.map((col, indexCol) => {
2731
+ className: (0, import_classnames9.default)("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
2732
+ children: contentColumns.map((col, indexCol) => {
2681
2733
  return renderContentCol(col, row, indexRow, indexCol, isSelected);
2682
2734
  })
2683
2735
  },
2684
2736
  `row-${indexRow}`
2685
2737
  );
2686
2738
  }) }),
2687
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tfoot", { className: "e-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "e-row", children: tableColumns.map((col, index) => {
2739
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
2688
2740
  return renderFooterCol(col, index);
2689
2741
  }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}) })
2690
- ] }) }) }),
2742
+ ] }) }),
2691
2743
  showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {})
2692
2744
  ] }),
2693
2745
  allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -2711,8 +2763,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2711
2763
  setOpenPopupSetupColumn(!openPopupSetupColumn);
2712
2764
  },
2713
2765
  openSidebar: openPopupSetupColumn,
2714
- column: tableColumns,
2715
- setColumn: setTableColumns
2766
+ column: contentColumns,
2767
+ setColumn: setContentColumns
2716
2768
  }
2717
2769
  )
2718
2770
  ] });
package/dist/index.mjs CHANGED
@@ -1402,7 +1402,9 @@ var TableEdit = forwardRef2((props, ref) => {
1402
1402
  const [refreshRow, setRefreshRow] = useState5(false);
1403
1403
  const [indexFocus, setIndexFocus] = useState5();
1404
1404
  const [selectedRows, setSelectedRows] = useState5([]);
1405
- const [tableColumns, setTableColumns] = useState5([]);
1405
+ const [headerColumns, setHeaderColumns] = useState5([[]]);
1406
+ const [contentColumns, setContentColumns] = useState5([]);
1407
+ const [levelCol, setLevelCol] = useState5(0);
1406
1408
  const [columnFistEdit, setColumnFistEdit] = useState5(0);
1407
1409
  const [columnLastEdit, setColumnlastEdit] = useState5(0);
1408
1410
  const [objWidthFix, setObjWidthFix] = useState5({});
@@ -1419,14 +1421,14 @@ var TableEdit = forwardRef2((props, ref) => {
1419
1421
  let indexlast = -1;
1420
1422
  let letfWidthFix = 0;
1421
1423
  let rightWidthFix = 0;
1422
- tableColumns.forEach((item, index) => {
1424
+ contentColumns.forEach((item, index) => {
1423
1425
  if (item.fixedType === "left" && item.visible !== false) {
1424
1426
  objWidthFix[index] = letfWidthFix;
1425
1427
  letfWidthFix += Number(item.minWidth ? item.minWidth : item.field === "#" ? 40 : item.width ? item.width : 0);
1426
1428
  }
1427
- if (tableColumns[tableColumns.length - 1 - index].fixedType === "right" && tableColumns[tableColumns.length - 1 - index].visible !== false) {
1428
- objWidthFix[tableColumns.length - 1 - index] = rightWidthFix;
1429
- rightWidthFix += Number(tableColumns[tableColumns.length - 1 - index].minWidth ? tableColumns[tableColumns.length - 1 - index].minWidth : tableColumns[tableColumns.length - 1 - index].field === "#" ? 40 : tableColumns[tableColumns.length - 1 - index].width ? tableColumns[tableColumns.length - 1 - index].width : 0);
1429
+ if (contentColumns[contentColumns.length - 1 - index].fixedType === "right" && contentColumns[contentColumns.length - 1 - index].visible !== false) {
1430
+ objWidthFix[contentColumns.length - 1 - index] = rightWidthFix;
1431
+ rightWidthFix += Number(contentColumns[contentColumns.length - 1 - index].minWidth ? contentColumns[contentColumns.length - 1 - index].minWidth : contentColumns[contentColumns.length - 1 - index].field === "#" ? 40 : contentColumns[contentColumns.length - 1 - index].width ? contentColumns[contentColumns.length - 1 - index].width : 0);
1430
1432
  }
1431
1433
  if (item.editEnable && item.visible !== false && !item.disabledCondition) {
1432
1434
  if (indexFirst === -1) {
@@ -1438,12 +1440,51 @@ var TableEdit = forwardRef2((props, ref) => {
1438
1440
  setObjWidthFix(objWidthFix);
1439
1441
  setColumnFistEdit(indexFirst + 1);
1440
1442
  setColumnlastEdit(indexlast + 1);
1441
- }, [tableColumns]);
1443
+ }, [contentColumns]);
1442
1444
  useEffect5(() => {
1443
- setTableColumns(columns.map((item, index) => {
1444
- return { ...item, visible: item.invisibleDisable ? item.visible : tableColumns[index]?.visible ?? item.visible };
1445
- }));
1445
+ const arrHeaderColumns = [];
1446
+ const arrContentColumns = [];
1447
+ let headerLevelCol = 0;
1448
+ if (levelCol) {
1449
+ headerLevelCol = levelCol;
1450
+ } else {
1451
+ headerLevelCol = stretchColumn(columns, 0);
1452
+ setLevelCol(headerLevelCol);
1453
+ }
1454
+ for (let i = 0; i < headerLevelCol; i++) {
1455
+ arrHeaderColumns.push([]);
1456
+ }
1457
+ getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelCol);
1458
+ setHeaderColumns(arrHeaderColumns);
1459
+ setContentColumns(arrContentColumns);
1446
1460
  }, [columns]);
1461
+ const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevel) => {
1462
+ array.forEach((item, index) => {
1463
+ const ele = { ...item, visible: item.invisibleDisable ? item.visible : arrHeaderColumns[0][index]?.visible ?? item.visible, rowspan: 1, index: 0 };
1464
+ if (item.columns && item.columns?.length > 0) {
1465
+ const countLevel = getNestedChildren(item.columns, arrHeaderColumns, arrContentColumns, level + 1, maxLevel);
1466
+ arrHeaderColumns[maxLevel - 1 - countLevel].push(ele);
1467
+ } else {
1468
+ ele.rowspan = maxLevel - level;
1469
+ ele.index = arrContentColumns.length;
1470
+ arrHeaderColumns[level].push(ele);
1471
+ arrContentColumns.push(ele);
1472
+ }
1473
+ });
1474
+ return level;
1475
+ };
1476
+ const stretchColumn = (subColumns, headerLevelCol) => {
1477
+ let count = headerLevelCol + 1;
1478
+ subColumns.map((item) => {
1479
+ if (item.columns && item.columns.length > 0) {
1480
+ const newCount = stretchColumn(item.columns, headerLevelCol + 1);
1481
+ if (newCount > count) {
1482
+ count = newCount;
1483
+ }
1484
+ }
1485
+ });
1486
+ return count;
1487
+ };
1447
1488
  const handleRefeshRow = () => {
1448
1489
  setRefreshRow(true);
1449
1490
  setTimeout(() => {
@@ -1455,16 +1496,16 @@ var TableEdit = forwardRef2((props, ref) => {
1455
1496
  const rs = rowChange(row, indexRow, col.field);
1456
1497
  if (rs && rs?.then) {
1457
1498
  rs.then(() => {
1458
- for (let index = 0; index <= tableColumns.length; index++) {
1459
- if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
1499
+ for (let index = 0; index <= contentColumns.length; index++) {
1500
+ if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && contentColumns[index] && contentColumns[index].editEnable) {
1460
1501
  const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
1461
1502
  if (element) {
1462
1503
  if (element.className.includes("input-element")) {
1463
- element.value = row[tableColumns[index].field] ?? "";
1504
+ element.value = row[contentColumns[index].field] ?? "";
1464
1505
  } else if (element.className.includes("input-numeric")) {
1465
- element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
1506
+ element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
1466
1507
  } else if (element.className.includes("input-checkbox")) {
1467
- element.checked = row[tableColumns[index].field] ?? false;
1508
+ element.checked = row[contentColumns[index].field] ?? false;
1468
1509
  }
1469
1510
  }
1470
1511
  }
@@ -1475,16 +1516,16 @@ var TableEdit = forwardRef2((props, ref) => {
1475
1516
  }
1476
1517
  });
1477
1518
  } else {
1478
- for (let index = 0; index <= tableColumns.length; index++) {
1479
- if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && tableColumns[index] && tableColumns[index].editEnable) {
1519
+ for (let index = 0; index <= contentColumns.length; index++) {
1520
+ if (!editDisable && indexFocus === indexRow && (!col.disabledCondition || !col.disabledCondition(row)) && contentColumns[index] && contentColumns[index].editEnable) {
1480
1521
  const element = document.getElementById(`${idTable}-col${index + 1}-row${indexRow + 1}`);
1481
1522
  if (element) {
1482
1523
  if (element.className.includes("input-element")) {
1483
- element.value = row[tableColumns[index].field] ?? "";
1524
+ element.value = row[contentColumns[index].field] ?? "";
1484
1525
  } else if (element.className.includes("input-numeric")) {
1485
- element.value = row[tableColumns[index].field] ? formartNumberic(row[tableColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
1526
+ element.value = row[contentColumns[index].field] ? formartNumberic(row[contentColumns[index].field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction) : 0;
1486
1527
  } else if (element.className.includes("input-checkbox")) {
1487
- element.checked = row[tableColumns[index].field] ?? false;
1528
+ element.checked = row[contentColumns[index].field] ?? false;
1488
1529
  }
1489
1530
  }
1490
1531
  }
@@ -1947,8 +1988,8 @@ var TableEdit = forwardRef2((props, ref) => {
1947
1988
  const checkKeyDown = (e, row, col, indexRow, indexCol) => {
1948
1989
  if (e.code === "ArrowRight") {
1949
1990
  let newIndexCol = -1;
1950
- for (let i = indexCol; i < tableColumns.length; i++) {
1951
- if (tableColumns[i].editEnable && tableColumns[i].visible !== false && (!tableColumns[i].disabledCondition || !tableColumns[i].disabledCondition(row))) {
1991
+ for (let i = indexCol; i < contentColumns.length; i++) {
1992
+ if (contentColumns[i].editEnable && contentColumns[i].visible !== false && (!contentColumns[i].disabledCondition || !contentColumns[i].disabledCondition(row))) {
1952
1993
  newIndexCol = i + 1;
1953
1994
  break;
1954
1995
  }
@@ -1969,7 +2010,7 @@ var TableEdit = forwardRef2((props, ref) => {
1969
2010
  if (e.code === "ArrowLeft") {
1970
2011
  let newIndexCol = -1;
1971
2012
  for (let i = indexCol - 2; i >= 0; i--) {
1972
- if (tableColumns[i].editEnable && tableColumns[i].visible !== false && (!tableColumns[i].disabledCondition || !tableColumns[i].disabledCondition(row))) {
2013
+ if (contentColumns[i].editEnable && contentColumns[i].visible !== false && (!contentColumns[i].disabledCondition || !contentColumns[i].disabledCondition(row))) {
1973
2014
  newIndexCol = i + 1;
1974
2015
  break;
1975
2016
  }
@@ -2179,7 +2220,7 @@ var TableEdit = forwardRef2((props, ref) => {
2179
2220
  dataSource?.push(dataRow);
2180
2221
  }
2181
2222
  arrayCol.forEach((element, index) => {
2182
- const column = tableColumns[col + index];
2223
+ const column = contentColumns[col + index];
2183
2224
  if ((!column.disabledCondition || !column.disabledCondition(row)) && column.editEnable) {
2184
2225
  dataRow[column.field] = element;
2185
2226
  }
@@ -2245,19 +2286,16 @@ var TableEdit = forwardRef2((props, ref) => {
2245
2286
  "td",
2246
2287
  {
2247
2288
  className: classnames5(
2248
- `e-rowcell p-0 fix-${col.fixedType}`,
2289
+ `r-rowcell p-0 fix-${col.fixedType}`,
2249
2290
  { "cell-fixed": col.fixedType },
2250
- { "e-active": isSelected && editDisable || indexFocus === indexRow }
2291
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
2251
2292
  ),
2252
2293
  style: {
2253
- width: col.width,
2254
- minWidth: col.minWidth,
2255
- maxWidth: col.maxWidth,
2256
2294
  left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2257
2295
  right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2258
2296
  textAlign: col.textAlign ? col.textAlign : "left"
2259
2297
  },
2260
- children: /* @__PURE__ */ jsx12("div", { className: "e-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
2298
+ children: /* @__PURE__ */ jsx12("div", { className: "r-rowcell-div ", children: renderCommand(col.commandItems, row, indexRow) })
2261
2299
  },
2262
2300
  `col-${indexRow}-${indexCol}`
2263
2301
  );
@@ -2265,12 +2303,9 @@ var TableEdit = forwardRef2((props, ref) => {
2265
2303
  return /* @__PURE__ */ jsx12(
2266
2304
  "td",
2267
2305
  {
2268
- className: classnames5(`e-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "e-active": isSelected && editDisable || indexFocus === indexRow }),
2306
+ className: classnames5(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
2269
2307
  tabIndex: Number(`${indexRow}${indexCol}`),
2270
2308
  style: {
2271
- width: 40,
2272
- minWidth: 40,
2273
- maxWidth: 40,
2274
2309
  left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2275
2310
  right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2276
2311
  textAlign: "center"
@@ -2312,7 +2347,7 @@ var TableEdit = forwardRef2((props, ref) => {
2312
2347
  e.stopPropagation();
2313
2348
  }
2314
2349
  },
2315
- children: /* @__PURE__ */ jsx12("div", { className: "e-rowcell-div pt-50", children: indexRow + 1 })
2350
+ children: /* @__PURE__ */ jsx12("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
2316
2351
  },
2317
2352
  `col-${indexRow}-${indexCol}`
2318
2353
  );
@@ -2321,14 +2356,11 @@ var TableEdit = forwardRef2((props, ref) => {
2321
2356
  "td",
2322
2357
  {
2323
2358
  className: classnames5(
2324
- `e-rowcell p-0 fix-${col.fixedType}`,
2359
+ `r-rowcell p-0 fix-${col.fixedType}`,
2325
2360
  { "cell-fixed": col.fixedType },
2326
- { "e-active": isSelected && editDisable || indexFocus === indexRow }
2361
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
2327
2362
  ),
2328
2363
  style: {
2329
- width: col.width,
2330
- minWidth: col.minWidth,
2331
- maxWidth: col.maxWidth,
2332
2364
  left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2333
2365
  right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2334
2366
  textAlign: col.textAlign ? col.textAlign : "center"
@@ -2336,7 +2368,7 @@ var TableEdit = forwardRef2((props, ref) => {
2336
2368
  children: /* @__PURE__ */ jsx12(
2337
2369
  "div",
2338
2370
  {
2339
- className: "e-rowcell-div cursor-pointer",
2371
+ className: "r-rowcell-div cursor-pointer",
2340
2372
  onClick: (e) => {
2341
2373
  if (selectEnable) {
2342
2374
  const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
@@ -2388,9 +2420,9 @@ var TableEdit = forwardRef2((props, ref) => {
2388
2420
  "td",
2389
2421
  {
2390
2422
  className: classnames5(
2391
- `e-rowcell fix-${col.fixedType}`,
2423
+ `r-rowcell fix-${col.fixedType}`,
2392
2424
  { "cell-fixed": col.fixedType },
2393
- { "e-active": isSelected && editDisable || indexFocus === indexRow }
2425
+ { "r-active": isSelected && editDisable || indexFocus === indexRow }
2394
2426
  ),
2395
2427
  style: {
2396
2428
  left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
@@ -2430,45 +2462,53 @@ var TableEdit = forwardRef2((props, ref) => {
2430
2462
  }
2431
2463
  },
2432
2464
  title: `${value ?? ""}`,
2433
- children: /* @__PURE__ */ jsxs11(
2465
+ children: /* @__PURE__ */ jsx12("div", { className: classnames5("r-rowcell-div"), children: /* @__PURE__ */ jsxs11(
2434
2466
  "div",
2435
2467
  {
2436
2468
  id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
2437
- className: classnames5("e-rowcell-div", { "is-invalid": errorMessage }),
2438
- style: { padding: typeDis !== 1 ? errorMessage ? "2px 10px" : "6px 10px" : 2 },
2469
+ className: classnames5("r-rowcell-content", { "is-invalid": errorMessage }),
2470
+ style: {
2471
+ margin: typeDis !== 1 && !errorMessage ? "6px 10px" : 2,
2472
+ maxWidth: col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth
2473
+ },
2439
2474
  children: [
2440
2475
  typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : typeDis === 2 ? col.template(row, indexRow) : value,
2441
2476
  /* @__PURE__ */ jsx12("span", { className: "icon-table", children: /* @__PURE__ */ jsx12(TooltipComponent, { className: classnames5("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage, children: /* @__PURE__ */ jsx12(AlertCircle, { fontSize: 16.5 }) }) })
2442
2477
  ]
2443
2478
  }
2444
- )
2479
+ ) })
2445
2480
  },
2446
2481
  `col-${indexRow}-${indexCol}`
2447
2482
  ) }, indexCol);
2448
2483
  }
2449
2484
  };
2450
- const renderHeaderCol = (col, indexCol) => {
2485
+ const renderHeaderCol = (col, indexCol, indexParent) => {
2451
2486
  if (col.field === "checkbox") {
2452
2487
  return /* @__PURE__ */ jsx12(Fragment12, { children: col.visible !== false && /* @__PURE__ */ jsx12(
2453
2488
  "th",
2454
2489
  {
2490
+ rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
2491
+ colSpan: col.columns?.length ?? 1,
2455
2492
  className: classnames5(
2456
- `e-headercell fix-${col.fixedType}`,
2493
+ `r-headercell fix-${col.fixedType}`,
2457
2494
  { "cell-fixed": col.fixedType }
2458
2495
  ),
2459
2496
  style: {
2460
2497
  width: col.width,
2461
- padding: 0,
2462
2498
  minWidth: col.minWidth,
2463
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2464
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2499
+ top: `${indexParent * 42}px`,
2500
+ left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
2501
+ right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
2465
2502
  maxWidth: col.maxWidth
2466
2503
  },
2467
2504
  children: /* @__PURE__ */ jsx12(
2468
2505
  "div",
2469
2506
  {
2470
- style: { textAlign: "center", justifyContent: col.textAlign ?? "center" },
2471
- className: classnames5("e-headercell-div"),
2507
+ style: {
2508
+ height: `${(col.rowspan ?? 1) * 42}px`,
2509
+ justifyContent: col.textAlign ?? "center"
2510
+ },
2511
+ className: classnames5("r-headercell-div"),
2472
2512
  children: /* @__PURE__ */ jsx12(
2473
2513
  Input6,
2474
2514
  {
@@ -2501,24 +2541,29 @@ var TableEdit = forwardRef2((props, ref) => {
2501
2541
  children: col.visible !== false && /* @__PURE__ */ jsx12(
2502
2542
  "th",
2503
2543
  {
2544
+ rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
2545
+ colSpan: col.columns?.length ?? 1,
2504
2546
  className: classnames5(
2505
- `e-headercell fix-${col.fixedType}`,
2547
+ `r-headercell fix-${col.fixedType}`,
2506
2548
  { "cell-fixed": col.fixedType }
2507
2549
  ),
2508
2550
  style: {
2509
- padding: 0,
2510
2551
  width: 40,
2511
2552
  minWidth: 40,
2512
2553
  maxWidth: 40,
2513
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2514
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0
2554
+ top: `${indexParent * 42}px`,
2555
+ left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
2556
+ right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0
2515
2557
  },
2516
2558
  children: /* @__PURE__ */ jsx12(
2517
2559
  "div",
2518
2560
  {
2519
2561
  title: t(col.headerText ?? ""),
2520
- style: { textAlign: "center", justifyContent: col.textAlign ?? "center" },
2521
- className: "e-headercell-div",
2562
+ style: {
2563
+ height: `${(col.rowspan ?? 1) * 42}px`,
2564
+ justifyContent: col.textAlign ?? "center"
2565
+ },
2566
+ className: "r-headercell-div",
2522
2567
  children: t(col.headerText ?? "")
2523
2568
  }
2524
2569
  )
@@ -2534,24 +2579,29 @@ var TableEdit = forwardRef2((props, ref) => {
2534
2579
  children: col.visible !== false && /* @__PURE__ */ jsx12(
2535
2580
  "th",
2536
2581
  {
2582
+ rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
2583
+ colSpan: col.columns?.length ?? 1,
2537
2584
  className: classnames5(
2538
- `e-headercell fix-${col.fixedType}`,
2585
+ `r-headercell fix-${col.fixedType}`,
2539
2586
  { "cell-fixed": col.fixedType }
2540
2587
  ),
2541
2588
  style: {
2542
2589
  width: col.width,
2543
- padding: 0,
2544
2590
  minWidth: col.minWidth,
2545
- left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2546
- right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2591
+ top: `${indexParent * 42}px`,
2592
+ left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
2593
+ right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
2547
2594
  maxWidth: col.maxWidth
2548
2595
  },
2549
2596
  children: /* @__PURE__ */ jsx12(
2550
2597
  "div",
2551
2598
  {
2552
2599
  title: t(col.headerText ?? ""),
2553
- style: { textAlign: "center", justifyContent: col.textAlign ?? "left" },
2554
- className: "e-headercell-div",
2600
+ style: {
2601
+ height: `${(col.rowspan ?? 1) * 42}px`,
2602
+ justifyContent: col.textAlign ?? "center"
2603
+ },
2604
+ className: "r-headercell-div",
2555
2605
  children: t(col.headerText ?? "")
2556
2606
  }
2557
2607
  )
@@ -2567,7 +2617,7 @@ var TableEdit = forwardRef2((props, ref) => {
2567
2617
  "td",
2568
2618
  {
2569
2619
  className: classnames5(
2570
- `e-summarycell p-0 px-50 fix-${col.fixedType}`,
2620
+ `p-0 px-50 fix-${col.fixedType}`,
2571
2621
  { "cell-fixed": col.fixedType }
2572
2622
  ),
2573
2623
  style: {
@@ -2589,43 +2639,43 @@ var TableEdit = forwardRef2((props, ref) => {
2589
2639
  ) }, `summarycell-${indexCol}`);
2590
2640
  };
2591
2641
  const renderToolbarTop = () => {
2592
- return /* @__PURE__ */ jsx12("div", { id: "table_custom_top_toolbar", className: "e-control e-toolbar", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs11("div", { className: "e-toolbar-items e-tbar-pos", children: [
2593
- /* @__PURE__ */ jsx12("div", { className: "e-toolbar-left", children: toolbarTopOption?.map((item, index) => {
2594
- return item.align === "left" ? /* @__PURE__ */ jsx12("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
2642
+ return /* @__PURE__ */ jsx12("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-items", children: [
2643
+ /* @__PURE__ */ jsx12("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
2644
+ return item.align === "left" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
2595
2645
  }) }),
2596
- /* @__PURE__ */ jsx12("div", { className: "e-toolbar-center", children: toolbarTopOption?.map((item, index) => {
2597
- return item.align === "center" ? /* @__PURE__ */ jsx12("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
2646
+ /* @__PURE__ */ jsx12("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
2647
+ return item.align === "center" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
2598
2648
  }) }),
2599
- /* @__PURE__ */ jsx12("div", { className: "e-toolbar-right", children: toolbarTopOption?.map((item, index) => {
2600
- return item.align === "right" ? /* @__PURE__ */ jsx12("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
2649
+ /* @__PURE__ */ jsx12("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
2650
+ return item.align === "right" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
2601
2651
  }) })
2602
2652
  ] }) });
2603
2653
  };
2604
2654
  const renderToolbarBottom = () => {
2605
- return /* @__PURE__ */ jsx12("div", { id: "table_custom_bottom_toolbar", className: "e-control e-toolbar e-lib e-keyboard ", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs11("div", { className: "e-toolbar-items e-tbar-pos", children: [
2606
- /* @__PURE__ */ jsxs11("div", { className: "e-toolbar-left", children: [
2607
- /* @__PURE__ */ jsx12("div", { className: classnames5("e-toolbar-item e-template", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
2655
+ return /* @__PURE__ */ jsx12("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-items", children: [
2656
+ /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-left", children: [
2657
+ /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
2608
2658
  (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs11(Fragment13, { children: [
2609
- /* @__PURE__ */ jsx12("div", { className: classnames5("e-toolbar-item e-template", { "d-none": editDisable || addDisable || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: () => {
2659
+ /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item", { "d-none": editDisable || addDisable || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: () => {
2610
2660
  handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
2611
2661
  }, className: "d-flex", children: t("Duplicate") }) }),
2612
- /* @__PURE__ */ jsx12("div", { className: classnames5("e-toolbar-item e-template", { "d-none": editDisable || addDisable || insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
2613
- /* @__PURE__ */ jsx12("div", { className: classnames5("e-toolbar-item e-template", { "d-none": editDisable || addDisable || insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
2662
+ /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item", { "d-none": editDisable || addDisable || insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
2663
+ /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item", { "d-none": editDisable || addDisable || insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
2614
2664
  ] }) : /* @__PURE__ */ jsx12(Fragment13, { children: " " }),
2615
- /* @__PURE__ */ jsx12("div", { className: classnames5("e-toolbar-item e-template", { "d-none": editDisable || addDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
2665
+ /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item", { "d-none": editDisable || addDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
2616
2666
  toolbarBottomOptions?.map((item, index) => {
2617
- return item.align === "left" ? /* @__PURE__ */ jsx12("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
2667
+ return item.align === "left" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
2618
2668
  })
2619
2669
  ] }),
2620
- /* @__PURE__ */ jsx12("div", { className: "e-toolbar-center", children: toolbarBottomOptions?.map((item, index) => {
2621
- return item.align === "center" ? /* @__PURE__ */ jsx12("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
2670
+ /* @__PURE__ */ jsx12("div", { className: "r-toolbar-center", children: toolbarBottomOptions?.map((item, index) => {
2671
+ return item.align === "center" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
2622
2672
  }) }),
2623
- /* @__PURE__ */ jsxs11("div", { className: "e-toolbar-right", children: [
2673
+ /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-right", children: [
2624
2674
  toolbarBottomOptions?.map((item, index) => {
2625
- return item.align === "right" ? /* @__PURE__ */ jsx12("div", { className: "e-toolbar-item e-template", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
2675
+ return item.align === "right" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
2626
2676
  }),
2627
- /* @__PURE__ */ jsx12("div", { className: classnames5("e-toolbar-item e-template me-25"), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
2628
- /* @__PURE__ */ jsx12("div", { className: classnames5("e-toolbar-item e-template me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs11(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
2677
+ /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
2678
+ /* @__PURE__ */ jsx12("div", { className: classnames5("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsxs11(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
2629
2679
  /* @__PURE__ */ jsx12(DropdownToggle2, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx12(Info2, { className: "cursor-pointer" }) }),
2630
2680
  /* @__PURE__ */ jsx12(DropdownMenu2, { children: /* @__PURE__ */ jsxs11("div", { className: "d-flex flex-column p-50 py-25", children: [
2631
2681
  /* @__PURE__ */ jsx12("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
@@ -2639,29 +2689,31 @@ var TableEdit = forwardRef2((props, ref) => {
2639
2689
  };
2640
2690
  return /* @__PURE__ */ jsxs11(Fragment12, { children: [
2641
2691
  /* @__PURE__ */ jsxs11("div", { className: "react-table-edit", children: [
2642
- /* @__PURE__ */ jsxs11("div", { className: "e-grid e-default e-bothlines", ref: gridRef, children: [
2692
+ /* @__PURE__ */ jsxs11("div", { className: "r-grid", ref: gridRef, children: [
2643
2693
  showTopToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx12(Fragment13, {}),
2644
- /* @__PURE__ */ jsx12("div", { className: "e-gridcontent", children: /* @__PURE__ */ jsx12("div", { ref: tableElement, className: "e-content", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs11("table", { style: { width: "100%" }, children: [
2645
- /* @__PURE__ */ jsx12("thead", { className: "e-gridheader", children: /* @__PURE__ */ jsx12("tr", { className: "e-row", role: "row", children: tableColumns.map((col, index) => {
2646
- return renderHeaderCol(col, index);
2647
- }) }) }),
2648
- /* @__PURE__ */ jsx12("tbody", { className: "e-gridcontent", style: { overflowY: "scroll" }, children: dataSource?.map((row, indexRow) => {
2694
+ /* @__PURE__ */ jsx12("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs11("table", { style: { width: "100%" }, children: [
2695
+ /* @__PURE__ */ jsx12("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
2696
+ return /* @__PURE__ */ jsx12("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
2697
+ return renderHeaderCol(col, index, indexParent);
2698
+ }) }, indexParent);
2699
+ }) }),
2700
+ /* @__PURE__ */ jsx12("tbody", { className: "r-gridcontent", style: { overflowY: "scroll" }, children: dataSource?.map((row, indexRow) => {
2649
2701
  const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
2650
2702
  return /* @__PURE__ */ jsx12(
2651
2703
  "tr",
2652
2704
  {
2653
- className: "e-row",
2654
- children: tableColumns.map((col, indexCol) => {
2705
+ className: classnames5("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
2706
+ children: contentColumns.map((col, indexCol) => {
2655
2707
  return renderContentCol(col, row, indexRow, indexCol, isSelected);
2656
2708
  })
2657
2709
  },
2658
2710
  `row-${indexRow}`
2659
2711
  );
2660
2712
  }) }),
2661
- /* @__PURE__ */ jsx12("tfoot", { className: "e-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx12("tr", { className: "e-row", children: tableColumns.map((col, index) => {
2713
+ /* @__PURE__ */ jsx12("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx12("tr", { className: "r-row", children: contentColumns.map((col, index) => {
2662
2714
  return renderFooterCol(col, index);
2663
2715
  }) }) : /* @__PURE__ */ jsx12(Fragment13, {}) })
2664
- ] }) }) }),
2716
+ ] }) }),
2665
2717
  showBottomToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx12(Fragment13, {})
2666
2718
  ] }),
2667
2719
  allowPaging ? /* @__PURE__ */ jsx12(
@@ -2685,8 +2737,8 @@ var TableEdit = forwardRef2((props, ref) => {
2685
2737
  setOpenPopupSetupColumn(!openPopupSetupColumn);
2686
2738
  },
2687
2739
  openSidebar: openPopupSetupColumn,
2688
- column: tableColumns,
2689
- setColumn: setTableColumns
2740
+ column: contentColumns,
2741
+ setColumn: setContentColumns
2690
2742
  }
2691
2743
  )
2692
2744
  ] });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.1.6",
4
+ "version": "0.1.8",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",