react-table-edit 0.2.3 → 0.2.5

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 (3) hide show
  1. package/dist/index.js +59 -27
  2. package/dist/index.mjs +59 -27
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1448,13 +1448,18 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1448
1448
  let letfWidthFix = 0;
1449
1449
  let rightWidthFix = 0;
1450
1450
  contentColumns.forEach((item, index) => {
1451
+ if (headerColumns.length === 1 && headerColumns[0].length === contentColumns.length) {
1452
+ headerColumns[0][index].visible = item.visible;
1453
+ headerColumns[0][index].fixedType = item.fixedType;
1454
+ }
1451
1455
  if (item.fixedType === "left" && item.visible !== false) {
1452
1456
  objWidthFix[index] = letfWidthFix;
1453
- letfWidthFix += Number(item.minWidth ? item.minWidth : item.field === "#" ? 40 : item.width ? item.width : 0);
1457
+ letfWidthFix += Number(item.maxWidth ? item.maxWidth : item.width ? item.width : item.minWidth ?? 40);
1454
1458
  }
1455
- if (contentColumns[contentColumns.length - 1 - index].fixedType === "right" && contentColumns[contentColumns.length - 1 - index].visible !== false) {
1459
+ const lasColumn = contentColumns[contentColumns.length - 1 - index];
1460
+ if (lasColumn.fixedType === "right" && lasColumn.visible !== false) {
1456
1461
  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);
1462
+ rightWidthFix += Number(lasColumn.maxWidth ? lasColumn.maxWidth : lasColumn.width ? lasColumn.width : lasColumn.minWidth ?? 40);
1458
1463
  }
1459
1464
  if (item.editEnable && item.visible !== false && !item.disabledCondition) {
1460
1465
  if (indexFirst === -1) {
@@ -1463,6 +1468,9 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1463
1468
  indexlast = index;
1464
1469
  }
1465
1470
  });
1471
+ if (headerColumns.length === 1 && headerColumns[0].length === contentColumns.length) {
1472
+ setHeaderColumns([...headerColumns]);
1473
+ }
1466
1474
  setObjWidthFix(objWidthFix);
1467
1475
  setColumnFistEdit(indexFirst + 1);
1468
1476
  setColumnlastEdit(indexlast + 1);
@@ -2487,22 +2495,49 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2487
2495
  e.stopPropagation();
2488
2496
  }
2489
2497
  },
