react-table-edit 0.4.2 → 0.4.4

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 +4 -3
  2. package/dist/index.d.ts +4 -3
  3. package/dist/index.js +44 -16
  4. package/dist/index.mjs +44 -16
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -77,8 +77,8 @@ type IFTableEditPaging = {
77
77
  allowPaging?: boolean;
78
78
  pagingClient?: boolean;
79
79
  currentPage?: number;
80
- setCurrentPage?: any;
81
- setPageSize?: any;
80
+ setCurrentPage?: Dispatch<SetStateAction<number>>;
81
+ setPageSize?: Dispatch<SetStateAction<number>>;
82
82
  pageSize?: number;
83
83
  totalItem?: number;
84
84
  };
@@ -96,9 +96,10 @@ type IFTableEditToolbar = {
96
96
  };
97
97
  type IFTableEditSearchSetting = {
98
98
  searchEnable?: boolean;
99
+ searchClient?: boolean;
99
100
  searchTerm?: string;
100
- setSearchTerm?: Dispatch<SetStateAction<string>>;
101
101
  keyField?: string[];
102
+ setSearchTerm?: Dispatch<SetStateAction<string>>;
102
103
  };
103
104
  type IFTableEditProps = {
104
105
  idTable?: string;
package/dist/index.d.ts CHANGED
@@ -77,8 +77,8 @@ type IFTableEditPaging = {
77
77
  allowPaging?: boolean;
78
78
  pagingClient?: boolean;
79
79
  currentPage?: number;
80
- setCurrentPage?: any;
81
- setPageSize?: any;
80
+ setCurrentPage?: Dispatch<SetStateAction<number>>;
81
+ setPageSize?: Dispatch<SetStateAction<number>>;
82
82
  pageSize?: number;
83
83
  totalItem?: number;
84
84
  };
@@ -96,9 +96,10 @@ type IFTableEditToolbar = {
96
96
  };
97
97
  type IFTableEditSearchSetting = {
98
98
  searchEnable?: boolean;
99
+ searchClient?: boolean;
99
100
  searchTerm?: string;
100
- setSearchTerm?: Dispatch<SetStateAction<string>>;
101
101
  keyField?: string[];
102
+ setSearchTerm?: Dispatch<SetStateAction<string>>;
102
103
  };
103
104
  type IFTableEditProps = {
104
105
  idTable?: string;
package/dist/index.js CHANGED
@@ -1530,10 +1530,15 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1530
1530
  const lag = window.localStorage.getItem("i18nextLng");
1531
1531
  const lang = lag ? lag : "vi";
1532
1532
  const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
1533
- const searchClient = searchSetting?.searchEnable && !(editDisable || addDisable);
1533
+ const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
1534
1534
  let totalCount = dataSource.length;
1535
1535
  const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
1536
1536
  const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
1537
+ (0, import_react12.useEffect)(() => {
1538
+ if (pagingClient && pagingSetting.setCurrentPage && dataSource?.length / (pagingSetting?.pageSize ?? 1) > (pagingSetting.currentPage ?? 1)) {
1539
+ pagingSetting.setCurrentPage(1);
1540
+ }
1541
+ }, [dataSource]);
1537
1542
  (0, import_react12.useEffect)(() => {
1538
1543
  let indexFirst = -1;
1539
1544
  let indexlast = -1;
@@ -1584,6 +1589,23 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1584
1589
  setHeaderColumns(arrHeaderColumns);
1585
1590
  setContentColumns(arrContentColumns);
1586
1591
  }, [columns]);
1592
+ (0, import_react12.useEffect)(() => {
1593
+ const arrHeaderColumns = [];
1594
+ const arrContentColumns = [];
1595
+ let headerLevelRow = 0;
1596
+ if (levelCol) {
1597
+ headerLevelRow = levelCol;
1598
+ } else {
1599
+ headerLevelRow = stretchColumn(columns, 0);
1600
+ setLevelCol(headerLevelRow);
1601
+ }
1602
+ for (let i = 0; i < headerLevelRow; i++) {
1603
+ arrHeaderColumns.push([]);
1604
+ }
1605
+ getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelRow);
1606
+ setHeaderColumns(arrHeaderColumns);
1607
+ setContentColumns(arrContentColumns);
1608
+ }, [columns]);
1587
1609
  const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevelRow) => {
1588
1610
  array.forEach((item) => {
1589
1611
  const ele = { ...item, visible: item.visible, rowspan: 1, index: 0 };
@@ -2186,7 +2208,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2186
2208
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2187
2209
  if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("select-100__control--menu-is-open").length > 0 || element.getElementsByClassName("select-200__control--menu-is-open").length > 0 || element.getElementsByClassName("select-300__control--menu-is-open").length > 0 || element.getElementsByClassName("select-400__control--menu-is-open").length > 0 || element.getElementsByClassName("select-500__control--menu-is-open").length > 0)) {
2188
2210
  if (indexRow > 1) {
2189
- if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && indexRow % (pagingSetting?.pageSize ?? 0) === 1) {
2211
+ if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && indexRow % (pagingSetting?.pageSize ?? 0) === 1 && pagingSetting?.setCurrentPage) {
2190
2212
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
2191
2213
  }
2192
2214
  setIndexFocus(indexRow - 2);
@@ -2208,7 +2230,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2208
2230
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2209
2231
  if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("select-100__control--menu-is-open").length > 0 || element.getElementsByClassName("select-200__control--menu-is-open").length > 0 || element.getElementsByClassName("select-300__control--menu-is-open").length > 0 || element.getElementsByClassName("select-400__control--menu-is-open").length > 0 || element.getElementsByClassName("select-500__control--menu-is-open").length > 0)) {
2210
2232
  if (indexRow < totalCount) {
2211
- if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2233
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0 && pagingSetting?.setCurrentPage) {
2212
2234
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2213
2235
  }
2214
2236
  setIndexFocus(indexRow);
@@ -2230,7 +2252,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2230
2252
  if (indexRow === totalCount) {
2231
2253
  moveIndexRowToNewPage();
2232
2254
  } else {
2233
- if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2255
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0 && pagingSetting?.setCurrentPage) {
2234
2256
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2235
2257
  }
2236
2258
  setIndexFocus(indexRow);
@@ -2253,7 +2275,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2253
2275
  if (indexRow === totalCount) {
2254
2276
  moveIndexRowToNewPage();
2255
2277
  } else {
2256
- if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2278
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0 && pagingSetting?.setCurrentPage) {
2257
2279
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2258
2280
  }
2259
2281
  setIndexFocus(indexRow);
@@ -2307,7 +2329,9 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2307
2329
  });
