react-table-edit 0.3.6 → 0.3.9

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 +27 -18
  2. package/dist/index.d.ts +27 -18
  3. package/dist/index.js +137 -108
  4. package/dist/index.mjs +137 -108
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -73,45 +73,54 @@ type IFToolbarOptions = {
73
73
  align: 'left' | 'right' | 'center';
74
74
  template: any;
75
75
  };
76
+ type IFTableEditPaging = {
77
+ allowPaging?: boolean;
78
+ currentPage?: number;
79
+ setCurrentPage?: any;
80
+ setPageSize?: any;
81
+ pageSize?: number;
82
+ totalItem?: number;
83
+ };
84
+ type IFTableEditButton = {
85
+ deleteAllDisable?: boolean;
86
+ insertAfterDisable?: boolean;
87
+ insertBeforeDisable?: boolean;
88
+ duplicateDisable?: boolean;
89
+ };
90
+ type IFTableEditToolbar = {
91
+ showTopToolbar?: boolean;
92
+ toolbarOptions?: IFToolbarOptions[];
93
+ toolbarBottomOptions?: IFToolbarOptions[];
94
+ showBottomToolbar?: boolean;
95
+ };
76
96
  type IFTableEditProps = {
97
+ idTable?: string;
77
98
  dataSource: any[];
78
99
  haveSum?: boolean;
79
100
  selectEnable?: boolean;
80
- showTopToolbar?: boolean;
81
- showBottomToolbar?: boolean;
82
101
  defaultValue?: any;
83
- toolbarOptions?: IFToolbarOptions[];
84
- toolbarBottomOptions?: IFToolbarOptions[];
85
102
  columns: IColumnTable[];
103
+ pagingSetting?: IFTableEditPaging;
104
+ buttonSetting?: IFTableEditButton;
105
+ toolbarSetting?: IFTableEditToolbar;
86
106
  setDataSource?: any;
87
107
  commandClick?: any;
88
108
  rowChange?: any;
89
109
  handleSelect?: any;
90
110
  dataSourceChange?: any;
91
- allowPaging?: boolean;
92
- pageSize?: number;
93
- totalItem?: number;
94
111
  height?: number;
95
112
  maxHeight?: number;
96
113
  minHeight?: number;
97
- currentPage?: number;
98
- setCurrentPage?: any;
99
- setPageSize?: any;
100
114
  searchTerm?: string;
101
- idTable?: string;
102
115
  setSearchTerm?: any;
103
116
  selectedItem?: any;
104
117
  setSelectedItem?: any;
105
118
  searchEnable?: boolean;
106
- editDisable?: boolean;
107
- addDisable?: boolean;
108
- deleteAllDisable?: boolean;
109
- insertAfterDisable?: boolean;
110
- insertBeforeDisable?: boolean;
111
- duplicateDisable?: boolean;
112
119
  isMulti?: boolean;
113
120
  decimalSeparator?: string;
114
121
  thousandSeparator?: string;
122
+ editDisable?: boolean;
123
+ addDisable?: boolean;
115
124
  };
