react-table-edit 1.4.20 → 1.4.21
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/type/index.d.ts +4 -7
- package/dist/component/virtualized-table/header.d.ts +2 -0
- package/dist/component/virtualized-table/index.d.ts +1 -0
- package/dist/index.d.ts +6 -8
- package/dist/index.js +85 -55
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +85 -55
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -375,7 +375,10 @@ export type IColumnVirtualizedTable = {
|
|
|
375
375
|
visible?: boolean;
|
|
376
376
|
/** Kiểu xem cột */
|
|
377
377
|
type?: IViewType;
|
|
378
|
-
|
|
378
|
+
/** Kiểu lọc cột */
|
|
379
|
+
filterType?: IFilterType;
|
|
380
|
+
/** Cho phép lọc cột */
|
|
381
|
+
allowFilter?: boolean;
|
|
379
382
|
/** Căn lề */
|
|
380
383
|
textAlign?: ITextAlign;
|
|
381
384
|
/** Cố định trái/phải */
|
|
@@ -393,12 +396,6 @@ export type IColumnVirtualizedTable = {
|
|
|
393
396
|
/** Số dòng chiếm (rowspan) */
|
|
394
397
|
rowspan?: number;
|
|
395
398
|
};
|
|
396
|
-
export type IFSettingFilterColumn = {
|
|
397
|
-
/** Kiểu lọc cột */
|
|
398
|
-
filterType?: IFilterType;
|
|
399
|
-
allowFilter?: boolean;
|
|
400
|
-
options: any[];
|
|
401
|
-
};
|
|
402
399
|
export type IFOrderTable = {
|
|
403
400
|
key: string;
|
|
404
401
|
direction: 'asc' | 'desc';
|
|
@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
|
|
|
2
2
|
import { IColumnVirtualizedTable, IFFilterTable, IFOrderTable, IFTableEditFormat } from "../type";
|
|
3
3
|
import 'react-resizable/css/styles.css';
|
|
4
4
|
type IFDataProps = {
|
|
5
|
+
idTable: string;
|
|
5
6
|
selectEnable: boolean;
|
|
6
7
|
dataSource: any[];
|
|
7
8
|
setSelectedRows: Dispatch<SetStateAction<any[]>>;
|
|
@@ -24,6 +25,7 @@ type IFDataProps = {
|
|
|
24
25
|
filterBy: IFFilterTable[];
|
|
25
26
|
orderBy: IFOrderTable[];
|
|
26
27
|
container: any;
|
|
28
|
+
optionsFilter: any;
|
|
27
29
|
formatSetting?: IFTableEditFormat;
|
|
28
30
|
};
|
|
29
31
|
declare const HeaderTableCol: (props: IFDataProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -16,6 +16,7 @@ type VirtualTableProps = {
|
|
|
16
16
|
toolbarSetting?: IFTableEditToolbar;
|
|
17
17
|
searchSetting?: IFTableEditSearchSetting;
|
|
18
18
|
columnsAggregate?: IColumnsVirtualizedAgg[];
|
|
19
|
+
optionsFilter?: any;
|
|
19
20
|
setColumns?: (columns: IColumnVirtualizedTable[]) => void;
|
|
20
21
|
commandClick?: (data: any) => void;
|
|
21
22
|
changeFilter?: (data: IFFilterTable[]) => void;
|
package/dist/index.d.ts
CHANGED
|
@@ -379,7 +379,10 @@ type IColumnVirtualizedTable = {
|
|
|
379
379
|
visible?: boolean;
|
|
380
380
|
/** Kiểu xem cột */
|
|
381
381
|
type?: IViewType;
|
|
382
|
-
|
|
382
|
+
/** Kiểu lọc cột */
|
|
383
|
+
filterType?: IFilterType;
|
|
384
|
+
/** Cho phép lọc cột */
|
|
385
|
+
allowFilter?: boolean;
|
|
383
386
|
/** Căn lề */
|
|
384
387
|
textAlign?: ITextAlign;
|
|
385
388
|
/** Cố định trái/phải */
|
|
@@ -397,12 +400,6 @@ type IColumnVirtualizedTable = {
|
|
|
397
400
|
/** Số dòng chiếm (rowspan) */
|
|
398
401
|
rowspan?: number;
|
|
399
402
|
};
|
|
400
|
-
type IFSettingFilterColumn = {
|
|
401
|
-
/** Kiểu lọc cột */
|
|
402
|
-
filterType?: IFilterType;
|
|
403
|
-
allowFilter?: boolean;
|
|
404
|
-
options: any[];
|
|
405
|
-
};
|
|
406
403
|
type IFOrderTable = {
|
|
407
404
|
key: string;
|
|
408
405
|
direction: 'asc' | 'desc';
|
|
@@ -729,6 +726,7 @@ type VirtualTableProps = {
|
|
|
729
726
|
toolbarSetting?: IFTableEditToolbar;
|
|
730
727
|
searchSetting?: IFTableEditSearchSetting;
|
|
731
728
|
columnsAggregate?: IColumnsVirtualizedAgg[];
|
|
729
|
+
optionsFilter?: any;
|
|
732
730
|
setColumns?: (columns: IColumnVirtualizedTable[]) => void;
|
|
733
731
|
commandClick?: (data: any) => void;
|
|
734
732
|
changeFilter?: (data: IFFilterTable[]) => void;
|
|
@@ -736,4 +734,4 @@ type VirtualTableProps = {
|
|
|
736
734
|
};
|
|
737
735
|
declare const VirtualTable: React__default.FC<VirtualTableProps>;
|
|
738
736
|
|
|
739
|
-
export { ExportExcelComponent, FindNodeByPath, type FromItemsField, type IColumnTable, type IColumnVirtualizedTable, type IColumnsVirtualizedAgg, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFFilterTable, type IFOrderTable, type IFPageSize, type IFPropsDetail, type
|
|
737
|
+
export { ExportExcelComponent, FindNodeByPath, type FromItemsField, type IColumnTable, type IColumnVirtualizedTable, type IColumnsVirtualizedAgg, type ICommandItem, type IFColumnSelectTable, type IFColumnSelectTableTree, type IFCurrentPage, type IFCurrentPageConfig, type IFFilterTable, type IFOrderTable, type IFPageSize, type IFPropsDetail, type IFTableEditButton, type IFTableEditFormat, type IFTableEditPaging, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFTableSelectFormat, type IFTableTreeSelectFormat, type IFToolbarOptions, type IHeaderColumnTable, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, VirtualTable, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
|
package/dist/index.js
CHANGED
|
@@ -65407,8 +65407,9 @@ const ImportExcelComponent = (props) => {
|
|
|
65407
65407
|
};
|
|
65408
65408
|
|
|
65409
65409
|
const HeaderTableCol = (props) => {
|
|
65410
|
-
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, columns, setColumns, orderBy, changeFilter, filterBy, changeOrder, allowFilter, allowOrder, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, formatSetting, isMulti } = props;
|
|
65410
|
+
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, columns, setColumns, orderBy, changeFilter, filterBy, changeOrder, allowFilter, allowOrder, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, formatSetting, optionsFilter, idTable, isMulti } = props;
|
|
65411
65411
|
const { t } = reactI18next.useTranslation();
|
|
65412
|
+
const headerRef = React$5.useRef(null);
|
|
65412
65413
|
const order = orderBy.find((item) => item.key === col.field);
|
|
65413
65414
|
const [openFilter, setOpenFilter] = React$5.useState(false);
|
|
65414
65415
|
const filter = filterBy.find((item) => item.key === col.field);
|
|
@@ -65429,6 +65430,9 @@ const HeaderTableCol = (props) => {
|
|
|
65429
65430
|
}
|
|
65430
65431
|
}
|
|
65431
65432
|
};
|
|
65433
|
+
const checkOverflow = () => {
|
|
65434
|
+
return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
|
|
65435
|
+
};
|
|
65432
65436
|
return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.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: jsxRuntime.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: {
|
|
65433
65437
|
top: `${indexParent * 42}px`,
|
|
65434
65438
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol ?? 0] : undefined,
|
|
@@ -65456,7 +65460,7 @@ const HeaderTableCol = (props) => {
|
|
|
65456
65460
|
setSelectedRows([]);
|
|
65457
65461
|
}
|
|
65458
65462
|
}
|
|
65459
|
-
} })), col.type !== 'checkbox' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.
|
|
65463
|
+
} })), col.type !== '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.headerText ?? '') }), checkOverflow() && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerText ?? '') })] }), col.type !== '#' && col.type !== '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 && jsxRuntime.jsxs(Dropdown$1, { isOpen: openFilter, toggle: (e) => {
|
|
65460
65464
|
setOpenFilter(!openFilter);
|
|
65461
65465
|
e.stopPropagation();
|
|
65462
65466
|
}, onClick: (e) => {
|
|
@@ -65464,11 +65468,11 @@ const HeaderTableCol = (props) => {
|
|
|
65464
65468
|
}, children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', className: 'p-0 r-filter', children: jsxRuntime.jsxs("svg", { className: classNames$1('ms-25', { 'active': filter }), width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "stroke-width": "1.5", "font-size": "12", children: [jsxRuntime.jsx("path", { d: "M14.7 11.998v10.506c.052.4-.08.826-.381 1.106a1.306 1.306 0 0 1-.925.39 1.289 1.289 0 0 1-.926-.39l-2.637-2.68a1.323 1.323 0 0 1-.38-1.106v-7.826h-.04L1.85 2.16A1.348 1.348 0 0 1 2.076.293C2.325.107 2.6 0 2.888 0h18.373c.289 0 .564.107.814.293a1.348 1.348 0 0 1 .223 1.866L14.738 12H14.7Z", fill: "currentColor" }), " "] }) }), jsxRuntime.jsx(DropdownMenu$1, { container: container, className: 'formula-dropdown icon-dropdown p-0', style: {
|
|
65465
65469
|
borderRadius: 8,
|
|
65466
65470
|
zIndex: 1056
|
|
65467
|
-
}, children: jsxRuntime.jsx(DropdownItem$1, { className: 'p-1', style: { borderRadius: '6px' }, tag: 'div', header: true, children: jsxRuntime.jsx(RenderFilterElement, { setOpenFilter: setOpenFilter, filter: filter, filterBy: filterBy, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] })] })] })] }) }) })) }, `header-${indexCol}`));
|
|
65471
|
+
}, children: jsxRuntime.jsx(DropdownItem$1, { className: 'p-1', style: { borderRadius: '6px' }, tag: 'div', header: true, children: jsxRuntime.jsx(RenderFilterElement, { setOpenFilter: setOpenFilter, filter: filter, filterBy: filterBy, optionsFilter: optionsFilter, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] })] })] })] }) }) })) }, `header-${indexCol}`));
|
|
65468
65472
|
};
|
|
65469
|
-
const RenderFilterElement = ({ filter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
|
|
65473
|
+
const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
|
|
65470
65474
|
const { t } = reactI18next.useTranslation();
|
|
65471
|
-
const [operator, setOperator] = React$5.useState(filter?.ope ?? 'contains');
|
|
65475
|
+
const [operator, setOperator] = React$5.useState(filter?.ope ?? ((!column.filterType && column.type === 'numeric') || column.filterType === 'select' ? 'equal' : 'contains'));
|
|
65472
65476
|
const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
|
|
65473
65477
|
const RenderStringFilter = () => {
|
|
65474
65478
|
const options = [
|
|
@@ -65502,9 +65506,7 @@ const RenderFilterElement = ({ filter, formatSetting, filterBy, setOpenFilter, c
|
|
|
65502
65506
|
let floatValue = parseFloat(valueFilter ?? '0');
|
|
65503
65507
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === (operator)), options: options, onChange: (val) => {
|
|
65504
65508
|
setOperator(val.value);
|
|
65505
|
-
}, placeholder: 'Select' }), jsxRuntime.jsx(
|
|
65506
|
-
setValueFilter(val.target.value);
|
|
65507
|
-
} }), jsxRuntime.jsx(NumericFormat, { style: { textAlign: column.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(valueFilter, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', column.numericSettings?.fraction), className: classNames$1('form-control my-1 input-numeric'), onValueChange: (values) => {
|
|
65509
|
+
}, placeholder: t('Select') }), jsxRuntime.jsx(NumericFormat, { style: { textAlign: column.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(valueFilter, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', column.numericSettings?.fraction), className: classNames$1('form-control my-1 input-numeric'), onValueChange: (values) => {
|
|
65508
65510
|
floatValue = values?.floatValue;
|
|
65509
65511
|
}, onFocus: (e) => {
|
|
65510
65512
|
e.target.setSelectionRange(0, e.target.innerText.length - 1);
|
|
@@ -65515,21 +65517,32 @@ const RenderFilterElement = ({ filter, formatSetting, filterBy, setOpenFilter, c
|
|
|
65515
65517
|
} })] }));
|
|
65516
65518
|
};
|
|
65517
65519
|
const RenderSelectFilter = () => {
|
|
65518
|
-
return (jsxRuntime.jsx(
|
|
65519
|
-
|
|
65520
|
-
}, placeholder: 'Select' }) }));
|
|
65520
|
+
return (jsxRuntime.jsx("div", { className: 'mb-1', children: jsxRuntime.jsx(SelectTable, { value: optionsFilter ? optionsFilter[column.field]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[column.field]) ?? [], isClearable: true, onChange: (val) => {
|
|
65521
|
+
setValueFilter(val?.value);
|
|
65522
|
+
}, placeholder: t('Select') }) }));
|
|
65521
65523
|
};
|
|
65522
|
-
|
|
65523
|
-
|
|
65524
|
-
|
|
65525
|
-
|
|
65526
|
-
|
|
65527
|
-
|
|
65528
|
-
|
|
65529
|
-
|
|
65530
|
-
|
|
65531
|
-
|
|
65532
|
-
|
|
65524
|
+
const handleSave = () => {
|
|
65525
|
+
if (valueFilter || valueFilter === 0) {
|
|
65526
|
+
if (filter) {
|
|
65527
|
+
filter.ope = operator;
|
|
65528
|
+
filter.value = valueFilter;
|
|
65529
|
+
}
|
|
65530
|
+
else {
|
|
65531
|
+
filterBy.push({ key: column.field, ope: operator, value: valueFilter });
|
|
65532
|
+
}
|
|
65533
|
+
changeFilter([...filterBy]);
|
|
65534
|
+
}
|
|
65535
|
+
else {
|
|
65536
|
+
changeFilter(filterBy.filter((x) => x.key !== column.field));
|
|
65537
|
+
}
|
|
65538
|
+
setOpenFilter(false);
|
|
65539
|
+
};
|
|
65540
|
+
return (jsxRuntime.jsxs("div", { className: 'r-filter-popup', onKeyDown: (e) => {
|
|
65541
|
+
if (e.code === 'Enter' || e.code === 'NumpadEnter') {
|
|
65542
|
+
handleSave();
|
|
65543
|
+
e.stopPropagation();
|
|
65544
|
+
}
|
|
65545
|
+
}, 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, { outline: true, color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50', onClick: handleSave, children: t('Filter') }), jsxRuntime.jsx(Button$1, { className: 'py-25 px-50', outline: true, style: { borderRadius: 3 }, onClick: () => {
|
|
65533
65546
|
if (filterBy) {
|
|
65534
65547
|
changeFilter(filterBy.filter((x) => x.key !== column.field));
|
|
65535
65548
|
}
|
|
@@ -65582,6 +65595,9 @@ const RenderContentCol = (props) => {
|
|
|
65582
65595
|
else if (col.type === 'datetime') {
|
|
65583
65596
|
value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
|
|
65584
65597
|
}
|
|
65598
|
+
if (col.template) {
|
|
65599
|
+
value = col.template(row, indexRow) ?? '';
|
|
65600
|
+
}
|
|
65585
65601
|
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div'), children: jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-content'), style: {
|
|
65586
65602
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
65587
65603
|
}, children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), col.haveToolTip && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }) }));
|
|
@@ -65623,9 +65639,7 @@ const RenderColGroup = ({ contentColumns }) => (jsxRuntime.jsx("colgroup", { chi
|
|
|
65623
65639
|
maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
|
|
65624
65640
|
} }, index))) }));
|
|
65625
65641
|
|
|
65626
|
-
const
|
|
65627
|
-
|
|
65628
|
-
const VirtualTable = ({ idTable, dataSource, rowHeight = 28, height = 400, columns, isMutil, isLoading, selectEnable, formatSetting, commandClick, allowFilter, allowOrder, setColumns, pagingSetting, changeFilter, changeOrder, searchSetting, columnsAggregate, toolbarSetting }) => {
|
|
65642
|
+
const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, columns, isMutil, isLoading, selectEnable, formatSetting, commandClick, allowFilter, allowOrder, setColumns, pagingSetting, changeFilter, changeOrder, searchSetting, columnsAggregate, toolbarSetting, optionsFilter }) => {
|
|
65629
65643
|
const gridRef = React$5.useRef(null);
|
|
65630
65644
|
const [startIndex, setStartIndex] = React$5.useState(0);
|
|
65631
65645
|
const [selectedRows, setSelectedRows] = React$5.useState([]);
|
|
@@ -65633,20 +65647,36 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 28, height = 400, colum
|
|
|
65633
65647
|
const [filterBy, setFilterBy] = React$5.useState([]);
|
|
65634
65648
|
const [searchTerm, setSearchTerm] = React$5.useState('');
|
|
65635
65649
|
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
|
|
65650
|
+
//trường liên quan đến virtul loading
|
|
65636
65651
|
const visibleRowCount = Math.ceil(height / rowHeight) + 5;
|
|
65637
|
-
const
|
|
65652
|
+
const buffer = 10; // số dòng dự phòng phía trên và dưới
|
|
65653
|
+
const adjustedStartIndex = Math.max(startIndex - buffer, 0);
|
|
65654
|
+
const adjustedEndIndex = Math.min(startIndex + visibleRowCount + buffer, dataSource.length);
|
|
65655
|
+
const visibleData = dataSource.slice(adjustedStartIndex, adjustedEndIndex);
|
|
65638
65656
|
const { t } = reactI18next.useTranslation();
|
|
65639
65657
|
const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => calculateTableStructure(columns), [columns]);
|
|
65640
|
-
const
|
|
65641
|
-
|
|
65658
|
+
const scrollTimeoutRef = React$5.useRef(null);
|
|
65659
|
+
const lastScrollTop = React$5.useRef(0);
|
|
65660
|
+
const handleScroll = (e) => {
|
|
65661
|
+
if (!gridRef.current) {
|
|
65662
|
+
return;
|
|
65663
|
+
}
|
|
65664
|
+
// Nếu không có sự thay đổi về scrollTop => người dùng chỉ scroll ngang => không xử lý
|
|
65665
|
+
if (e.target.scrollTop === lastScrollTop.current) {
|
|
65666
|
+
return;
|
|
65667
|
+
}
|
|
65668
|
+
lastScrollTop.current = e.target.scrollTop;
|
|
65669
|
+
if (scrollTimeoutRef.current !== null) {
|
|
65670
|
+
cancelAnimationFrame(scrollTimeoutRef.current);
|
|
65671
|
+
}
|
|
65672
|
+
scrollTimeoutRef.current = requestAnimationFrame(() => {
|
|
65642
65673
|
const scrollTop = gridRef.current.scrollTop;
|
|
65643
65674
|
const newStartIndex = Math.floor(scrollTop / rowHeight);
|
|
65644
65675
|
if (newStartIndex !== startIndex) {
|
|
65645
65676
|
setStartIndex(newStartIndex);
|
|
65646
65677
|
}
|
|
65647
|
-
}
|
|
65678
|
+
});
|
|
65648
65679
|
};
|
|
65649
|
-
const visibleData = dataSource.slice(startIndex, Math.min(startIndex + visibleRowCount, dataSource.length));
|
|
65650
65680
|
const handleCommandClick = (id, rowData, index) => {
|
|
65651
65681
|
if (commandClick) {
|
|
65652
65682
|
commandClick({ id, rowData, index });
|
|
@@ -65695,32 +65725,32 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 28, height = 400, colum
|
|
|
65695
65725
|
}
|
|
65696
65726
|
}
|
|
65697
65727
|
};
|
|
65698
|
-
return (jsxRuntime.jsxs("div", { className: "react-table-edit", children: [jsxRuntime.jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.
|
|
65699
|
-
|
|
65700
|
-
|
|
65701
|
-
|
|
65702
|
-
|
|
65703
|
-
|
|
65704
|
-
|
|
65705
|
-
|
|
65706
|
-
|
|
65728
|
+
return (jsxRuntime.jsxs("div", { className: "react-table-edit", children: [jsxRuntime.jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: 'r-gridheader', children: headerColumns.map((rowColumn, indexParent) => (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (jsxRuntime.jsx(HeaderTableCol, { idTable: idTable, col: column, dataSource: dataSource, indexCol: indexColumn, indexParent: indexParent, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, columns: contentColumns, setColumns: setColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, orderBy: orderBy, allowFilter: allowFilter, allowOrder: allowOrder, filterBy: filterBy, optionsFilter: optionsFilter, changeFilter: (val) => {
|
|
65729
|
+
setFilterBy([...val]);
|
|
65730
|
+
if (changeFilter) {
|
|
65731
|
+
changeFilter(val);
|
|
65732
|
+
}
|
|
65733
|
+
}, changeOrder: (val) => {
|
|
65734
|
+
setOrderBy([...val]);
|
|
65735
|
+
if (changeOrder) {
|
|
65736
|
+
changeOrder(val);
|
|
65737
|
+
}
|
|
65738
|
+
}, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, indexParent))) }), jsxRuntime.jsxs("tbody", { className: 'r-gridcontent', children: [adjustedStartIndex > 0 && (jsxRuntime.jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
|
|
65739
|
+
const indexRow = index + startIndex;
|
|
65740
|
+
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
65741
|
+
return (jsxRuntime.jsx("tr", { className: classNames$1('r-row'), children: contentColumns.map((column, indexCol) => (jsxRuntime.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-${indexRow}`));
|
|
65742
|
+
}), dataSource.length > adjustedEndIndex && (jsxRuntime.jsx("tr", { style: { height: (dataSource.length - adjustedEndIndex) * rowHeight }, children: jsxRuntime.jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), dataSource.length > 0 && jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsxRuntime.jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
|
|
65743
|
+
const item = columnsAggregate?.find((x) => x.field === col.field);
|
|
65744
|
+
let sumValue = item?.value;
|
|
65745
|
+
if (!item && col.haveSum === true && col.type === "numeric") {
|
|
65746
|
+
sumValue = dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
|
|
65707
65747
|
}
|
|
65708
|
-
|
|
65709
|
-
|
|
65710
|
-
|
|
65711
|
-
|
|
65712
|
-
|
|
65713
|
-
|
|
65714
|
-
let sumValue = item?.value;
|
|
65715
|
-
if (!item && col.haveSum === true && col.type === "numeric") {
|
|
65716
|
-
sumValue = dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
|
|
65717
|
-
}
|
|
65718
|
-
return col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
65719
|
-
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
65720
|
-
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
65721
|
-
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
65722
|
-
}, 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}`);
|
|
65723
|
-
}) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }) })] }), pagingSetting?.allowPaging ? jsxRuntime.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 }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
|
|
65748
|
+
return col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
65749
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
65750
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
65751
|
+
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
65752
|
+
}, 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}`);
|
|
65753
|
+
}) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}) })] }), (((dataSource.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?.totalItem ?? 0), onChangePageSize: onChangePageSize }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
|
|
65724
65754
|
};
|
|
65725
65755
|
|
|
65726
65756
|
exports.ExportExcelComponent = ExportExcelComponent;
|