react-table-edit 1.4.28 → 1.4.29
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.
- package/dist/component/table-view/index.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +42 -17
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +42 -17
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -18,6 +18,7 @@ type TableViewProps = {
|
|
|
18
18
|
searchSetting?: IFTableEditSearchSetting;
|
|
19
19
|
columnsAggregate?: IColumnsAgg[];
|
|
20
20
|
selectedItem?: any;
|
|
21
|
+
isVirtualList?: boolean;
|
|
21
22
|
setSelectedItem?: Dispatch<SetStateAction<any>>;
|
|
22
23
|
setColumns?: (columns: IColumnTable[]) => void;
|
|
23
24
|
commandClick?: (data: any) => void;
|
package/dist/index.d.ts
CHANGED
|
@@ -709,6 +709,7 @@ type TableViewProps = {
|
|
|
709
709
|
searchSetting?: IFTableEditSearchSetting;
|
|
710
710
|
columnsAggregate?: IColumnsAgg[];
|
|
711
711
|
selectedItem?: any;
|
|
712
|
+
isVirtualList?: boolean;
|
|
712
713
|
setSelectedItem?: Dispatch<SetStateAction<any>>;
|
|
713
714
|
setColumns?: (columns: IColumnTable[]) => void;
|
|
714
715
|
commandClick?: (data: any) => void;
|
package/dist/index.js
CHANGED
|
@@ -65554,7 +65554,7 @@ const HeaderTableCol = (props) => {
|
|
|
65554
65554
|
orderBy.push({ direction: 'asc', key: col.field });
|
|
65555
65555
|
changeOrder(orderBy);
|
|
65556
65556
|
}
|
|
65557
|
-
}, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowOrder }), children: [col.type === 'checkbox' && (jsxRuntime.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) => {
|
|
65557
|
+
}, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowOrder }), children: [(col.type === 'checkbox' && !col.field) && (jsxRuntime.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) => {
|
|
65558
65558
|
if (selectEnable) {
|
|
65559
65559
|
if (e.target.checked) {
|
|
65560
65560
|
setSelectedRows(dataSource.map((item) => { return item; }));
|
|
@@ -65637,7 +65637,9 @@ const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, s
|
|
|
65637
65637
|
};
|
|
65638
65638
|
return (jsxRuntime.jsxs("div", { className: 'r-filter-popup', onKeyDown: (e) => {
|
|
65639
65639
|
if (e.code === 'Enter' || e.code === 'NumpadEnter') {
|
|
65640
|
-
|
|
65640
|
+
setTimeout(() => {
|
|
65641
|
+
handleSave();
|
|
65642
|
+
}, 100);
|
|
65641
65643
|
e.stopPropagation();
|
|
65642
65644
|
}
|
|
65643
65645
|
}, children: [((!column.filterType && column.type === 'numeric') || column.filterType === 'numeric') ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxRuntime.jsxs("div", { className: 'd-flex justify-content-end', children: [jsxRuntime.jsx(Button$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsxRuntime.jsx(Button$1, { className: 'py-25 px-50 fw-bold', outline: true, style: { borderRadius: 3 }, onClick: () => {
|
|
@@ -65731,20 +65733,20 @@ const RenderContentCol = (props) => {
|
|
|
65731
65733
|
}, children: RenderElement() }, `col-${indexRow}-${indexCol}`));
|
|
65732
65734
|
};
|
|
65733
65735
|
|
|
65734
|
-
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 }) => {
|
|
65736
|
+
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 }) => {
|
|
65737
|
+
const { t } = reactI18next.useTranslation();
|
|
65735
65738
|
const gridRef = React$5.useRef(null);
|
|
65736
|
-
const [startIndex, setStartIndex] = React$5.useState(0);
|
|
65737
65739
|
const [selectedRows, setSelectedRows] = React$5.useState([]);
|
|
65738
65740
|
const [orderBy, setOrderBy] = React$5.useState([]);
|
|
65739
65741
|
const [filterBy, setFilterBy] = React$5.useState([]);
|
|
65740
65742
|
const [searchTerm, setSearchTerm] = React$5.useState('');
|
|
65741
|
-
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
|
|
65743
|
+
const fieldKey = (columns.find((item) => item.isPrimarykey === true)?.field) ?? 'id';
|
|
65744
|
+
const [startIndex, setStartIndex] = React$5.useState(0);
|
|
65742
65745
|
//trường liên quan đến virtul loading
|
|
65743
|
-
const visibleRowCount = Math.ceil(height / rowHeight) + 5;
|
|
65744
65746
|
const buffer = 10; // số dòng dự phòng phía trên và dưới
|
|
65745
|
-
const
|
|
65746
|
-
|
|
65747
|
-
const
|
|
65747
|
+
const visibleRowCount = Math.ceil(height / rowHeight) + 5;
|
|
65748
|
+
// 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
|
|
65749
|
+
const viewData = React$5.useMemo(() => {
|
|
65748
65750
|
if (!dataSource || dataSource.length === 0) {
|
|
65749
65751
|
return [];
|
|
65750
65752
|
}
|
|
@@ -65809,19 +65811,42 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
|
|
|
65809
65811
|
return 0;
|
|
65810
65812
|
});
|
|
65811
65813
|
}
|
|
65814
|
+
return datas;
|
|
65815
|
+
}, [searchTerm, filterBy, orderBy, dataSource]);
|
|
65816
|
+
// Lấy dữ liệu hiển thị với phân trang
|
|
65817
|
+
const pagingData = React$5.useMemo(() => {
|
|
65818
|
+
if (!viewData || viewData.length === 0) {
|
|
65819
|
+
return [];
|
|
65820
|
+
}
|
|
65821
|
+
let datas = viewData;
|
|
65812
65822
|
if (pagingSetting?.allowPaging && pagingSetting?.currentPage && pagingSetting?.pageSize && pagingSetting.pagingClient) {
|
|
65813
65823
|
const start = (pagingSetting.currentPage - 1) * pagingSetting.pageSize;
|
|
65814
65824
|
const end = start + pagingSetting.pageSize;
|
|
65815
65825
|
datas = datas.slice(start, end);
|
|
65816
65826
|
}
|
|
65817
|
-
return datas
|
|
65818
|
-
}, [
|
|
65819
|
-
|
|
65827
|
+
return datas;
|
|
65828
|
+
}, [viewData, pagingSetting?.pageSize, pagingSetting?.currentPage]);
|
|
65829
|
+
// Tính toán chỉ số bắt đầu và kết thúc của dữ liệu hiển thị
|
|
65830
|
+
const { adjustedStartIndex, adjustedEndIndex } = React$5.useMemo(() => {
|
|
65831
|
+
if (!pagingData || pagingData.length === 0 || !isVirtualList) {
|
|
65832
|
+
return { adjustedStartIndex: 0, adjustedEndIndex: 0 };
|
|
65833
|
+
}
|
|
65834
|
+
return {
|
|
65835
|
+
adjustedStartIndex: Math.max(startIndex - buffer, 0),
|
|
65836
|
+
adjustedEndIndex: Math.min(startIndex + visibleRowCount + buffer, dataSource.length)
|
|
65837
|
+
};
|
|
65838
|
+
}, [startIndex, pagingData]);
|
|
65839
|
+
const visibleData = React$5.useMemo(() => {
|
|
65840
|
+
if (!pagingData || pagingData.length === 0) {
|
|
65841
|
+
return [];
|
|
65842
|
+
}
|
|
65843
|
+
return isVirtualList ? pagingData.slice(adjustedStartIndex, adjustedEndIndex) : pagingData;
|
|
65844
|
+
}, [pagingData]);
|
|
65820
65845
|
const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => calculateTableStructure(columns), [columns]);
|
|
65821
65846
|
const scrollTimeoutRef = React$5.useRef(null);
|
|
65822
65847
|
const lastScrollTop = React$5.useRef(0);
|
|
65823
65848
|
const handleScroll = (e) => {
|
|
65824
|
-
if (!gridRef.current) {
|
|
65849
|
+
if (!gridRef.current || !isVirtualList) {
|
|
65825
65850
|
return;
|
|
65826
65851
|
}
|
|
65827
65852
|
// Nếu không có sự thay đổi về scrollTop => người dùng chỉ scroll ngang => không xử lý
|
|
@@ -65946,19 +65971,19 @@ const TableView = ({ idTable, dataSource, rowHeight = 33, height = 400, columns,
|
|
|
65946
65971
|
}, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, `header-${-indexParent}`))) }), jsxRuntime.jsxs("tbody", { className: 'r-gridcontent', role: "rowgroup", children: [adjustedStartIndex > 0 && (jsxRuntime.jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
|
|
65947
65972
|
const indexRow = index + startIndex;
|
|
65948
65973
|
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
65949
|
-
return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey:
|
|
65950
|
-
}),
|
|
65974
|
+
return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: 'r-row', children: contentColumns.map((column, indexCol) => (jsxRuntime.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}`));
|
|
65975
|
+
}), adjustedEndIndex > 0 && pagingData.length > adjustedEndIndex && (jsxRuntime.jsx("tr", { style: { height: (pagingData.length - adjustedEndIndex) * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), viewData.length > 0 && jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsxRuntime.jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
|
|
65951
65976
|
const item = columnsAggregate?.find((x) => x.field === col.field);
|
|
65952
65977
|
let sumValue = item?.value;
|
|
65953
65978
|
if (!item && col.haveSum === true && col.type === "numeric") {
|
|
65954
|
-
sumValue =
|
|
65979
|
+
sumValue = viewData.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
|
|
65955
65980
|
}
|
|
65956
65981
|
return col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
65957
65982
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
65958
65983
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
65959
65984
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
65960
65985
|
}, children: jsxRuntime.jsxs("div", { className: "r-footer-div", children: [(item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) >= 0) && jsxRuntime.jsx(jsxRuntime.Fragment, { 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) && jsxRuntime.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}`);
|
|
65961
|
-
}) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }), (((
|
|
65986
|
+
}) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }), (((viewData.length ?? 0) === 0) && !isLoading) && jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.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" }), jsxRuntime.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 && jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging ? jsxRuntime.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 }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
|
|
65962
65987
|
};
|
|
65963
65988
|
|
|
65964
65989
|
exports.ExportExcelComponent = ExportExcelComponent;
|