react-table-edit 1.4.28 → 1.4.30

package/dist/index.mjs

@@ -41878,6 +41878,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
     const { t } = useTranslation();
     const [operator, setOperator] = useState(filter?.ope ?? ((!column.filterType && column.type === 'numeric') || column.filterType === 'select' ? 'equal' : 'contains'));
     const [valueFilter, setValueFilter] = useState(filter?.value ?? '');
+    const fieldFilter = column.fieldFilter ?? column.field;
     const RenderStringFilter = () => {
         const options = [
             { label: 'Bắt đầu bởi', value: 'startswith' },
@@ -41921,7 +41922,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
                     } })] }));
     };
     const RenderSelectFilter = () => {
-        return (jsx("div", { className: 'mb-1', children: jsx(SelectTable, { value: optionsFilter ? optionsFilter[column.field]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[column.field]) ?? [], isClearable: true, onChange: (val) => {
+        return (jsx("div", { className: 'mb-1', children: jsx(SelectTable, { value: optionsFilter ? optionsFilter[fieldFilter]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[fieldFilter]) ?? [], isClearable: true, onChange: (val) => {
                     setValueFilter(val?.value);
                 }, placeholder: t('Select') }) }));
     };
@@ -41931,7 +41932,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
             filter.value = valueFilter ?? '';
         }
         else {
-            filterBy.push({ key: column.field, ope: operator, value: valueFilter ?? '' });
+            filterBy.push({ key: fieldFilter, ope: operator, value: valueFilter ?? '' });
         }
         changeFilter([...filterBy]);
         setOpenFilter(false);
@@ -41943,7 +41944,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
             }
         }, children: [((!column.filterType && column.type === 'numeric') || column.filterType === 'numeric') ? jsxs(Fragment$1, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxs(Fragment$1, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxs("div", { className: 'd-flex justify-content-end', children: [jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsx(Button$1, { className: 'py-25 px-50 fw-bold', color: 'white', style: { borderRadius: 3, borderWidth: 0 }, onClick: () => {
                             if (filterBy) {
-                                changeFilter(filterBy.filter((x) => x.key !== column.field));
+                                changeFilter(filterBy.filter((x) => x.key !== fieldFilter));
                             }
                             setOpenFilter(false);
                         }, children: t('Clear') })] })] }));
@@ -65526,7 +65527,7 @@ const HeaderTableCol = (props) => {
                             orderBy.push({ direction: 'asc', key: col.field });
                             changeOrder(orderBy);
                         }
-                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowOrder }), children: [col.type === 'checkbox' && (jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
+                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowOrder }), children: [(col.type === 'checkbox' && !col.field) && (jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
                                 if (selectEnable) {
                                     if (e.target.checked) {
                                         setSelectedRows(dataSource.map((item) => { return item; }));
@@ -65549,6 +65550,7 @@ const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, s
     const { t } = useTranslation();
     const [operator, setOperator] = useState(filter?.ope ?? ((!column.filterType && column.type === 'numeric') || column.filterType === 'select' ? 'equal' : 'contains'));
     const [valueFilter, setValueFilter] = useState(filter?.value ?? '');
+    const fieldFilter = column.fieldFilter ?? column.field;
     const RenderStringFilter = () => {
         const options = [
             { label: 'Bắt đầu bởi', value: 'startswith' },
@@ -65592,7 +65594,7 @@ const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, s
                     } })] }));
     };
     const RenderSelectFilter = () => {
-        return (jsx("div", { className: 'mb-1', children: jsx(SelectTable, { value: optionsFilter ? optionsFilter[column.field]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[column.field]) ?? [], isClearable: true, onChange: (val) => {
+        return (jsx("div", { className: 'mb-1', children: jsx(SelectTable, { value: optionsFilter ? optionsFilter[fieldFilter]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[fieldFilter]) ?? [], isClearable: true, onChange: (val) => {
                     setValueFilter(val?.value);
                 }, placeholder: t('Select') }) }));
     };
@@ -65602,19 +65604,21 @@ const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, s
             filter.value = valueFilter ?? '';
         }
         else {
-            filterBy.push({ key: column.field, ope: operator, value: valueFilter ?? '' });
+            filterBy.push({ key: fieldFilter, ope: operator, value: valueFilter ?? '' });
         }
         changeFilter([...filterBy]);
         setOpenFilter(false);
     };
     return (jsxs("div", { className: 'r-filter-popup', onKeyDown: (e) => {
             if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-                handleSave();
+                setTimeout(() => {
+                    handleSave();
+                }, 100);
                 e.stopPropagation();
             }
         }, children: [((!column.filterType && column.type === 'numeric') || column.filterType === 'numeric') ? jsxs(Fragment$1, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxs(Fragment$1, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxs("div", { className: 'd-flex justify-content-end', children: [jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsx(Button$1, { className: 'py-25 px-50  fw-bold', outline: true, style: { borderRadius: 3 }, onClick: () => {
                             if (filterBy) {
-                                changeFilter(filterBy.filter((x) => x.key !== column.field));
+                                changeFilter(filterBy.filter((x) => x.key !== fieldFilter));
                             }
                             setOpenFilter(false);
                         }, children: t('Clear') })] })] }));
@@ -65703,20 +65707,20 @@ const RenderContentCol = (props) => {
         }, children: RenderElement() }, `col-${indexRow}-${indexCol}`));
 };
 