116
125
  type IFPageSize = {
117
126
  pageSize: number;
@@ -169,4 +178,4 @@ declare const objSymbolThousand: any;
169
178
  declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
170
179
  declare const roundNumber: (num: number, fraction: number) => number;
171
180
 
172
- 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, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
181
+ export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
package/dist/index.d.ts CHANGED
@@ -73,45 +73,54 @@ type IFToolbarOptions = {
73
73
  align: 'left' | 'right' | 'center';
74
74
  template: any;
75
75
  };
76
+ type IFTableEditPaging = {
77
+ allowPaging?: boolean;
78
+ currentPage?: number;
79
+ setCurrentPage?: any;
80
+ setPageSize?: any;
81
+ pageSize?: number;
82
+ totalItem?: number;
83
+ };
84
+ type IFTableEditButton = {
85
+ deleteAllDisable?: boolean;
86
+ insertAfterDisable?: boolean;
87
+ insertBeforeDisable?: boolean;
88
+ duplicateDisable?: boolean;
89
+ };
90
+ type IFTableEditToolbar = {
91
+ showTopToolbar?: boolean;
92
+ toolbarOptions?: IFToolbarOptions[];
93
+ toolbarBottomOptions?: IFToolbarOptions[];
94
+ showBottomToolbar?: boolean;
95
+ };
76
96
  type IFTableEditProps = {
97
+ idTable?: string;
77
98
  dataSource: any[];
78
99
  haveSum?: boolean;
79
100
  selectEnable?: boolean;
80
- showTopToolbar?: boolean;
81
- showBottomToolbar?: boolean;
82
101
  defaultValue?: any;
83
- toolbarOptions?: IFToolbarOptions[];
84
- toolbarBottomOptions?: IFToolbarOptions[];
85
102
  columns: IColumnTable[];
103
+ pagingSetting?: IFTableEditPaging;
104
+ buttonSetting?: IFTableEditButton;
105
+ toolbarSetting?: IFTableEditToolbar;
86
106
  setDataSource?: any;
87
107
  commandClick?: any;
88
108
  rowChange?: any;
89
109
  handleSelect?: any;
90
110
  dataSourceChange?: any;
91
- allowPaging?: boolean;
92
- pageSize?: number;
93
- totalItem?: number;
94
111
  height?: number;
95
112
  maxHeight?: number;
96
113
  minHeight?: number;
97
- currentPage?: number;
98
- setCurrentPage?: any;
99
- setPageSize?: any;
100
114
  searchTerm?: string;
101
- idTable?: string;
102
115
  setSearchTerm?: any;
103
116
  selectedItem?: any;
104
117
  setSelectedItem?: any;
105
118
  searchEnable?: boolean;
106
- editDisable?: boolean;
107
- addDisable?: boolean;
108
- deleteAllDisable?: boolean;
109
- insertAfterDisable?: boolean;
110
- insertBeforeDisable?: boolean;
111
- duplicateDisable?: boolean;
112
119
  isMulti?: boolean;
113
120
  decimalSeparator?: string;
114
121
  thousandSeparator?: string;
122
+ editDisable?: boolean;
123
+ addDisable?: boolean;
115
124
  };
116
125
  type IFPageSize = {
117
126
  pageSize: number;
@@ -169,4 +178,4 @@ declare const objSymbolThousand: any;
169
178
  declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
170
179
  declare const roundNumber: (num: number, fraction: number) => number;
171
180
 
172
- 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, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
181
+ export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
package/dist/index.js CHANGED
@@ -1488,22 +1488,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1488
1488
  commandClick,
1489
1489
  dataSourceChange,
1490
1490
  rowChange,
1491
- allowPaging,
1492
- pageSize,
1493
- totalItem,
1494
- currentPage,
1495
- setCurrentPage,
1496
- setPageSize,
1491
+ pagingSetting,
1497
1492
  setDataSource,
1498
1493
  height,
1499
1494
  maxHeight,
1500
1495
  minHeight,
1501
1496
  defaultValue,
1502
1497
  haveSum,
1503
- toolbarOptions,
1504
- toolbarBottomOptions,
1505
- showTopToolbar,
1506
- showBottomToolbar,
1498
+ toolbarSetting,
1507
1499
  searchTerm,
1508
1500
  setSearchTerm,
1509
1501
  searchEnable,
@@ -1512,10 +1504,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1512
1504
  selectEnable,
1513
1505
  editDisable,
1514
1506
  addDisable,
1515
- deleteAllDisable,
1516
- insertAfterDisable,
1517
- insertBeforeDisable,
1518
- duplicateDisable,
1507
+ buttonSetting,
1519
1508
  decimalSeparator = ",",
1520
1509
  thousandSeparator = ".",
1521
1510
  handleSelect,
@@ -1541,6 +1530,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1541
1530
  const gridRef = (0, import_react12.useRef)();
1542
1531
  const lag = window.localStorage.getItem("i18nextLng");
1543
1532
  const lang = lag ? lag : "vi";
1533
+ const pagingClient = pagingSetting?.allowPaging && !(editDisable || addDisable);
1534
+ const totalCount = dataSource.length;
1544
1535
  const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
1545
1536
  const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
1546
1537
  (0, import_react12.useEffect)(() => {
@@ -1631,7 +1622,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1631
1622
  };
1632
1623
  const handleDataChange = (row, col, indexRow) => {
1633
1624
  if (rowChange) {
1634
- const rs = rowChange(row, indexRow, col.field);
1625
+ const rs = rowChange(dataSource, row, indexRow, col.field);
1635
1626
  if (rs && rs?.then) {
1636
1627
  rs.then(() => {
1637
1628
  for (let index = 0; index <= contentColumns.length; index++) {
@@ -1695,8 +1686,8 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1695
1686
  };
1696
1687
  const defaultToolbarOption = searchEnable === true ? [{ template: searchTemplate, align: "left" }] : [];
1697
1688
  let toolbarTopOption = [];
1698
- if (toolbarOptions) {
1699
- toolbarTopOption = [...defaultToolbarOption, ...toolbarOptions];
1689
+ if (toolbarSetting?.toolbarOptions) {
1690
+ toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
1700
1691
  } else {
1701
1692
  toolbarTopOption = [...defaultToolbarOption];
1702
1693
  }
@@ -1712,7 +1703,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
1712
1703
  onChange: (val) => {
1713
1704
  row[col.field] = val.target.value;
1714
1705
  if (col.callback) {
1715
- col.callback(val.target.value, indexRow);
1706
+ col.callback(row, val.target.value, indexRow);
1716
1707
  }
1717
1708
  handleDataChange(row, col, indexRow);
1718
1709
  },
@@ -2004,7 +1995,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2004
1995
  checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
2005
1996
  },
2006
1997
  onPaste: (e) => {
2007
- if (showBottomToolbar && !editDisable && !addDisable) {
1998
+ if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
2008
1999
  pasteDataFromExcel(indexRow, indexCol);
2009
2000
  e.preventDefault();
2010
2001
  }
@@ -2086,7 +2077,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2086
2077
  checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
2087
2078
  },
2088
2079
  onPaste: (e) => {
2089
- if (showBottomToolbar && !editDisable && !addDisable) {
2080
+ if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
2090
2081
  pasteDataFromExcel(indexRow, indexCol);
2091
2082
  e.preventDefault();
2092
2083
  }
@@ -2124,6 +2115,27 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2124
2115
  );
2125
2116
  }) }) });
2126
2117
  };
2118
+ const moveIndexRowToNewPage = () => {
2119
+ changeDataSource(dataSource, true);
2120
+ if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
2121
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
2122
+ }
2123
+ if (tableElement) {
2124
+ setIndexFocus(totalCount);
2125
+ setTimeout(() => {
2126
+ tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2127
+ const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
2128
+ if (element) {
2129
+ if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2130
+ element.getElementsByTagName("input")[0]?.focus();
2131
+ } else {
2132
+ element.focus();
2133
+ element.scrollIntoView();
2134
+ }
2135
+ }
2136
+ }, 100);
2137
+ }
2138
+ };
2127
2139
  const checkKeyDown = (e, row, col, indexRow, indexCol) => {
2128
2140
  if (e.code === "ArrowRight") {
2129
2141
  let newIndexCol = -1;
@@ -2145,8 +2157,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2145
2157
  e.preventDefault();
2146
2158
  return e.code;
2147
2159
  }
2148
- }
2149
- if (e.code === "ArrowLeft") {
2160
+ } else if (e.code === "ArrowLeft") {
2150
2161
  let newIndexCol = -1;
2151
2162
  for (let i = indexCol - 2; i >= 0; i--) {
2152
2163
  if (contentColumns[i].editEnable && contentColumns[i].visible !== false && (!contentColumns[i].disabledCondition || !contentColumns[i].disabledCondition(row))) {
@@ -2166,11 +2177,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2166
2177
  e.preventDefault();
2167
2178
  return e.code;
2168
2179
  }
2169
- }
2170
- if (e.code === "ArrowUp") {
2180
+ } else if (e.code === "ArrowUp") {
2171
2181
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2172
2182
  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)) {
2173
2183
  if (indexRow > 1) {
2184
+ if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && indexRow % (pagingSetting?.pageSize ?? 0) === 1) {
2185
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
2186
+ }
2174
2187
  setIndexFocus(indexRow - 2);
2175
2188
  setTimeout(() => {
2176
2189
  const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow - 1}`);
@@ -2186,11 +2199,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2186
2199
  return e.code;
2187
2200
  }
2188
2201
  }
2189
- }
2190
- if (e.code === "ArrowDown") {
2202
+ } else if (e.code === "ArrowDown") {
2191
2203
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2192
2204
  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)) {
2193
- if (indexRow < dataSource?.length) {
2205
+ if (indexRow < totalCount) {
2206
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2207
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2208
+ }
2194
2209
  setIndexFocus(indexRow);
2195
2210
  setTimeout(() => {
2196
2211
  const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
@@ -2206,37 +2221,36 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2206
2221
  return e.code;
2207
2222
  }
2208
2223
  }
2209
- }
2210
- if (e.code === "Tab" && indexCol === columnLastEdit) {
2211
- if (indexRow === dataSource?.length) {
2212
- changeDataSource(dataSource, true);
2213
- if (tableElement) {
2214
- setTimeout(() => {
2215
- tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2216
- }, 100);
2217
- }
2218
- if (!(!editDisable && !addDisable)) {
2219
- return false;
2224
+ } else if (e.code === "Tab" && indexCol === columnLastEdit) {
2225
+ if (indexRow === totalCount) {
2226
+ moveIndexRowToNewPage();
2227
+ } else {
2228
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2229
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2220
2230
  }
2221
- }
2222
- setIndexFocus(indexRow);
2223
- setTimeout(() => {
2224
- const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
2225
- if (element) {
2226
- if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2227
- element.getElementsByTagName("input")[0]?.focus();
2228
- } else {
2229
- element.focus();
2230
- element.scrollIntoView();
2231
+ setIndexFocus(indexRow);
2232
+ setTimeout(() => {
2233
+ const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
2234
+ if (element) {
2235
+ if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2236
+ element.getElementsByTagName("input")[0]?.focus();
2237
+ } else {
2238
+ element.focus();
2239
+ }
2231
2240
  }
2232
- }
2233
- }, 100);
2241
+ }, 100);
2242
+ }
2234
2243
  e.preventDefault();
2235
- }
2236
- if ((e.code === "Enter" || e.code === "NumpadEnter") && (!editDisable && !addDisable)) {
2244
+ return e.code;
2245
+ } else if ((e.code === "Enter" || e.code === "NumpadEnter") && (!editDisable && !addDisable)) {
2237
2246
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2238
2247
  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)) {
2239
- if (indexRow < dataSource?.length) {
2248
+ if (indexRow === totalCount) {
2249
+ moveIndexRowToNewPage();
2250
+ } else {
2251
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2252
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2253
+ }
2240
2254
  setIndexFocus(indexRow);
2241
2255
  setTimeout(() => {
2242
2256
  const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
@@ -2248,14 +2262,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2248
2262
  }
2249
2263
  }
2250
2264
  }, 100);
2251
- } else {
2252
- handleAdd();
2253
2265
  }
2254
2266
  e.preventDefault();
2255
2267
  return e.code;
2256
2268
  }
2257
- }
2258
- if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable)) {
2269
+ } else if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable)) {
2259
2270
  handleDuplicate(dataSource[indexFocus ?? -1], indexRow);
2260
2271
  e.preventDefault();
2261
2272
  return e.code;
@@ -2263,16 +2274,22 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2263
2274
  return "";
2264
2275
  };
2265
2276
  const onChangePage = (args) => {
2266
- if (args.newProp.currentPage === args.oldProp.currentPage) {
2267
- return;
2277
+ if (pagingSetting?.setCurrentPage) {
2278
+ if (args.newProp.currentPage === args.oldProp.currentPage) {
2279
+ return;
2280
+ }
2281
+ pagingSetting.setCurrentPage(args.currentPage);
2268
2282
  }
2269
- setCurrentPage(args.currentPage);
2270
2283
  };
2271
2284
  const onChangePageSize = (args) => {
2272
- if (allowPaging) {
2273
- if (pageSize !== args.pageSize) {
2274
- setPageSize(args.pageSize);
2275
- setCurrentPage(1);
2285
+ if (pagingSetting?.allowPaging) {
2286
+ if (pagingSetting?.pageSize !== args.pageSize) {
2287
+ if (pagingSetting?.setPageSize) {
2288
+ pagingSetting.setPageSize(args.pageSize);
2289
+ }
2290
+ if (pagingSetting?.setCurrentPage) {
2291
+ pagingSetting.setCurrentPage(1);
2292
+ }
2276
2293
  }
2277
2294
  }
2278
2295
  };
@@ -2285,11 +2302,12 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2285
2302
  });
2286
2303
  const handleAdd = () => {
2287
2304
  changeDataSource(dataSource, true);
2305
+ pagingSetting?.setCurrentPage(Math.floor(totalCount / (pagingSetting?.pageSize ?? 0)) + 1);
2288
2306
  if (tableElement) {
2289
- setIndexFocus(dataSource?.length);
2307
+ setIndexFocus(totalCount);
2290
2308
  setTimeout(() => {
2291
2309
  tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2292
- const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${dataSource?.length + 1}`);
2310
+ const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
2293
2311
  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)) {
2294
2312
  if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2295
2313
  element.getElementsByTagName("input")[0]?.focus();
@@ -2300,26 +2318,21 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2300
2318
  }, 100);