2308
2330
  const handleAdd = () => {
2309
2331
  changeDataSource(dataSource, true);
2310
- pagingSetting?.setCurrentPage(Math.floor(totalCount / (pagingSetting?.pageSize ?? 0)) + 1);
2332
+ if (pagingSetting?.setCurrentPage) {
2333
+ pagingSetting?.setCurrentPage(Math.floor(totalCount / (pagingSetting?.pageSize ?? 0)) + 1);
2334
+ }
2311
2335
  if (tableElement) {
2312
2336
  setIndexFocus(totalCount);
2313
2337
  setTimeout(() => {
@@ -2889,22 +2913,26 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2889
2913
  };
2890
2914
  const renderData = () => {
2891
2915
  totalCount = 0;
2916
+ let countDisplay = -1;
2892
2917
  return dataSource.map((row, indexRow) => {
2893
2918
  const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
2894
2919
  const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
2895
2920
  if (flagSearch) {
2896
2921
  totalCount += 1;
2897
2922
  const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
2898
- return flagDisplay && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2899
- "tr",
2900
- {
2901
- className: (0, import_classnames10.default)("r-row", { "last-row": indexRow === (pagingClient ? totalCount % (pagingSetting?.pageSize ?? 0) : totalCount - 1) }, { "fisrt-row": pagingClient ? indexRow % (pagingSetting?.pageSize ?? 0) === 0 : 0 }),
2902
- children: contentColumns.map((col, indexCol) => {
2903
- return renderContentCol(col, row, indexRow, indexCol, isSelected);
2904
- })
2905
- },
2906
- `row-${indexRow}`
2907
- );
2923
+ if (flagDisplay) {
2924
+ countDisplay++;
2925
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2926
+ "tr",
2927
+ {
2928
+ className: (0, import_classnames10.default)("r-row", { "fisrt-row": countDisplay === 0 }),
2929
+ children: contentColumns.map((col, indexCol) => {
2930
+ return renderContentCol(col, row, indexRow, indexCol, isSelected);
2931
+ })
2932
+ },
2933
+ `row-${indexRow}`
2934
+ );
2935
+ }
2908
2936
  }
2909
2937
  });
2910
2938
  };
package/dist/index.mjs CHANGED
@@ -1489,10 +1489,15 @@ var TableEdit = forwardRef2((props, ref) => {
1489
1489
  const lag = window.localStorage.getItem("i18nextLng");
1490
1490
  const lang = lag ? lag : "vi";
1491
1491
  const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
1492
- const searchClient = searchSetting?.searchEnable && !(editDisable || addDisable);
1492
+ const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
1493
1493
  let totalCount = dataSource.length;
1494
1494
  const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
1495
1495
  const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
1496
+ useEffect5(() => {
1497
+ if (pagingClient && pagingSetting.setCurrentPage && dataSource?.length / (pagingSetting?.pageSize ?? 1) > (pagingSetting.currentPage ?? 1)) {
1498
+ pagingSetting.setCurrentPage(1);
1499
+ }
1500
+ }, [dataSource]);
1496
1501
  useEffect5(() => {
1497
1502
  let indexFirst = -1;
1498
1503
  let indexlast = -1;
@@ -1543,6 +1548,23 @@ var TableEdit = forwardRef2((props, ref) => {
1543
1548
  setHeaderColumns(arrHeaderColumns);
1544
1549
  setContentColumns(arrContentColumns);
1545
1550
  }, [columns]);
1551
+ useEffect5(() => {
1552
+ const arrHeaderColumns = [];
1553
+ const arrContentColumns = [];
1554
+ let headerLevelRow = 0;
1555
+ if (levelCol) {
1556
+ headerLevelRow = levelCol;
1557
+ } else {
1558
+ headerLevelRow = stretchColumn(columns, 0);
1559
+ setLevelCol(headerLevelRow);
1560
+ }
1561
+ for (let i = 0; i < headerLevelRow; i++) {
1562
+ arrHeaderColumns.push([]);
1563
+ }
1564
+ getNestedChildren(columns, arrHeaderColumns, arrContentColumns, 0, headerLevelRow);
1565
+ setHeaderColumns(arrHeaderColumns);
1566
+ setContentColumns(arrContentColumns);
1567
+ }, [columns]);
1546
1568
  const getNestedChildren = (array, arrHeaderColumns, arrContentColumns, level, maxLevelRow) => {
1547
1569
  array.forEach((item) => {
1548
1570
  const ele = { ...item, visible: item.visible, rowspan: 1, index: 0 };
@@ -2145,7 +2167,7 @@ var TableEdit = forwardRef2((props, ref) => {
2145
2167
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2146
2168
  if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("select-100__control--menu-is-open").length > 0 || element.getElementsByClassName("select-200__control--menu-is-open").length > 0 || element.getElementsByClassName("select-300__control--menu-is-open").length > 0 || element.getElementsByClassName("select-400__control--menu-is-open").length > 0 || element.getElementsByClassName("select-500__control--menu-is-open").length > 0)) {
2147
2169
  if (indexRow > 1) {
2148
- if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && indexRow % (pagingSetting?.pageSize ?? 0) === 1) {
2170
+ if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && indexRow % (pagingSetting?.pageSize ?? 0) === 1 && pagingSetting?.setCurrentPage) {
2149
2171
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
2150
2172
  }
2151
2173
  setIndexFocus(indexRow - 2);
@@ -2167,7 +2189,7 @@ var TableEdit = forwardRef2((props, ref) => {
2167
2189
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2168
2190
  if (element && !(element.getElementsByClassName("select__control--menu-is-open").length > 0 || element.getElementsByClassName("select-100__control--menu-is-open").length > 0 || element.getElementsByClassName("select-200__control--menu-is-open").length > 0 || element.getElementsByClassName("select-300__control--menu-is-open").length > 0 || element.getElementsByClassName("select-400__control--menu-is-open").length > 0 || element.getElementsByClassName("select-500__control--menu-is-open").length > 0)) {
2169
2191
  if (indexRow < totalCount) {
2170
- if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2192
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0 && pagingSetting?.setCurrentPage) {
2171
2193
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2172
2194
  }
2173
2195
  setIndexFocus(indexRow);
@@ -2189,7 +2211,7 @@ var TableEdit = forwardRef2((props, ref) => {
2189
2211
  if (indexRow === totalCount) {
2190
2212
  moveIndexRowToNewPage();
2191
2213
  } else {
2192
- if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2214
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0 && pagingSetting?.setCurrentPage) {
2193
2215
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2194
2216
  }
2195
2217
  setIndexFocus(indexRow);
@@ -2212,7 +2234,7 @@ var TableEdit = forwardRef2((props, ref) => {
2212
2234
  if (indexRow === totalCount) {
2213
2235
  moveIndexRowToNewPage();
2214
2236
  } else {
2215
- if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2237
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0 && pagingSetting?.setCurrentPage) {
2216
2238
  pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2217
2239
  }
2218
2240
  setIndexFocus(indexRow);
@@ -2266,7 +2288,9 @@ var TableEdit = forwardRef2((props, ref) => {
2266
2288
  });
2267
2289
  const handleAdd = () => {
2268
2290
  changeDataSource(dataSource, true);
2269
- pagingSetting?.setCurrentPage(Math.floor(totalCount / (pagingSetting?.pageSize ?? 0)) + 1);
2291
+ if (pagingSetting?.setCurrentPage) {
2292
+ pagingSetting?.setCurrentPage(Math.floor(totalCount / (pagingSetting?.pageSize ?? 0)) + 1);
2293
+ }
2270
2294
  if (tableElement) {
2271
2295
  setIndexFocus(totalCount);
2272
2296
  setTimeout(() => {
@@ -2848,22 +2872,26 @@ var TableEdit = forwardRef2((props, ref) => {
2848
2872
  };
2849
2873
  const renderData = () => {
2850
2874
  totalCount = 0;
2875
+ let countDisplay = -1;
2851
2876
  return dataSource.map((row, indexRow) => {
2852
2877
  const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
2853
2878
  const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
2854
2879
  if (flagSearch) {
2855
2880
  totalCount += 1;
2856
2881
  const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
2857
- return flagDisplay && /* @__PURE__ */ jsx12(
2858
- "tr",
2859
- {
2860
- className: classnames6("r-row", { "last-row": indexRow === (pagingClient ? totalCount % (pagingSetting?.pageSize ?? 0) : totalCount - 1) }, { "fisrt-row": pagingClient ? indexRow % (pagingSetting?.pageSize ?? 0) === 0 : 0 }),
2861
- children: contentColumns.map((col, indexCol) => {
2862
- return renderContentCol(col, row, indexRow, indexCol, isSelected);
2863
- })
2864
- },
2865
- `row-${indexRow}`
2866
- );
2882
+ if (flagDisplay) {
2883
+ countDisplay++;
2884
+ return /* @__PURE__ */ jsx12(
2885
+ "tr",
2886
+ {
2887
+ className: classnames6("r-row", { "fisrt-row": countDisplay === 0 }),
2888
+ children: contentColumns.map((col, indexCol) => {
2889
+ return renderContentCol(col, row, indexRow, indexCol, isSelected);
2890
+ })
2891
+ },
2892
+ `row-${indexRow}`
2893
+ );
2894
+ }
2867
2895
  }
2868
2896
  });
2869
2897
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.4.2",
4
+ "version": "0.4.4",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",