2490
- title: `${value ?? ""}`,
2491
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames9.default)("r-rowcell-div"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
2498
+ children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2492
2499
  "div",
2493
2500
  {
2494
- id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
2495
- className: (0, import_classnames9.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
2501
+ className: (0, import_classnames9.default)("r-rowcell-div"),
2496
2502
  style: {
2497
- padding: typeDis !== 1 && errorMessage ? "6px 10px" : 0,
2498
- margin: typeDis !== 1 && !errorMessage ? "6px 10px" : 2
2503
+ width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
2499
2504
  },
2500
- children: [
2501
- typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : typeDis === 2 ? col.template(row, indexRow) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-cell-text", style: { maxWidth: col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth }, children: value }),
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?.toString() ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.AlertCircle, { fontSize: 16.5 }) }) })
2503
- ]
2505
+ children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
2506
+ "div",
2507
+ {
2508
+ id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
2509
+ className: (0, import_classnames9.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
2510
+ style: {
2511
+ padding: typeDis !== 1 && errorMessage ? "6px 10px" : 0,
2512
+ margin: typeDis !== 1 && !errorMessage ? "6px 10px" : 2
2513
+ },
2514
+ children: [
2515
+ typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : col.editType === "numeric" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2516
+ "div",
2517
+ {
2518
+ className: "r-cell-text",
2519
+ style: {
2520
+ maxWidth: col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto"
2521
+ },
2522
+ children: typeDis === 2 ? col.template(row, indexRow) : value
2523
+ }
2524
+ ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2525
+ import_ej2_react_popups.TooltipComponent,
2526
+ {
2527
+ content: typeDis === 2 ? col.template(row, indexRow)?.toString() : value,
2528
+ className: "r-cell-text",
2529
+ style: {
2530
+ maxWidth: col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto"
2531
+ },
2532
+ children: typeDis === 2 ? col.template(row, indexRow) : value
2533
+ }
2534
+ ),
2535
+ /* @__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?.toString() ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_becoxy_icons4.AlertCircle, { fontSize: 16.5 }) }) })
2536
+ ]
2537
+ }
2538
+ )
2504
2539
  }
2505
- ) })
2540
+ )
2506
2541
  },
2507
2542
  `col-${indexRow}-${indexCol}`
2508
2543
  ) }, indexCol);
@@ -2520,11 +2555,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2520
2555
  { "cell-fixed": col.fixedType }
2521
2556
  ),
2522
2557
  style: {
2523
- width: col.width,
2524
- minWidth: col.minWidth,
2525
2558
  top: `${indexParent * 42}px`,
2526
2559
  left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
2527
2560
  right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
2561
+ width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
2562
+ minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
2528
2563
  maxWidth: col.maxWidth
2529
2564
  },
2530
2565
  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -2612,8 +2647,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2612
2647
  { "cell-fixed": col.fixedType }
2613
2648
  ),
2614
2649
  style: {
2615
- width: col.width,
2616
- minWidth: col.minWidth,
2650
+ width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
2651
+ minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
2617
2652
  top: `${indexParent * 42}px`,
2618
2653
  left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
2619
2654
  right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
@@ -2622,6 +2657,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2622
2657
  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2623
2658
  "div",
2624
2659
  {
2660
+ role: "textbox",
2625
2661
  title: t(col.headerText ?? ""),
2626
2662
  style: {
2627
2663
  height: `${(col.rowspan ?? 1) * 42}px`,
@@ -2643,24 +2679,20 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2643
2679
  "td",
2644
2680
  {
2645
2681
  className: (0, import_classnames9.default)(
2646
- `p-0 px-50 fix-${col.fixedType}`,
2682
+ `p-0 px-50 r-footer fix-${col.fixedType}`,
2647
2683
  { "cell-fixed": col.fixedType }
2648
2684
  ),
2649
2685
  style: {
2650
- height: 30,
2651
- fontSize: 14,
2652
- fontWeight: 600,
2653
2686
  left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2654
2687
  right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2655
- width: col.width,
2656
- minWidth: col.minWidth,
2688
+ width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
2689
+ minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
2657
2690
  maxWidth: col.maxWidth,
2658
- whiteSpace: "nowrap",
2659
2691
  textAlign: col.textAlign ? col.textAlign : "left"
2660
2692
  },
2661
- children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource?.reduce(function(accumulator, currentValue) {
2693
+ children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource?.reduce(function(accumulator, currentValue) {
2662
2694
  return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
2663
- }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : ""
2695
+ }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
2664
2696
  }
2665
2697
  ) }, `summarycell-${indexCol}`);
2666
2698
  };
package/dist/index.mjs CHANGED
@@ -1422,13 +1422,18 @@ var TableEdit = forwardRef2((props, ref) => {
1422
1422
  let letfWidthFix = 0;
1423
1423
  let rightWidthFix = 0;
1424
1424
  contentColumns.forEach((item, index) => {
1425
+ if (headerColumns.length === 1 && headerColumns[0].length === contentColumns.length) {
1426
+ headerColumns[0][index].visible = item.visible;
1427
+ headerColumns[0][index].fixedType = item.fixedType;
1428
+ }
1425
1429
  if (item.fixedType === "left" && item.visible !== false) {
1426
1430
  objWidthFix[index] = letfWidthFix;
1427
- letfWidthFix += Number(item.minWidth ? item.minWidth : item.field === "#" ? 40 : item.width ? item.width : 0);
1431
+ letfWidthFix += Number(item.maxWidth ? item.maxWidth : item.width ? item.width : item.minWidth ?? 40);
1428
1432
  }
1429
- if (contentColumns[contentColumns.length - 1 - index].fixedType === "right" && contentColumns[contentColumns.length - 1 - index].visible !== false) {
1433
+ const lasColumn = contentColumns[contentColumns.length - 1 - index];
1434
+ if (lasColumn.fixedType === "right" && lasColumn.visible !== false) {
1430
1435
  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);
1436
+ rightWidthFix += Number(lasColumn.maxWidth ? lasColumn.maxWidth : lasColumn.width ? lasColumn.width : lasColumn.minWidth ?? 40);
1432
1437
  }
1433
1438
  if (item.editEnable && item.visible !== false && !item.disabledCondition) {
1434
1439
  if (indexFirst === -1) {
@@ -1437,6 +1442,9 @@ var TableEdit = forwardRef2((props, ref) => {
1437
1442
  indexlast = index;
1438
1443
  }
1439
1444
  });
1445
+ if (headerColumns.length === 1 && headerColumns[0].length === contentColumns.length) {
1446
+ setHeaderColumns([...headerColumns]);
1447
+ }
1440
1448
  setObjWidthFix(objWidthFix);
1441
1449
  setColumnFistEdit(indexFirst + 1);
1442
1450
  setColumnlastEdit(indexlast + 1);
@@ -2461,22 +2469,49 @@ var TableEdit = forwardRef2((props, ref) => {
2461
2469
  e.stopPropagation();
2462
2470
  }
2463
2471
  },
2464
- title: `${value ?? ""}`,
2465
- children: /* @__PURE__ */ jsx12("div", { className: classnames5("r-rowcell-div"), children: /* @__PURE__ */ jsxs11(
2472
+ children: /* @__PURE__ */ jsx12(
2466
2473
  "div",
2467
2474
  {
2468
- id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
2469
- className: classnames5("r-rowcell-content", { "r-is-invalid": errorMessage }),
2475
+ className: classnames5("r-rowcell-div"),
2470
2476
  style: {
2471
- padding: typeDis !== 1 && errorMessage ? "6px 10px" : 0,
2472
- margin: typeDis !== 1 && !errorMessage ? "6px 10px" : 2
2477
+ width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
2473
2478
  },
2474
- children: [
2475
- typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : typeDis === 2 ? col.template(row, indexRow) : /* @__PURE__ */ jsx12("div", { className: "r-cell-text", style: { maxWidth: col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth }, children: value }),
2476
- /* @__PURE__ */ jsx12("span", { className: "icon-table", children: /* @__PURE__ */ jsx12(TooltipComponent, { className: classnames5("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage?.toString() ?? "", children: /* @__PURE__ */ jsx12(AlertCircle, { fontSize: 16.5 }) }) })
2477
- ]
2479
+ children: /* @__PURE__ */ jsxs11(
2480
+ "div",
2481
+ {
2482
+ id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
2483
+ className: classnames5("r-rowcell-content", { "r-is-invalid": errorMessage }),
2484
+ style: {
2485
+ padding: typeDis !== 1 && errorMessage ? "6px 10px" : 0,
2486
+ margin: typeDis !== 1 && !errorMessage ? "6px 10px" : 2
2487
+ },
2488
+ children: [
2489
+ typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : col.editType === "numeric" ? /* @__PURE__ */ jsx12(
2490
+ "div",
2491
+ {
2492
+ className: "r-cell-text",
2493
+ style: {
2494
+ maxWidth: col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto"
2495
+ },
2496
+ children: typeDis === 2 ? col.template(row, indexRow) : value
2497
+ }
2498
+ ) : /* @__PURE__ */ jsx12(
2499
+ TooltipComponent,
2500
+ {
2501
+ content: typeDis === 2 ? col.template(row, indexRow)?.toString() : value,
2502
+ className: "r-cell-text",
2503
+ style: {
2504
+ maxWidth: col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto"
2505
+ },
2506
+ children: typeDis === 2 ? col.template(row, indexRow) : value
2507
+ }
2508
+ ),
2509
+ /* @__PURE__ */ jsx12("span", { className: "icon-table", children: /* @__PURE__ */ jsx12(TooltipComponent, { className: classnames5("cursor-pointer text-primary", { "d-none": !errorMessage }), content: errorMessage?.toString() ?? "", children: /* @__PURE__ */ jsx12(AlertCircle, { fontSize: 16.5 }) }) })
2510
+ ]
2511
+ }
2512
+ )
2478
2513
  }
2479
- ) })
2514
+ )
2480
2515
  },
2481
2516
  `col-${indexRow}-${indexCol}`
2482
2517
  ) }, indexCol);
@@ -2494,11 +2529,11 @@ var TableEdit = forwardRef2((props, ref) => {
2494
2529
  { "cell-fixed": col.fixedType }
2495
2530
  ),
2496
2531
  style: {
2497
- width: col.width,
2498
- minWidth: col.minWidth,
2499
2532
  top: `${indexParent * 42}px`,
2500
2533
  left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
2501
2534
  right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
2535
+ width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
2536
+ minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
2502
2537
  maxWidth: col.maxWidth
2503
2538
  },
2504
2539
  children: /* @__PURE__ */ jsx12(
@@ -2586,8 +2621,8 @@ var TableEdit = forwardRef2((props, ref) => {
2586
2621
  { "cell-fixed": col.fixedType }
2587
2622
  ),
2588
2623
  style: {
2589
- width: col.width,
2590
- minWidth: col.minWidth,
2624
+ width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
2625
+ minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
2591
2626
  top: `${indexParent * 42}px`,
2592
2627
  left: col.fixedType === "left" ? objWidthFix[col.index ?? 0] : void 0,
2593
2628
  right: col.fixedType === "right" ? objWidthFix[col.index ?? 0] : void 0,
@@ -2596,6 +2631,7 @@ var TableEdit = forwardRef2((props, ref) => {
2596
2631
  children: /* @__PURE__ */ jsx12(
2597
2632
  "div",
2598
2633
  {
2634
+ role: "textbox",
2599
2635
  title: t(col.headerText ?? ""),
2600
2636
  style: {
2601
2637
  height: `${(col.rowspan ?? 1) * 42}px`,
@@ -2617,24 +2653,20 @@ var TableEdit = forwardRef2((props, ref) => {
2617
2653
  "td",
2618
2654
  {
2619
2655
  className: classnames5(
2620
- `p-0 px-50 fix-${col.fixedType}`,
2656
+ `p-0 px-50 r-footer fix-${col.fixedType}`,
2621
2657
  { "cell-fixed": col.fixedType }
2622
2658
  ),
2623
2659
  style: {
2624
- height: 30,
2625
- fontSize: 14,
2626
- fontWeight: 600,
2627
2660
  left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
2628
2661
  right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
2629
- width: col.width,
2630
- minWidth: col.minWidth,
2662
+ width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
2663
+ minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
2631
2664
  maxWidth: col.maxWidth,
2632
- whiteSpace: "nowrap",
2633
2665
  textAlign: col.textAlign ? col.textAlign : "left"
2634
2666
  },
2635
- children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource?.reduce(function(accumulator, currentValue) {
2667
+ children: /* @__PURE__ */ jsx12("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource?.reduce(function(accumulator, currentValue) {
2636
2668
  return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
2637
- }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : ""
2669
+ }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
2638
2670
  }
2639
2671
  ) }, `summarycell-${indexCol}`);
2640
2672
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.2.3",
4
+ "version": "0.2.5",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",