2301
2319
  }
2302
2320
  };
2303
- const deleteAll = () => {
2304
- if (!editDisable && !addDisable) {
2305
- setIndexFocus(-1);
2306
- changeDataSource([], false);
2307
- }
2308
- };
2309
2321
  const handleDuplicate = (data, index) => {
2310
- if (showBottomToolbar && !editDisable && !addDisable) {
2322
+ if (toolbarSetting?.showBottomToolbar && !buttonSetting?.duplicateDisable && !editDisable && !addDisable) {
2311
2323
  if (fieldKey) {
2312
- const newdata = { ...data };
2313
2324
  fieldUniKey.forEach((item) => {
2314
- newdata[item] = defaultValue[item];
2325
+ data[item] = defaultValue[item];
2315
2326
  });
2316
- newdata[fieldKey] = defaultValue[fieldKey];
2317
- dataSource?.splice(index, 0, newdata);
2327
+ data[fieldKey] = defaultValue[fieldKey];
2328
+ }
2329
+ if (pagingClient) {
2330
+ dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + index, 0, { ...data });
2318
2331
  } else {
2319
- dataSource?.splice(index, 0, { ...data });
2332
+ dataSource.splice(index, 0, data);
2320
2333
  }
2321
2334
  changeDataSource(dataSource);
2322
- if (tableElement && index === dataSource?.length) {
2335
+ if (tableElement && index === totalCount) {
2323
2336
  setTimeout(() => {
2324
2337
  tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2325
2338
  }, 100);
@@ -2327,10 +2340,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2327
2340
  }
2328
2341
  };
2329
2342
  const handleInsertAfter = () => {
2330
- if (showBottomToolbar && !editDisable && !addDisable) {
2331
- dataSource?.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
2343
+ if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertAfterDisable && !editDisable && !addDisable) {
2344
+ if (pagingClient) {
2345
+ dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + (indexFocus ?? -1) + 1, 0, { ...{ ...defaultValue } });
2346
+ } else {
2347
+ dataSource.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
2348
+ }
2332
2349
  changeDataSource(dataSource);
2333
- if (tableElement && indexFocus === dataSource?.length) {
2350
+ if (tableElement && indexFocus === totalCount) {
2334
2351
  setTimeout(() => {
2335
2352
  tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2336
2353
  }, 100);
@@ -2338,16 +2355,26 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2338
2355
  }
2339
2356
  };
2340
2357
  const handleInsertBefore = () => {
2341
- if (showBottomToolbar && !editDisable && !addDisable) {
2342
- dataSource?.splice(indexFocus ?? -1, 0, { ...defaultValue });
2358
+ if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertBeforeDisable && !editDisable && !addDisable) {
2359
+ if (pagingClient) {
2360
+ dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + (indexFocus ?? -1), 0, { ...{ ...defaultValue } });
2361
+ } else {
2362
+ dataSource.splice(indexFocus ?? -1, 0, { ...defaultValue });
2363
+ }
2343
2364
  changeDataSource(dataSource);
2344
2365
  }
2345
2366
  };
2346
2367
  const handleDeleteAll = () => {
2347
- if (showBottomToolbar && !editDisable && !addDisable) {
2368
+ if (toolbarSetting?.showBottomToolbar && !buttonSetting?.deleteAllDisable && !editDisable && !addDisable) {
2348
2369
  messageBoxConfirmDelete(t, deleteAll, "");
2349
2370
  }
2350
2371
  };
2372
+ const deleteAll = () => {
2373
+ if (!editDisable && !addDisable) {
2374
+ setIndexFocus(-1);
2375
+ changeDataSource([], false);
2376
+ }
2377
+ };
2351
2378
  const pasteDataFromExcel = async (row, col) => {
2352
2379
  const clipboard = await navigator.clipboard.readText();
2353
2380
  const arrayRow = clipboard.trimEnd().split("\n");
@@ -2356,7 +2383,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2356
2383
  let dataRow = dataSource[row + indexRow];
2357
2384
  if (!dataRow) {
2358
2385
  dataRow = { ...defaultValue };
2359
- dataSource?.push(dataRow);
2386
+ dataSource.push(dataRow);
2360
2387
  }
2361
2388
  arrayCol.forEach((element, index) => {
2362
2389
  const column = contentColumns[col + index];
@@ -2373,9 +2400,11 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2373
2400
  if (!editDisable && !addDisable && setDataSource) {
2374
2401
  if (haveNew) {
2375
2402
  data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
2403
+ setDataSource([...data]);
2404
+ } else {
2405
+ setDataSource([...data]);
2376
2406
  }
2377
2407
  }
2378
- setDataSource([...data]);
2379
2408
  };
2380
2409
  (0, import_react12.useEffect)(() => {
2381
2410
  setIndexFocus(-1);
@@ -2670,17 +2699,16 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2670
2699
  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2671
2700
  import_reactstrap8.Input,
2672
2701
  {
2673
- checked: selectedRows?.length >= dataSource?.length && dataSource?.length > 0,
2702
+ checked: totalCount > 0 && selectedRows?.length >= totalCount,
2674
2703
  type: "checkbox",
2675
2704
  className: (0, import_classnames10.default)("cursor-pointer", { "d-none": !isMulti }),
2676
2705
  style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
2677
2706
  onChange: (e) => {
2678
2707
  if (selectEnable) {
2679
2708
  if (e.target.checked) {
2680
- const arr = dataSource?.map((item) => {
2709
+ setSelectedRows(dataSource.map((item) => {
2681
2710
  return item;
2682
- });
2683
- setSelectedRows(arr);
2711
+ }));
2684
2712
  } else {
2685
2713
  setSelectedRows([]);
2686
2714
  }
@@ -2787,7 +2815,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2787
2815
  maxWidth: col.maxWidth,
2788
2816
  textAlign: col.textAlign ? col.textAlign : "left"
2789
2817
  },
2790
- 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) {
2818
+ 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) {
2791
2819
  return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
2792
2820
  }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
2793
2821
  }
@@ -2811,22 +2839,22 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2811
2839
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-toolbar-left", children: [
2812
2840
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.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") }) }),
2813
2841
  (indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
2814
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.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: () => {
2842
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_reactstrap8.Button, { color: "success", outline: true, onClick: () => {
2815
2843
  handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
2816
2844
  }, className: "d-flex", children: t("Duplicate") }) }),
2817
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.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") }) }),
2818
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.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") }) })
2845
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.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") }) }),
2846
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.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") }) })
2819
2847
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: " " }),
2820
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || 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") }) }),
2821
- toolbarBottomOptions?.map((item, index) => {
2848
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.default)("r-toolbar-item", { "d-none": editDisable || buttonSetting?.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") }) }),
2849
+ toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
2822
2850
  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}`) : "";
2823
2851
  })
2824
2852
  ] }),
2825
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-center", children: toolbarBottomOptions?.map((item, index) => {
2853
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
2826
2854
  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}`) : "";
2827
2855
  }) }),
2828
2856
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-toolbar-right", children: [
2829
- toolbarBottomOptions?.map((item, index) => {
2857
+ toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
2830
2858
  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}`) : "";
2831
2859
  }),
2832
2860
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames10.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) }) }),
@@ -2845,19 +2873,20 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2845
2873
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react12.Fragment, { children: [
2846
2874
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "react-table-edit", children: [
2847
2875
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
2848
- showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
2876
+ toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
2849
2877
  /* @__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: [
2850
2878
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
2851
2879
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
2852
2880
  return renderHeaderCol(col, index, indexParent);
2853
2881
  }) }, indexParent);
2854
2882
  }) }),
2855
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
2883
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "r-gridcontent", children: dataSource.map((row, indexRow) => {
2856
2884
  const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
2857
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2885
+ const flagDisplay = !pagingClient || indexRow + 1 > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && indexRow < (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
2886
+ return flagDisplay && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2858
2887
  "tr",
2859
2888
  {
2860
- className: (0, import_classnames10.default)("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
2889
+ className: (0, import_classnames10.default)("r-row", { "last-row": indexRow === (pagingClient ? totalCount % (pagingSetting?.pageSize ?? 0) : totalCount - 1) }, { "fisrt-row": indexRow === 0 }),
2861
2890
  children: contentColumns.map((col, indexCol) => {
2862
2891
  return renderContentCol(col, row, indexRow, indexCol, isSelected);
2863
2892
  })
@@ -2869,17 +2898,17 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
2869
2898
  return renderFooterCol(col, index);
2870
2899
  }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}) })
2871
2900
  ] }) }),
2872
- showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {})
2901
+ toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {})
2873
2902
  ] }),
2874
- allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2903
+ pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
2875
2904
  import_ej2_react_grids.PagerComponent,
2876
2905
  {
2877
2906
  locale: lang,
2878
2907
  click: onChangePage,
2879
- pageSize,
2880
- currentPage,
2908
+ pageSize: pagingSetting?.pageSize,
2909
+ currentPage: pagingSetting?.currentPage,
2881
2910
  pageSizes: [20, 30, 50, 100],
2882
- totalRecordsCount: totalItem ? totalItem : void 0,
2911
+ totalRecordsCount: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
2883
2912
  pageCount: 5,
2884
2913
  dropDownChanged: onChangePageSize
2885
2914
  }
package/dist/index.mjs CHANGED
@@ -1447,22 +1447,14 @@ var TableEdit = forwardRef2((props, ref) => {
1447
1447
  commandClick,
1448
1448
  dataSourceChange,
1449
1449
  rowChange,
1450
- allowPaging,
1451
- pageSize,
1452
- totalItem,
1453
- currentPage,
1454
- setCurrentPage,
1455
- setPageSize,
1450
+ pagingSetting,
1456
1451
  setDataSource,
1457
1452
  height,
1458
1453
  maxHeight,
1459
1454
  minHeight,
1460
1455
  defaultValue,
1461
1456
  haveSum,
1462
- toolbarOptions,
1463
- toolbarBottomOptions,
1464
- showTopToolbar,
1465
- showBottomToolbar,
1457
+ toolbarSetting,
1466
1458
  searchTerm,
1467
1459
  setSearchTerm,
1468
1460
  searchEnable,
@@ -1471,10 +1463,7 @@ var TableEdit = forwardRef2((props, ref) => {
1471
1463
  selectEnable,
1472
1464
  editDisable,
1473
1465
  addDisable,
1474
- deleteAllDisable,
1475
- insertAfterDisable,
1476
- insertBeforeDisable,
1477
- duplicateDisable,
1466
+ buttonSetting,
1478
1467
  decimalSeparator = ",",
1479
1468
  thousandSeparator = ".",
1480
1469
  handleSelect,
@@ -1500,6 +1489,8 @@ var TableEdit = forwardRef2((props, ref) => {
1500
1489
  const gridRef = useRef2();
1501
1490
  const lag = window.localStorage.getItem("i18nextLng");
1502
1491
  const lang = lag ? lag : "vi";
1492
+ const pagingClient = pagingSetting?.allowPaging && !(editDisable || addDisable);
1493
+ const totalCount = dataSource.length;
1503
1494
  const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
1504
1495
  const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
1505
1496
  useEffect5(() => {
@@ -1590,7 +1581,7 @@ var TableEdit = forwardRef2((props, ref) => {
1590
1581
  };
1591
1582
  const handleDataChange = (row, col, indexRow) => {
1592
1583
  if (rowChange) {
1593
- const rs = rowChange(row, indexRow, col.field);
1584
+ const rs = rowChange(dataSource, row, indexRow, col.field);
1594
1585
  if (rs && rs?.then) {
1595
1586
  rs.then(() => {
1596
1587
  for (let index = 0; index <= contentColumns.length; index++) {
@@ -1654,8 +1645,8 @@ var TableEdit = forwardRef2((props, ref) => {
1654
1645
  };
1655
1646
  const defaultToolbarOption = searchEnable === true ? [{ template: searchTemplate, align: "left" }] : [];
1656
1647
  let toolbarTopOption = [];
1657
- if (toolbarOptions) {
1658
- toolbarTopOption = [...defaultToolbarOption, ...toolbarOptions];
1648
+ if (toolbarSetting?.toolbarOptions) {
1649
+ toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
1659
1650
  } else {
1660
1651
  toolbarTopOption = [...defaultToolbarOption];
1661
1652
  }
@@ -1671,7 +1662,7 @@ var TableEdit = forwardRef2((props, ref) => {
1671
1662
  onChange: (val) => {
1672
1663
  row[col.field] = val.target.value;
1673
1664
  if (col.callback) {
1674
- col.callback(val.target.value, indexRow);
1665
+ col.callback(row, val.target.value, indexRow);
1675
1666
  }
1676
1667
  handleDataChange(row, col, indexRow);
1677
1668
  },
@@ -1963,7 +1954,7 @@ var TableEdit = forwardRef2((props, ref) => {
1963
1954
  checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
1964
1955
  },
1965
1956
  onPaste: (e) => {
1966
- if (showBottomToolbar && !editDisable && !addDisable) {
1957
+ if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
1967
1958
  pasteDataFromExcel(indexRow, indexCol);
1968
1959
  e.preventDefault();
1969
1960
  }
@@ -2045,7 +2036,7 @@ var TableEdit = forwardRef2((props, ref) => {
2045
2036
  checkKeyDown(e, row, col, indexRow + 1, indexCol + 1);
2046
2037
  },
2047
2038
  onPaste: (e) => {
2048
- if (showBottomToolbar && !editDisable && !addDisable) {
2039
+ if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
2049
2040
  pasteDataFromExcel(indexRow, indexCol);
2050
2041
  e.preventDefault();
2051
2042
  }
@@ -2083,6 +2074,27 @@ var TableEdit = forwardRef2((props, ref) => {
2083
2074
  );
2084
2075
  }) }) });
2085
2076
  };
2077
+ const moveIndexRowToNewPage = () => {
2078
+ changeDataSource(dataSource, true);
2079
+ if (pagingClient && pagingSetting?.setCurrentPage && totalCount % (pagingSetting?.pageSize ?? 0) === 0) {
2080
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 0) + 1);
2081
+ }
2082
+ if (tableElement) {
2083
+ setIndexFocus(totalCount);
2084
+ setTimeout(() => {
2085
+ tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2086
+ const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
2087
+ if (element) {
2088
+ if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2089
+ element.getElementsByTagName("input")[0]?.focus();
2090
+ } else {
2091
+ element.focus();
2092
+ element.scrollIntoView();
2093
+ }
2094
+ }
2095
+ }, 100);
2096
+ }
2097
+ };
2086
2098
  const checkKeyDown = (e, row, col, indexRow, indexCol) => {
2087
2099
  if (e.code === "ArrowRight") {
2088
2100
  let newIndexCol = -1;
@@ -2104,8 +2116,7 @@ var TableEdit = forwardRef2((props, ref) => {
2104
2116
  e.preventDefault();
2105
2117
  return e.code;
2106
2118
  }
2107
- }
2108
- if (e.code === "ArrowLeft") {
2119
+ } else if (e.code === "ArrowLeft") {
2109
2120
  let newIndexCol = -1;
2110
2121
  for (let i = indexCol - 2; i >= 0; i--) {
2111
2122
  if (contentColumns[i].editEnable && contentColumns[i].visible !== false && (!contentColumns[i].disabledCondition || !contentColumns[i].disabledCondition(row))) {
@@ -2125,11 +2136,13 @@ var TableEdit = forwardRef2((props, ref) => {
2125
2136
  e.preventDefault();
2126
2137
  return e.code;
2127
2138
  }
2128
- }
2129
- if (e.code === "ArrowUp") {
2139
+ } else if (e.code === "ArrowUp") {
2130
2140
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2131
2141
  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)) {
2132
2142
  if (indexRow > 1) {
2143
+ if (pagingClient && (pagingSetting?.currentPage ?? 0) !== 1 && indexRow % (pagingSetting?.pageSize ?? 0) === 1) {
2144
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) - 1);
2145
+ }
2133
2146
  setIndexFocus(indexRow - 2);
2134
2147
  setTimeout(() => {
2135
2148
  const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow - 1}`);
@@ -2145,11 +2158,13 @@ var TableEdit = forwardRef2((props, ref) => {
2145
2158
  return e.code;
2146
2159
  }
2147
2160
  }
2148
- }
2149
- if (e.code === "ArrowDown") {
2161
+ } else if (e.code === "ArrowDown") {
2150
2162
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2151
2163
  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)) {
2152
- if (indexRow < dataSource?.length) {
2164
+ if (indexRow < totalCount) {
2165
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2166
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2167
+ }
2153
2168
  setIndexFocus(indexRow);
2154
2169
  setTimeout(() => {
2155
2170
  const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
@@ -2165,37 +2180,36 @@ var TableEdit = forwardRef2((props, ref) => {
2165
2180
  return e.code;
2166
2181
  }
2167
2182
  }
2168
- }
2169
- if (e.code === "Tab" && indexCol === columnLastEdit) {
2170
- if (indexRow === dataSource?.length) {
2171
- changeDataSource(dataSource, true);
2172
- if (tableElement) {
2173
- setTimeout(() => {
2174
- tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2175
- }, 100);
2176
- }
2177
- if (!(!editDisable && !addDisable)) {
2178
- return false;
2183
+ } else if (e.code === "Tab" && indexCol === columnLastEdit) {
2184
+ if (indexRow === totalCount) {
2185
+ moveIndexRowToNewPage();
2186
+ } else {
2187
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2188
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2179
2189
  }
2180
- }
2181
- setIndexFocus(indexRow);
2182
- setTimeout(() => {
2183
- const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${indexRow + 1}`);
2184
- if (element) {
2185
- if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2186
- element.getElementsByTagName("input")[0]?.focus();
2187
- } else {
2188
- element.focus();
2189
- element.scrollIntoView();
2190
+ setIndexFocus(indexRow);
2191
+ setTimeout(() => {
2192
+ const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
2193
+ if (element) {
2194
+ if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2195
+ element.getElementsByTagName("input")[0]?.focus();
2196
+ } else {
2197
+ element.focus();
2198
+ }
2190
2199
  }
2191
- }
2192
- }, 100);
2200
+ }, 100);
2201
+ }
2193
2202
  e.preventDefault();
2194
- }
2195
- if ((e.code === "Enter" || e.code === "NumpadEnter") && (!editDisable && !addDisable)) {
2203
+ return e.code;
2204
+ } else if ((e.code === "Enter" || e.code === "NumpadEnter") && (!editDisable && !addDisable)) {
2196
2205
  const element = document.getElementById(`${idTable}-col${indexCol}-row${indexRow}`);
2197
2206
  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)) {
2198
- if (indexRow < dataSource?.length) {
2207
+ if (indexRow === totalCount) {
2208
+ moveIndexRowToNewPage();
2209
+ } else {
2210
+ if (pagingClient && indexRow % (pagingSetting?.pageSize ?? 0) === 0) {
2211
+ pagingSetting?.setCurrentPage((pagingSetting?.currentPage ?? 1) + 1);
2212
+ }
2199
2213
  setIndexFocus(indexRow);
2200
2214
  setTimeout(() => {
2201
2215
  const element2 = document.getElementById(`${idTable}-col${indexCol}-row${indexRow + 1}`);
@@ -2207,14 +2221,11 @@ var TableEdit = forwardRef2((props, ref) => {
2207
2221
  }
2208
2222
  }
2209
2223
  }, 100);
2210
- } else {
2211
- handleAdd();
2212
2224
  }
2213
2225
  e.preventDefault();
2214
2226
  return e.code;
2215
2227
  }
2216
- }
2217
- if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable)) {
2228
+ } else if (e.code === "KeyD" && e.ctrlKey == true && (!editDisable && !addDisable)) {
2218
2229
  handleDuplicate(dataSource[indexFocus ?? -1], indexRow);
2219
2230
  e.preventDefault();
2220
2231
  return e.code;
@@ -2222,16 +2233,22 @@ var TableEdit = forwardRef2((props, ref) => {
2222
2233
  return "";
2223
2234
  };
2224
2235
  const onChangePage = (args) => {
2225
- if (args.newProp.currentPage === args.oldProp.currentPage) {
2226
- return;
2236
+ if (pagingSetting?.setCurrentPage) {
2237
+ if (args.newProp.currentPage === args.oldProp.currentPage) {
2238
+ return;
2239
+ }
2240
+ pagingSetting.setCurrentPage(args.currentPage);
2227
2241
  }
2228
- setCurrentPage(args.currentPage);
2229
2242
  };
2230
2243
  const onChangePageSize = (args) => {
2231
- if (allowPaging) {
2232
- if (pageSize !== args.pageSize) {
2233
- setPageSize(args.pageSize);
2234
- setCurrentPage(1);
2244
+ if (pagingSetting?.allowPaging) {
2245
+ if (pagingSetting?.pageSize !== args.pageSize) {
2246
+ if (pagingSetting?.setPageSize) {
2247
+ pagingSetting.setPageSize(args.pageSize);
2248
+ }
2249
+ if (pagingSetting?.setCurrentPage) {
2250
+ pagingSetting.setCurrentPage(1);
2251
+ }
2235
2252
  }
2236
2253
  }
2237
2254
  };
@@ -2244,11 +2261,12 @@ var TableEdit = forwardRef2((props, ref) => {
2244
2261
  });
2245
2262
  const handleAdd = () => {
2246
2263
  changeDataSource(dataSource, true);
2264
+ pagingSetting?.setCurrentPage(Math.floor(totalCount / (pagingSetting?.pageSize ?? 0)) + 1);
2247
2265
  if (tableElement) {
2248
- setIndexFocus(dataSource?.length);
2266
+ setIndexFocus(totalCount);
2249
2267
  setTimeout(() => {
2250
2268
  tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2251
- const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${dataSource?.length + 1}`);
2269
+ const element = document.getElementById(`${idTable}-col${columnFistEdit}-row${totalCount + 1}`);
2252
2270
  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)) {
2253
2271
  if (element.className.includes("react-select") || element.className.includes("form-edit")) {
2254
2272
  element.getElementsByTagName("input")[0]?.focus();
@@ -2259,26 +2277,21 @@ var TableEdit = forwardRef2((props, ref) => {
2259
2277
  }, 100);
2260
2278
  }
2261
2279
  };
2262
- const deleteAll = () => {
2263
- if (!editDisable && !addDisable) {
2264
- setIndexFocus(-1);
2265
- changeDataSource([], false);
2266
- }
2267
- };
2268
2280
  const handleDuplicate = (data, index) => {
2269
- if (showBottomToolbar && !editDisable && !addDisable) {
2281
+ if (toolbarSetting?.showBottomToolbar && !buttonSetting?.duplicateDisable && !editDisable && !addDisable) {
2270
2282
  if (fieldKey) {
2271
- const newdata = { ...data };
2272
2283
  fieldUniKey.forEach((item) => {
2273
- newdata[item] = defaultValue[item];
2284
+ data[item] = defaultValue[item];
2274
2285
  });
2275
- newdata[fieldKey] = defaultValue[fieldKey];
2276
- dataSource?.splice(index, 0, newdata);
2286
+ data[fieldKey] = defaultValue[fieldKey];
2287
+ }
2288
+ if (pagingClient) {
2289
+ dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + index, 0, { ...data });
2277
2290
  } else {
2278
- dataSource?.splice(index, 0, { ...data });
2291
+ dataSource.splice(index, 0, data);
2279
2292
  }
2280
2293
  changeDataSource(dataSource);
2281
- if (tableElement && index === dataSource?.length) {
2294
+ if (tableElement && index === totalCount) {
2282
2295
  setTimeout(() => {
2283
2296
  tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2284
2297
  }, 100);
@@ -2286,10 +2299,14 @@ var TableEdit = forwardRef2((props, ref) => {
2286
2299
  }
2287
2300
  };
2288
2301
  const handleInsertAfter = () => {
2289
- if (showBottomToolbar && !editDisable && !addDisable) {
2290
- dataSource?.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
2302
+ if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertAfterDisable && !editDisable && !addDisable) {
2303
+ if (pagingClient) {
2304
+ dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + (indexFocus ?? -1) + 1, 0, { ...{ ...defaultValue } });
2305
+ } else {
2306
+ dataSource.splice((indexFocus ?? -1) + 1, 0, { ...defaultValue });
2307
+ }
2291
2308
  changeDataSource(dataSource);
2292
- if (tableElement && indexFocus === dataSource?.length) {
2309
+ if (tableElement && indexFocus === totalCount) {
2293
2310
  setTimeout(() => {
2294
2311
  tableElement.current?.scrollTo(0, tableElement.current.scrollHeight);
2295
2312
  }, 100);
@@ -2297,16 +2314,26 @@ var TableEdit = forwardRef2((props, ref) => {
2297
2314
  }
2298
2315
  };
2299
2316
  const handleInsertBefore = () => {
2300
- if (showBottomToolbar && !editDisable && !addDisable) {
2301
- dataSource?.splice(indexFocus ?? -1, 0, { ...defaultValue });
2317
+ if (toolbarSetting?.showBottomToolbar && !buttonSetting?.insertBeforeDisable && !editDisable && !addDisable) {
2318
+ if (pagingClient) {
2319
+ dataSource.splice(((pagingSetting?.currentPage ?? 1) - 1) * (pagingSetting?.pageSize ?? 0) + (indexFocus ?? -1), 0, { ...{ ...defaultValue } });
2320
+ } else {
2321
+ dataSource.splice(indexFocus ?? -1, 0, { ...defaultValue });
2322
+ }
2302
2323
  changeDataSource(dataSource);
2303
2324
  }
2304
2325
  };
2305
2326
  const handleDeleteAll = () => {
2306
- if (showBottomToolbar && !editDisable && !addDisable) {
2327
+ if (toolbarSetting?.showBottomToolbar && !buttonSetting?.deleteAllDisable && !editDisable && !addDisable) {
2307
2328
  messageBoxConfirmDelete(t, deleteAll, "");
2308
2329
  }
2309
2330
  };
2331
+ const deleteAll = () => {
2332
+ if (!editDisable && !addDisable) {
2333
+ setIndexFocus(-1);
2334
+ changeDataSource([], false);
2335
+ }
2336
+ };
2310
2337
  const pasteDataFromExcel = async (row, col) => {
2311
2338
  const clipboard = await navigator.clipboard.readText();
2312
2339
  const arrayRow = clipboard.trimEnd().split("\n");
@@ -2315,7 +2342,7 @@ var TableEdit = forwardRef2((props, ref) => {
2315
2342
  let dataRow = dataSource[row + indexRow];
2316
2343
  if (!dataRow) {
2317
2344
  dataRow = { ...defaultValue };
2318
- dataSource?.push(dataRow);
2345
+ dataSource.push(dataRow);
2319
2346
  }
2320
2347
  arrayCol.forEach((element, index) => {
2321
2348
  const column = contentColumns[col + index];
@@ -2332,9 +2359,11 @@ var TableEdit = forwardRef2((props, ref) => {
2332
2359
  if (!editDisable && !addDisable && setDataSource) {
2333
2360
  if (haveNew) {
2334
2361
  data.push(defaultValue ? { ...defaultValue, [fieldKey]: generateUUID() } : {});
2362
+ setDataSource([...data]);
2363
+ } else {
2364
+ setDataSource([...data]);
2335
2365
  }
2336
2366
  }
2337
- setDataSource([...data]);
2338
2367
  };
2339
2368
  useEffect5(() => {
2340
2369
  setIndexFocus(-1);
@@ -2629,17 +2658,16 @@ var TableEdit = forwardRef2((props, ref) => {
2629
2658
  children: /* @__PURE__ */ jsx12(
2630
2659
  Input6,
2631
2660
  {
2632
- checked: selectedRows?.length >= dataSource?.length && dataSource?.length > 0,
2661
+ checked: totalCount > 0 && selectedRows?.length >= totalCount,
2633
2662
  type: "checkbox",
2634
2663
  className: classnames6("cursor-pointer", { "d-none": !isMulti }),
2635
2664
  style: { textAlign: col.textAlign ?? "left", marginTop: 6 },
2636
2665
  onChange: (e) => {
2637
2666
  if (selectEnable) {
2638
2667
  if (e.target.checked) {
2639
- const arr = dataSource?.map((item) => {
2668
+ setSelectedRows(dataSource.map((item) => {
2640
2669
  return item;
2641
- });
2642
- setSelectedRows(arr);
2670
+ }));
2643
2671
  } else {
2644
2672
  setSelectedRows([]);
2645
2673
  }
@@ -2746,7 +2774,7 @@ var TableEdit = forwardRef2((props, ref) => {
2746
2774
  maxWidth: col.maxWidth,
2747
2775
  textAlign: col.textAlign ? col.textAlign : "left"
2748
2776
  },
2749
- children: /* @__PURE__ */ jsx12("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource?.reduce(function(accumulator, currentValue) {
2777
+ children: /* @__PURE__ */ jsx12("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
2750
2778
  return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
2751
2779
  }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
2752
2780
  }
@@ -2770,22 +2798,22 @@ var TableEdit = forwardRef2((props, ref) => {
2770
2798
  /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-left", children: [
2771
2799
  /* @__PURE__ */ jsx12("div", { className: classnames6("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") }) }),
2772
2800
  (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs11(Fragment13, { children: [
2773
- /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: () => {
2801
+ /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: () => {
2774
2802
  handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
2775
2803
  }, className: "d-flex", children: t("Duplicate") }) }),
2776
- /* @__PURE__ */ jsx12("div", { className: classnames6("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") }) }),
2777
- /* @__PURE__ */ jsx12("div", { className: classnames6("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") }) })
2804
+ /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
2805
+ /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
2778
2806
  ] }) : /* @__PURE__ */ jsx12(Fragment13, { children: " " }),
2779
- /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
2780
- toolbarBottomOptions?.map((item, index) => {
2807
+ /* @__PURE__ */ jsx12("div", { className: classnames6("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx12(Button3, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
2808
+ toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
2781
2809
  return item.align === "left" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
2782
2810
  })
2783
2811
  ] }),
2784
- /* @__PURE__ */ jsx12("div", { className: "r-toolbar-center", children: toolbarBottomOptions?.map((item, index) => {
2812
+ /* @__PURE__ */ jsx12("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
2785
2813
  return item.align === "center" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
2786
2814
  }) }),
2787
2815
  /* @__PURE__ */ jsxs11("div", { className: "r-toolbar-right", children: [
2788
- toolbarBottomOptions?.map((item, index) => {
2816
+ toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
2789
2817
  return item.align === "right" ? /* @__PURE__ */ jsx12("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
2790
2818
  }),
2791
2819
  /* @__PURE__ */ jsx12("div", { className: classnames6("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) }) }),
@@ -2804,19 +2832,20 @@ var TableEdit = forwardRef2((props, ref) => {
2804
2832
  return /* @__PURE__ */ jsxs11(Fragment12, { children: [
2805
2833
  /* @__PURE__ */ jsxs11("div", { className: "react-table-edit", children: [
2806
2834
  /* @__PURE__ */ jsxs11("div", { className: "r-grid", ref: gridRef, children: [
2807
- showTopToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx12(Fragment13, {}),
2835
+ toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx12(Fragment13, {}),
2808
2836
  /* @__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: [
2809
2837
  /* @__PURE__ */ jsx12("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
2810
2838
  return /* @__PURE__ */ jsx12("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
2811
2839
  return renderHeaderCol(col, index, indexParent);
2812
2840
  }) }, indexParent);
2813
2841
  }) }),
2814
- /* @__PURE__ */ jsx12("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
2842
+ /* @__PURE__ */ jsx12("tbody", { className: "r-gridcontent", children: dataSource.map((row, indexRow) => {
2815
2843
  const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
2816
- return /* @__PURE__ */ jsx12(
2844
+ const flagDisplay = !pagingClient || indexRow + 1 > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && indexRow < (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
2845
+ return flagDisplay && /* @__PURE__ */ jsx12(
2817
2846
  "tr",
2818
2847
  {
2819
- className: classnames6("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
2848
+ className: classnames6("r-row", { "last-row": indexRow === (pagingClient ? totalCount % (pagingSetting?.pageSize ?? 0) : totalCount - 1) }, { "fisrt-row": indexRow === 0 }),
2820
2849
  children: contentColumns.map((col, indexCol) => {
2821
2850
  return renderContentCol(col, row, indexRow, indexCol, isSelected);
2822
2851
  })
@@ -2828,17 +2857,17 @@ var TableEdit = forwardRef2((props, ref) => {
2828
2857
  return renderFooterCol(col, index);
2829
2858
  }) }) : /* @__PURE__ */ jsx12(Fragment13, {}) })
2830
2859
  ] }) }),
2831
- showBottomToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx12(Fragment13, {})
2860
+ toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx12(Fragment13, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx12(Fragment13, {})
2832
2861
  ] }),
2833
- allowPaging ? /* @__PURE__ */ jsx12(
2862
+ pagingSetting?.allowPaging ? /* @__PURE__ */ jsx12(
2834
2863
  PagerComponent,
2835
2864
  {
2836
2865
  locale: lang,
2837
2866
  click: onChangePage,
2838
- pageSize,
2839
- currentPage,
2867
+ pageSize: pagingSetting?.pageSize,
2868
+ currentPage: pagingSetting?.currentPage,
2840
2869
  pageSizes: [20, 30, 50, 100],
2841
- totalRecordsCount: totalItem ? totalItem : void 0,
2870
+ totalRecordsCount: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
2842
2871
  pageCount: 5,
2843
2872
  dropDownChanged: onChangePageSize
2844
2873
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-table-edit",
3
3
  "license": "MIT",
4
- "version": "0.3.6",
4
+ "version": "0.3.9",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",