react-table-edit 1.4.41 → 1.4.42
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 +20 -10
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +20 -10
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
-
import { IFFilterTable, IFOrderTable, IFTableEditFormat, IHeaderColumnTable } from "../type";
|
|
3
2
|
import 'react-resizable/css/styles.css';
|
|
3
|
+
import { IFFilterTable, IFOrderTable, IFTableEditFormat, IHeaderColumnTable } from "../type";
|
|
4
4
|
type IFDataProps = {
|
|
5
5
|
idTable: string;
|
|
6
6
|
selectEnable: boolean;
|
|
@@ -137,8 +137,10 @@ export type IColumnTable = {
|
|
|
137
137
|
field: string;
|
|
138
138
|
/** Tên thuộc tính lọc*/
|
|
139
139
|
fieldFilter?: string;
|
|
140
|
-
/** Tiêu đề
|
|
140
|
+
/** Tiêu đề cột */
|
|
141
141
|
headerText?: string;
|
|
142
|
+
/** Tiêu đề hiển thị trên giao diện */
|
|
143
|
+
headerDisplay?: string;
|
|
142
144
|
/** Khóa chính */
|
|
143
145
|
isPrimarykey?: boolean;
|
|
144
146
|
/** Duy nhất trong bảng */
|
|
@@ -294,8 +296,10 @@ export type IHeaderColumnTable = {
|
|
|
294
296
|
field: string;
|
|
295
297
|
/** Tên thuộc tính lọc*/
|
|
296
298
|
fieldFilter?: string;
|
|
297
|
-
/** Tiêu đề
|
|
299
|
+
/** Tiêu đề cột */
|
|
298
300
|
headerText?: string;
|
|
301
|
+
/** Tiêu đề hiển thị trên giao diện */
|
|
302
|
+
headerDisplay?: string;
|
|
299
303
|
/** Chiều rộng */
|
|
300
304
|
width?: number | string;
|
|
301
305
|
/** Chiều rộng tối thiểu */
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { IFSettingColumns } from "./type";
|
|
1
2
|
export declare const useOnClickOutside: (ref: any, handler: any) => void;
|
|
2
3
|
export declare const checkThousandSeparator: (thousandSeparator: any, decimalSeparator: any) => any;
|
|
3
4
|
export declare const checkDecimalSeparator: (thousandSeparator: any, decimalSeparator: any) => any;
|
|
@@ -37,13 +38,7 @@ export declare const FindNodeByPath: (tree: any[], path: string) => {
|
|
|
37
38
|
* fisrtObjWidthFixRight: number // Chỉ số cột đầu tiên fixed right
|
|
38
39
|
* }
|
|
39
40
|
*/
|
|
40
|
-
export declare const calculateTableStructure: (columns: any[], settingColumns?: {
|
|
41
|
-
field: string;
|
|
42
|
-
headerText?: string;
|
|
43
|
-
visible?: boolean;
|
|
44
|
-
fixedType?: "left" | "right";
|
|
45
|
-
width?: number | string;
|
|
46
|
-
}[]) => {
|
|
41
|
+
export declare const calculateTableStructure: (columns: any[], settingColumns?: IFSettingColumns[]) => {
|
|
47
42
|
levels: any[][];
|
|
48
43
|
flat: any[];
|
|
49
44
|
flatVisble: any[];
|
package/dist/index.d.ts
CHANGED
|
@@ -141,8 +141,10 @@ type IColumnTable = {
|
|
|
141
141
|
field: string;
|
|
142
142
|
/** Tên thuộc tính lọc*/
|
|
143
143
|
fieldFilter?: string;
|
|
144
|
-
/** Tiêu đề
|
|
144
|
+
/** Tiêu đề cột */
|
|
145
145
|
headerText?: string;
|
|
146
|
+
/** Tiêu đề hiển thị trên giao diện */
|
|
147
|
+
headerDisplay?: string;
|
|
146
148
|
/** Khóa chính */
|
|
147
149
|
isPrimarykey?: boolean;
|
|
148
150
|
/** Duy nhất trong bảng */
|
|
@@ -298,8 +300,10 @@ type IHeaderColumnTable = {
|
|
|
298
300
|
field: string;
|
|
299
301
|
/** Tên thuộc tính lọc*/
|
|
300
302
|
fieldFilter?: string;
|
|
301
|
-
/** Tiêu đề
|
|
303
|
+
/** Tiêu đề cột */
|
|
302
304
|
headerText?: string;
|
|
305
|
+
/** Tiêu đề hiển thị trên giao diện */
|
|
306
|
+
headerDisplay?: string;
|
|
303
307
|
/** Chiều rộng */
|
|
304
308
|
width?: number | string;
|
|
305
309
|
/** Chiều rộng tối thiểu */
|
|
@@ -488,13 +492,7 @@ declare const FindNodeByPath: (tree: any[], path: string) => {
|
|
|
488
492
|
* fisrtObjWidthFixRight: number // Chỉ số cột đầu tiên fixed right
|
|
489
493
|
* }
|
|
490
494
|
*/
|
|
491
|
-
declare const calculateTableStructure: (columns: any[], settingColumns?: {
|
|
492
|
-
field: string;
|
|
493
|
-
headerText?: string;
|
|
494
|
-
visible?: boolean;
|
|
495
|
-
fixedType?: "left" | "right";
|
|
496
|
-
width?: number | string;
|
|
497
|
-
}[]) => {
|
|
495
|
+
declare const calculateTableStructure: (columns: any[], settingColumns?: IFSettingColumns[]) => {
|
|
498
496
|
levels: any[][];
|
|
499
497
|
flat: any[];
|
|
500
498
|
flatVisble: any[];
|
package/dist/index.js
CHANGED
|
@@ -17730,8 +17730,11 @@ const calculateTableStructure = (columns, settingColumns) => {
|
|
|
17730
17730
|
if (column.width !== undefined && column.width !== null) {
|
|
17731
17731
|
cell.width = column.width;
|
|
17732
17732
|
}
|
|
17733
|
-
if (column.headerText
|
|
17734
|
-
cell.
|
|
17733
|
+
if (column.headerText) {
|
|
17734
|
+
cell.headerDisplay = column.headerText;
|
|
17735
|
+
}
|
|
17736
|
+
else {
|
|
17737
|
+
cell.headerDisplay = cell.headerText;
|
|
17735
17738
|
}
|
|
17736
17739
|
}
|
|
17737
17740
|
else {
|
|
@@ -40421,13 +40424,13 @@ const SidebarSetColumn = (props) => {
|
|
|
40421
40424
|
}
|
|
40422
40425
|
} }) }));
|
|
40423
40426
|
};
|
|
40424
|
-
const
|
|
40425
|
-
let textValue = t(item.
|
|
40427
|
+
const headerDisplayTemplate = (item, index) => {
|
|
40428
|
+
let textValue = t(item.headerDisplay);
|
|
40426
40429
|
return (jsxRuntime.jsx(Input$1, { defaultValue: textValue, className: classNames$2("border-0 rounded-0 input-element"), onChange: (e) => {
|
|
40427
40430
|
textValue = e.target?.value;
|
|
40428
40431
|
}, onBlur: () => {
|
|
40429
40432
|
if (dataSource) {
|
|
40430
|
-
dataSource[index].
|
|
40433
|
+
dataSource[index].headerDisplay = textValue;
|
|
40431
40434
|
setDataSource(dataSource);
|
|
40432
40435
|
}
|
|
40433
40436
|
} }));
|
|
@@ -40477,7 +40480,14 @@ const SidebarSetColumn = (props) => {
|
|
|
40477
40480
|
{
|
|
40478
40481
|
field: "headerText",
|
|
40479
40482
|
headerText: "Column name",
|
|
40480
|
-
template:
|
|
40483
|
+
template: (item) => (jsxRuntime.jsxs("div", { className: "r-cell-text", children: [" ", t(item.headerText)] })),
|
|
40484
|
+
visible: true,
|
|
40485
|
+
width: 200
|
|
40486
|
+
},
|
|
40487
|
+
{
|
|
40488
|
+
field: "headerDisplay",
|
|
40489
|
+
headerText: "Column name display",
|
|
40490
|
+
template: headerDisplayTemplate,
|
|
40481
40491
|
visible: true,
|
|
40482
40492
|
width: 200
|
|
40483
40493
|
},
|
|
@@ -40499,7 +40509,7 @@ const SidebarSetColumn = (props) => {
|
|
|
40499
40509
|
},
|
|
40500
40510
|
{
|
|
40501
40511
|
field: "width",
|
|
40502
|
-
headerText: "Column width",
|
|
40512
|
+
headerText: "Column width(px)",
|
|
40503
40513
|
textAlign: "right",
|
|
40504
40514
|
visible: true,
|
|
40505
40515
|
template: widthColumnTemplate,
|
|
@@ -40517,7 +40527,7 @@ const SidebarSetColumn = (props) => {
|
|
|
40517
40527
|
justifyContent: col.textAlign ?? "left"
|
|
40518
40528
|
}, className: "r-headercell-div", children: t(col.headerText ?? "") }) })) }, `header-${indexCol}`));
|
|
40519
40529
|
};
|
|
40520
|
-
return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width:
|
|
40530
|
+
return (jsxRuntime.jsxs(Sidebar, { open: openSidebar, toggleSidebar: handleCancel, width: 900, children: [jsxRuntime.jsx(ModalHeader, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }), jsxRuntime.jsx("div", { className: "ms-2 r-table-edit", children: jsxRuntime.jsx("div", { className: "r-grid", children: jsxRuntime.jsx("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: jsxRuntime.jsxs("table", { style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { className: "r-gridheader", children: jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
|
|
40521
40531
|
return renderHeaderCol(col, index);
|
|
40522
40532
|
}) }) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
|
|
40523
40533
|
return (jsxRuntime.jsx("tr", { className: classNames$2("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }), children: columns.map((col, indexCol) => {
|
|
@@ -42487,7 +42497,7 @@ const HeaderTableCol$1 = (props) => {
|
|
|
42487
42497
|
setSelectedRows([]);
|
|
42488
42498
|
}
|
|
42489
42499
|
}
|
|
42490
|
-
} })), col.field !== 'checkbox' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsxRuntime.jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(col.
|
|
42500
|
+
} })), col.field !== 'checkbox' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsxRuntime.jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(col.headerDisplay ?? '') }), checkOverflow() && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerDisplay ?? '') })] }), col.field !== '#' && col.field !== 'command' && jsxRuntime.jsxs("div", { className: 'd-flex', children: [allowOrder && order?.direction === 'asc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_6)", children: jsxRuntime.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" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_6", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowOrder && order?.direction === 'desc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_2)", children: jsxRuntime.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" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_2", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFilter && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && jsxRuntime.jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
|
|
42491
42501
|
setOpenFilter(!openFilter);
|
|
42492
42502
|
e.stopPropagation();
|
|
42493
42503
|
}, onClick: (e) => {
|
|
@@ -43777,7 +43787,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
43777
43787
|
setOpenPopupSetupColumn(!openPopupSetupColumn);
|
|
43778
43788
|
}, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
|
|
43779
43789
|
if (saveSettingColumn) {
|
|
43780
|
-
saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.
|
|
43790
|
+
saveSettingColumn(newColumns.map((x) => ({ field: x.field, headerText: x.headerDisplay, visible: x.visible, fixedType: x.fixedType, width: x.width })));
|
|
43781
43791
|
}
|
|
43782
43792
|
} })] }));
|
|
43783
43793
|
});
|