react-table-edit 1.4.24 → 1.4.25
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/header.d.ts +2 -2
- package/dist/component/utils.d.ts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +22 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +22 -11
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -19290,6 +19290,8 @@ const calculateTableStructure = (columns) => {
|
|
|
19290
19290
|
const flat = [];
|
|
19291
19291
|
const objWidthFixLeft = {};
|
|
19292
19292
|
const objWidthFixRight = {};
|
|
19293
|
+
const objHeaderWidthFixRight = {};
|
|
19294
|
+
const objHeaderWidthFixLeft = {};
|
|
19293
19295
|
let maxDepth = 0;
|
|
19294
19296
|
// Tính depth tối đa
|
|
19295
19297
|
const calculateDepth = (cols, depth = 1) => (Math.max(...cols.map(col => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth))));
|
|
@@ -19298,7 +19300,7 @@ const calculateTableStructure = (columns) => {
|
|
|
19298
19300
|
let rightTotal = 0;
|
|
19299
19301
|
const traverse = (cols, level = 0) => {
|
|
19300
19302
|
levels[level] = levels[level] || [];
|
|
19301
|
-
return cols.reduce((colspanSum, col) => {
|
|
19303
|
+
return cols.reduce((colspanSum, col, indexCol) => {
|
|
19302
19304
|
const hasChildren = (col.columns?.length ?? 0) > 0;
|
|
19303
19305
|
const colspan = hasChildren ? traverse(col.columns, level + 1) : 1;
|
|
19304
19306
|
const cell = {
|
|
@@ -19308,17 +19310,23 @@ const calculateTableStructure = (columns) => {
|
|
|
19308
19310
|
rowspan: hasChildren ? 1 : maxDepth - level
|
|
19309
19311
|
};
|
|
19310
19312
|
levels[level].push(cell);
|
|
19313
|
+
const headerKey = `${level}-${indexCol}`;
|
|
19314
|
+
if (col.fixedType === 'right' && col.visible !== false) {
|
|
19315
|
+
objHeaderWidthFixRight[headerKey] = rightTotal;
|
|
19316
|
+
}
|
|
19317
|
+
if (col.fixedType === 'left' && col.visible !== false) {
|
|
19318
|
+
objHeaderWidthFixLeft[headerKey] = leftTotal;
|
|
19319
|
+
}
|
|
19311
19320
|
if (!hasChildren) {
|
|
19312
|
-
const visible = col.visible !== false;
|
|
19313
19321
|
const index = flat.length;
|
|
19314
19322
|
const width = col.width ?? 40;
|
|
19315
19323
|
cell.index = index;
|
|
19316
19324
|
flat.push(cell);
|
|
19317
|
-
if (col.fixedType === 'left' && visible) {
|
|
19325
|
+
if (col.fixedType === 'left' && col.visible !== false) {
|
|
19318
19326
|
objWidthFixLeft[index] = leftTotal;
|
|
19319
19327
|
leftTotal += width;
|
|
19320
19328
|
}
|
|
19321
|
-
if (col.fixedType === 'right' && visible) {
|
|
19329
|
+
if (col.fixedType === 'right' && col.visible !== false) {
|
|
19322
19330
|
objWidthFixRight[index] = rightTotal;
|
|
19323
19331
|
rightTotal += width;
|
|
19324
19332
|
}
|
|
@@ -19341,6 +19349,8 @@ const calculateTableStructure = (columns) => {
|
|
|
19341
19349
|
objWidthFixRight,
|
|
19342
19350
|
lastObjWidthFixLeft,
|
|
19343
19351
|
fisrtObjWidthFixRight,
|
|
19352
|
+
objHeaderWidthFixRight,
|
|
19353
|
+
objHeaderWidthFixLeft,
|
|
19344
19354
|
firstEdit,
|
|
19345
19355
|
lastEdit
|
|
19346
19356
|
};
|
|
@@ -41788,7 +41798,7 @@ var css_248z$1 = ".react-resizable {\n position: relative;\n}\n.react-resizable
|
|
|
41788
41798
|
styleInject(css_248z$1);
|
|
41789
41799
|
|
|
41790
41800
|
const HeaderTableCol$1 = (props) => {
|
|
41791
|
-
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent,
|
|
41801
|
+
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, setColumns, orderBy, changeFilter, filterBy, changeOrder, allowFilter, allowOrder, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, formatSetting, optionsFilter, idTable, isMulti } = props;
|
|
41792
41802
|
const { t } = useTranslation();
|
|
41793
41803
|
const headerRef = useRef(null);
|
|
41794
41804
|
const order = orderBy.find((item) => item.key === col.field);
|
|
@@ -41814,10 +41824,11 @@ const HeaderTableCol$1 = (props) => {
|
|
|
41814
41824
|
const checkOverflow = () => {
|
|
41815
41825
|
return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
|
|
41816
41826
|
};
|
|
41827
|
+
console.log(col);
|
|
41817
41828
|
return (jsx(Fragment, { children: col.visible !== false && (jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: false }, children: jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter(x => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
|
|
41818
41829
|
top: `${indexParent * 42}px`,
|
|
41819
|
-
left: col.fixedType === 'left' ?
|
|
41820
|
-
right: col.fixedType === 'right' ?
|
|
41830
|
+
left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
|
|
41831
|
+
right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
|
|
41821
41832
|
}, children: jsxs("div", { style: { justifyContent: 'space-between' }, onClick: () => {
|
|
41822
41833
|
if (order) {
|
|
41823
41834
|
if (order.direction === 'asc') {
|
|
@@ -41841,7 +41852,7 @@ const HeaderTableCol$1 = (props) => {
|
|
|
41841
41852
|
setSelectedRows([]);
|
|
41842
41853
|
}
|
|
41843
41854
|
}
|
|
41844
|
-
} })), col.field !== 'checkbox' && jsxs(Fragment$1, { children: [jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(col.headerText ?? '') }), checkOverflow() && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerText ?? '') })] }), col.field !== '#' && col.field !== 'command' && jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_6)", children: jsx("path", { d: "M8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM8 18H9L9 1H8H7L7 18H8Z", fill: "black" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_6", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_2)", children: jsx("path", { d: "M7.29289 17.7071C7.68342 18.0976 8.31658 18.0976 8.70711 17.7071L15.0711 11.3431C15.4616 10.9526 15.4616 10.3195 15.0711 9.92893C14.6805 9.53841 14.0474 9.53841 13.6569 9.92893L8 15.5858L2.34315 9.92893C1.95262 9.53841 1.31946 9.53841 0.928932 9.92893C0.538408 10.3195 0.538408 10.9526 0.928932 11.3431L7.29289 17.7071ZM8 0L7 0L7 17H8H9L9 0L8 0Z", fill: "black" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_2", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
|
|
41855
|
+
} })), col.field !== 'checkbox' && jsxs(Fragment$1, { children: [jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(col.headerText ?? '') }), checkOverflow() && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerText ?? '') })] }), col.field !== '#' && col.field !== 'command' && jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_6)", children: jsx("path", { d: "M8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM8 18H9L9 1H8H7L7 18H8Z", fill: "black" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_6", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsx("g", { "clip-path": "url(#clip0_520_2)", children: jsx("path", { d: "M7.29289 17.7071C7.68342 18.0976 8.31658 18.0976 8.70711 17.7071L15.0711 11.3431C15.4616 10.9526 15.4616 10.3195 15.0711 9.92893C14.6805 9.53841 14.0474 9.53841 13.6569 9.92893L8 15.5858L2.34315 9.92893C1.95262 9.53841 1.31946 9.53841 0.928932 9.92893C0.538408 10.3195 0.538408 10.9526 0.928932 11.3431L7.29289 17.7071ZM8 0L7 0L7 17H8H9L9 0L8 0Z", fill: "black" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_520_2", children: jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
|
|
41845
41856
|
setOpenFilter(!openFilter);
|
|
41846
41857
|
e.stopPropagation();
|
|
41847
41858
|
}, onClick: (e) => {
|
|
@@ -41918,7 +41929,7 @@ const RenderFilterElement$1 = ({ filter, optionsFilter, formatSetting, filterBy,
|
|
|
41918
41929
|
handleSave();
|
|
41919
41930
|
e.stopPropagation();
|
|
41920
41931
|
}
|
|
41921
|
-
}, children: [((!column.filterType && column.editType === '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
|
|
41932
|
+
}, children: [((!column.filterType && column.editType === '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: () => {
|
|
41922
41933
|
if (filterBy) {
|
|
41923
41934
|
changeFilter(filterBy.filter((x) => x.key !== column.field));
|
|
41924
41935
|
}
|
|
@@ -42729,7 +42740,7 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
42729
42740
|
pagingSetting.setCurrentPage(1);
|
|
42730
42741
|
}
|
|
42731
42742
|
}, [dataSource]);
|
|
42732
|
-
const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, firstEdit: columnFirstEdit, lastEdit: columnLastEdit } = useMemo(() => {
|
|
42743
|
+
const { levels: headerColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, firstEdit: columnFirstEdit, lastEdit: columnLastEdit } = useMemo(() => {
|
|
42733
42744
|
const obj = calculateTableStructure(columns);
|
|
42734
42745
|
setContentColumns(obj.flat);
|
|
42735
42746
|
return obj;
|
|
@@ -43558,7 +43569,7 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43558
43569
|
}, [searchTerm, searchSetting?.searchTerm]);
|
|
43559
43570
|
return (jsxs(Fragment, { children: [jsxs("div", { className: "react-table-edit", children: [jsxs("div", { className: 'r-grid', ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsx("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}`, minHeight: `${minHeight ? `${minHeight}px` : ''}`, maxHeight: `${maxHeight ? `${maxHeight}px` : '400px'}` }, children: jsxs("table", { style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: flatVisble }), jsx("thead", { className: 'r-gridheader', children: headerColumns.map((element, indexParent) => {
|
|
43560
43571
|
return (jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
|
|
43561
|
-
return (jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false,
|
|
43572
|
+
return (jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: tableElement, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFilter: allowFilter, allowOrder: allowOrder, formatSetting: formatSetting, changeFilter: (val) => {
|
|
43562
43573
|
setFilterBy([...val]);
|
|
43563
43574
|
}, changeOrder: (val) => {
|
|
43564
43575
|
setOrderBy([...val]);
|