react-table-edit 1.4.41 → 1.4.43
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 +1 -1
- package/dist/component/type/index.d.ts +6 -2
- package/dist/component/utils.d.ts +2 -7
- package/dist/index.d.ts +7 -9
- package/dist/index.js +21 -10
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +21 -10
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -17702,8 +17702,11 @@ const calculateTableStructure = (columns, settingColumns) => {
|
|
|
17702
17702
|
if (column.width !== undefined && column.width !== null) {
|
|
17703
17703
|
cell.width = column.width;
|
|
17704
17704
|
}
|
|
17705
|
-
if (column.headerText
|
|
17706
|
-
cell.
|
|
17705
|
+
if (column.headerText) {
|
|
17706
|
+
cell.headerDisplay = column.headerText;
|
|
17707
|
+
}
|
|
17708
|
+
else {
|
|
17709
|
+
cell.headerDisplay = cell.headerText;
|
|
17707
17710
|
}
|
|
17708
17711
|
}
|
|
17709
17712
|
else {
|
|
@@ -40393,13 +40396,13 @@ const SidebarSetColumn = (props) => {
|
|
|
40393
40396
|
}
|
|
40394
40397
|
} }) }));
|
|
40395
40398
|
};
|
|
40396
|
-
const
|
|
40397
|
-
let textValue = t(item.
|
|
40399
|
+
const headerDisplayTemplate = (item, index) => {
|
|
40400
|
+
let textValue = t(item.headerDisplay);
|
|
40398
40401
|
return (jsx(Input$1, { defaultValue: textValue, className: classNames$2("border-0 rounded-0 input-element"), onChange: (e) => {
|
|
40399
40402
|
textValue = e.target?.value;
|
|
40400
40403
|
}, onBlur: () => {
|
|
40401
40404
|
if (dataSource) {
|
|
40402
|
-
dataSource[index].
|
|
40405
|
+
dataSource[index].headerDisplay = textValue;
|
|
40403
40406
|
setDataSource(dataSource);
|
|
40404
40407
|
}
|
|
40405
40408
|
} }));
|
|
@@ -40449,7 +40452,14 @@ const SidebarSetColumn = (props) => {
|
|
|
40449
40452
|
{
|
|
40450
40453
|
field: "headerText",
|
|
40451
40454
|
headerText: "Column name",
|
|
40452
|
-
template:
|
|
40455
|
+
template: (item) => (jsxs("div", { className: "r-cell-text", children: [" ", t(item.headerText)] })),
|
|
40456
|
+
visible: true,
|
|
40457
|
+
width: 200
|
|
40458
|
+
},
|
|
40459
|
+
{
|
|
40460
|
+
field: "headerDisplay",
|
|
40461
|
+
headerText: "Column name display",
|
|
40462
|
+
template: headerDisplayTemplate,
|
|
40453
40463
|
visible: true,
|
|
40454
40464
|
width: 200
|
|
40455
40465
|
},
|
|
@@ -40471,7 +40481,7 @@ const SidebarSetColumn = (props) => {
|
|
|
40471
40481
|
},
|
|
40472
40482
|
{
|
|
40473
40483
|
field: "width",
|
|
40474
|
-
headerText: "Column width",
|
|
40484
|
+
headerText: "Column width(px)",
|
|
40475
40485
|
textAlign: "right",
|
|
40476
40486
|
visible: true,
|
|
40477
40487
|
template: widthColumnTemplate,
|
|
@@ -40489,7 +40499,7 @@ const SidebarSetColumn = (props) => {
|
|
|
40489
40499
|
justifyContent: col.textAlign ?? "left"
|
|
40490
40500
|
}, className: "r-headercell-div", children: t(col.headerText ?? "") }) })) }, `header-${indexCol}`));
|
|
40491
40501
|
};
|
|
40492
|
-
return (jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width:
|
|
40502
|
+
return (jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsx(ModalHeader, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }), jsx("div", { className: "ms-2 r-table-edit", children: jsx("div", { className: "r-grid", children: jsx("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: jsxs("table", { style: { width: "100%" }, children: [jsx("thead", { className: "r-gridheader", children: jsx("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
|
|
40493
40503
|
return renderHeaderCol(col, index);
|
|
40494
40504
|
}) }) }), jsx("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
|
|
40495
40505
|
return (jsx("tr", { className: classNames$2("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }), children: columns.map((col, indexCol) => {
|
|
@@ -42412,6 +42422,7 @@ const HeaderTableCol$1 = (props) => {
|
|
|
42412
42422
|
const order = orderBy.find((item) => item.key === col.field);
|
|
42413
42423
|
const [openFilter, setOpenFilter] = useState(false);
|
|
42414
42424
|
const filter = filterBy.find((item) => item.key === col.field);
|
|
42425
|
+
const herderContent = col.headerDisplay ?? (col.headerText ?? '');
|
|
42415
42426
|
const handleResize = (e, { size }) => {
|
|
42416
42427
|
// Update the column width here
|
|
42417
42428
|
// You might need to update the state or call a callback to update the width
|
|
@@ -42459,7 +42470,7 @@ const HeaderTableCol$1 = (props) => {
|
|
|
42459
42470
|
setSelectedRows([]);
|
|
42460
42471
|
}
|
|
42461
42472
|
}
|
|
42462
|
-
} })), 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(
|
|
42473
|
+
} })), 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(herderContent) }), checkOverflow() && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(herderContent) })] }), 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) => {
|
|
42463
42474
|
setOpenFilter(!openFilter);
|
|
42464
42475
|
e.stopPropagation();
|
|
42465
42476
|
}, onClick: (e) => {
|
|
@@ -43749,7 +43760,7 @@ const TableEdit = forwardRef((props, ref) => {
|
|
|
43749
43760
|
setOpenPopupSetupColumn(!openPopupSetupColumn);
|
|
43750
43761
|
}, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
|
|
43751
43762
|
if (saveSettingColumn) {
|
|
43752
|
-
saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.
|
|
43763
|
+
saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.headerDisplay, visible: x.visible, fixedType: x.fixedType, width: x.width })));
|
|
43753
43764
|
}
|
|
43754
43765
|
} })] }));
|
|
43755
43766
|
});
|