-const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns, isMutil = false, isLoading, selectEnable, formatSetting, commandClick, allowFilter, allowOrder, setColumns, pagingSetting, changeFilter, changeOrder, searchSetting, columnsAggregate, toolbarSetting, optionsFilter, selectedItem, setSelectedItem, handleSelect }) => {
+const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns, isMutil = false, isLoading, selectEnable, formatSetting, commandClick, allowFilter, allowOrder, setColumns, pagingSetting, changeFilter, changeOrder, searchSetting, columnsAggregate, toolbarSetting, optionsFilter, selectedItem, setSelectedItem, handleSelect, isVirtualList }) => {
+    const { t } = useTranslation();
     const gridRef = useRef(null);
-    const [startIndex, setStartIndex] = useState(0);
     const [selectedRows, setSelectedRows] = useState([]);
     const [orderBy, setOrderBy] = useState([]);
     const [filterBy, setFilterBy] = useState([]);
     const [searchTerm, setSearchTerm] = useState('');
-    const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
+    const fieldKey = (columns.find((item) => item.isPrimarykey === true)?.field) ?? 'id';
+    const [startIndex, setStartIndex] = useState(0);
     //trường liên quan đến virtul loading
-    const visibleRowCount = Math.ceil(height / rowHeight) + 5;
     const buffer = 10; // số dòng dự phòng phía trên và dưới
-    const adjustedStartIndex = Math.max(startIndex - buffer, 0);
-    const adjustedEndIndex = Math.min(startIndex + visibleRowCount + buffer, dataSource.length);
-    const visibleData = useMemo(() => {
+    const visibleRowCount = Math.ceil(height / rowHeight) + 5;
+    // Tính toán dữ liệu hiển thị dựa trên các điều kiện lọc, tìm kiếm và sắp xếp
+    const viewData = useMemo(() => {
         if (!dataSource || dataSource.length === 0) {
             return [];
         }
@@ -65781,19 +65785,42 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
                 return 0;
             });
         }
+        return datas;
+    }, [searchTerm, filterBy, orderBy, dataSource]);
+    // Lấy dữ liệu hiển thị với phân trang 
+    const pagingData = useMemo(() => {
+        if (!viewData || viewData.length === 0) {
+            return [];
+        }
+        let datas = viewData;
         if (pagingSetting?.allowPaging && pagingSetting?.currentPage && pagingSetting?.pageSize && pagingSetting.pagingClient) {
             const start = (pagingSetting.currentPage - 1) * pagingSetting.pageSize;
             const end = start + pagingSetting.pageSize;
             datas = datas.slice(start, end);
         }
-        return datas.slice(adjustedStartIndex, adjustedEndIndex);
-    }, [searchTerm, filterBy]);
-    const { t } = useTranslation();
+        return datas;
+    }, [viewData, pagingSetting?.pageSize, pagingSetting?.currentPage]);
+    // Tính toán chỉ số bắt đầu và kết thúc của dữ liệu hiển thị
+    const { adjustedStartIndex, adjustedEndIndex } = useMemo(() => {
+        if (!pagingData || pagingData.length === 0 || !isVirtualList) {
+            return { adjustedStartIndex: 0, adjustedEndIndex: 0 };
+        }
+        return {
+            adjustedStartIndex: Math.max(startIndex - buffer, 0),
+            adjustedEndIndex: Math.min(startIndex + visibleRowCount + buffer, dataSource.length)
+        };
+    }, [startIndex, pagingData]);
+    const visibleData = useMemo(() => {
+        if (!pagingData || pagingData.length === 0) {
+            return [];
+        }
+        return isVirtualList ? pagingData.slice(adjustedStartIndex, adjustedEndIndex) : pagingData;
+    }, [pagingData]);
     const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = useMemo(() => calculateTableStructure(columns), [columns]);
     const scrollTimeoutRef = useRef(null);
     const lastScrollTop = useRef(0);
     const handleScroll = (e) => {
-        if (!gridRef.current) {
+        if (!gridRef.current || !isVirtualList) {
             return;
         }
         // Nếu không có sự thay đổi về scrollTop => người dùng chỉ scroll ngang => không xử lý
@@ -65918,19 +65945,19 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
                                                 }, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, `header-${-indexParent}`))) }), jsxs("tbody", { className: 'r-gridcontent', role: "rowgroup", children: [adjustedStartIndex > 0 && (jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
                                                 const indexRow = index + startIndex;
                                                 const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-                                                return (jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: 'field', objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, handleCommandClick: handleCommandClick, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
-                                            }), dataSource.length > adjustedEndIndex && (jsx("tr", { style: { height: (dataSource.length - adjustedEndIndex) * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), dataSource.length > 0 && jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
+                                                return (jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, handleCommandClick: handleCommandClick, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
+                                            }), adjustedEndIndex > 0 && pagingData.length > adjustedEndIndex && (jsx("tr", { style: { height: (pagingData.length - adjustedEndIndex) * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), viewData.length > 0 && jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
                                                 const item = columnsAggregate?.find((x) => x.field === col.field);
                                                 let sumValue = item?.value;
                                                 if (!item && col.haveSum === true && col.type === "numeric") {
-                                                    sumValue = dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
+                                                    sumValue = viewData.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
                                                 }
                                                 return col.visible !== false && jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
                                                         left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                                                         right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                                                         textAlign: col.textAlign ? col.textAlign : 'left'
                                                     }, children: jsxs("div", { className: "r-footer-div", children: [(item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) >= 0) && jsx(Fragment$1, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) }), (item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) < 0) && jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ''}`] })] }) }, `summarycell-${indexCol}`);
-                                            }) }) : jsx(Fragment$1, {}) })] }), (((dataSource.length ?? 0) === 0) && !isLoading) && jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }), isLoading && jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging ? jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: (pagingSetting?.totalItem ?? 0), onChangePageSize: onChangePageSize }) : jsx(Fragment$1, {})] }));
+                                            }) }) : jsx(Fragment$1, {}) })] }), (((viewData.length ?? 0) === 0) && !isLoading) && jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }), isLoading && jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging ? jsx(PagingComponent, { onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: (pagingSetting?.pagingClient ? viewData.length : pagingSetting?.totalItem ?? 0), onChangePageSize: onChangePageSize }) : jsx(Fragment$1, {})] }));
 };
 
 export { ExportExcelComponent, FindNodeByPath, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TableView, TabsMenuComponent, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined$1 as isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };