react-table-edit 1.4.20 → 1.4.22
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 +80 -55
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +80 -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,27 @@ 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 (filter) {
|
|
65526
|
+
filter.ope = operator;
|
|
65527
|
+
filter.value = valueFilter ?? '';
|
|
65528
|
+
}
|
|
65529
|
+
else {
|
|
65530
|
+
filterBy.push({ key: column.field, ope: operator, value: valueFilter ?? '' });
|
|
65531
|
+
}
|
|
65532
|
+
changeFilter([...filterBy]);
|
|
65533
|
+
setOpenFilter(false);
|
|
65534
|
+
};
|
|
65535
|
+
return (jsxRuntime.jsxs("div", { className: 'r-filter-popup', onKeyDown: (e) => {
|
|
65536
|
+
if (e.code === 'Enter' || e.code === 'NumpadEnter') {
|
|
65537
|
+
handleSave();
|
|
65538
|
+
e.stopPropagation();
|
|
65539
|
+
}
|
|
65540
|
+
}, 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: () => {
|
|
65533
65541
|
if (filterBy) {
|
|
65534
65542
|
changeFilter(filterBy.filter((x) => x.key !== column.field));
|
|
65535
65543
|
}
|
|
@@ -65582,6 +65590,9 @@ const RenderContentCol = (props) => {
|
|
|
65582
65590
|
else if (col.type === 'datetime') {
|
|
65583
65591
|
value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
|
|
65584
65592
|
}
|
|
65593
|
+
if (col.template) {
|
|
65594
|
+
value = col.template(row, indexRow) ?? '';
|
|
65595
|
+
}
|
|
65585
65596
|
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div'), children: jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-content'), style: {
|
|
65586
65597
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
65587
65598
|
}, 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 +65634,7 @@ const RenderColGroup = ({ contentColumns }) => (jsxRuntime.jsx("colgroup", { chi
|
|
|
65623
65634
|
maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
|
|
65624
65635
|
} }, index))) }));
|
|
65625
65636
|
|
|
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 }) => {
|
|
65637
|
+
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
65638
|
const gridRef = React$5.useRef(null);
|
|
65630
65639
|
const [startIndex, setStartIndex] = React$5.useState(0);
|
|
65631
65640
|
const [selectedRows, setSelectedRows] = React$5.useState([]);
|
|
@@ -65633,20 +65642,36 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 28, height = 400, colum
|
|
|
65633
65642
|
const [filterBy, setFilterBy] = React$5.useState([]);
|
|
65634
65643
|
const [searchTerm, setSearchTerm] = React$5.useState('');
|
|
65635
65644
|
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
|
|
65645
|
+
//trường liên quan đến virtul loading
|
|
65636
65646
|
const visibleRowCount = Math.ceil(height / rowHeight) + 5;
|
|
65637
|
-
const
|
|
65647
|
+
const buffer = 10; // số dòng dự phòng phía trên và dưới
|
|
65648
|
+
const adjustedStartIndex = Math.max(startIndex - buffer, 0);
|
|
65649
|
+
const adjustedEndIndex = Math.min(startIndex + visibleRowCount + buffer, dataSource.length);
|
|
65650
|
+
const visibleData = dataSource.slice(adjustedStartIndex, adjustedEndIndex);
|
|
65638
65651
|
const { t } = reactI18next.useTranslation();
|
|
65639
65652
|
const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => calculateTableStructure(columns), [columns]);
|
|
65640
|
-
const
|
|
65641
|
-
|
|
65653
|
+
const scrollTimeoutRef = React$5.useRef(null);
|
|
65654
|
+
const lastScrollTop = React$5.useRef(0);
|
|
65655
|
+
const handleScroll = (e) => {
|
|
65656
|
+
if (!gridRef.current) {
|
|
65657
|
+
return;
|
|
65658
|
+
}
|
|
65659
|
+
// Nếu không có sự thay đổi về scrollTop => người dùng chỉ scroll ngang => không xử lý
|
|
65660
|
+
if (e.target.scrollTop === lastScrollTop.current) {
|
|
65661
|
+
return;
|
|
65662
|
+
}
|
|
65663
|
+
lastScrollTop.current = e.target.scrollTop;
|
|
65664
|
+
if (scrollTimeoutRef.current !== null) {
|
|
65665
|
+
cancelAnimationFrame(scrollTimeoutRef.current);
|
|
65666
|
+
}
|
|
65667
|
+
scrollTimeoutRef.current = requestAnimationFrame(() => {
|
|
65642
65668
|
const scrollTop = gridRef.current.scrollTop;
|
|
65643
65669
|
const newStartIndex = Math.floor(scrollTop / rowHeight);
|
|
65644
65670
|
if (newStartIndex !== startIndex) {
|
|
65645
65671
|
setStartIndex(newStartIndex);
|
|
65646
65672
|
}
|
|
65647
|
-
}
|
|
65673
|
+
});
|
|
65648
65674
|
};
|
|
65649
|
-
const visibleData = dataSource.slice(startIndex, Math.min(startIndex + visibleRowCount, dataSource.length));
|
|
65650
65675
|
const handleCommandClick = (id, rowData, index) => {
|
|
65651
65676
|
if (commandClick) {
|
|
65652
65677
|
commandClick({ id, rowData, index });
|
|
@@ -65695,32 +65720,32 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 28, height = 400, colum
|
|
|
65695
65720
|
}
|
|
65696
65721
|
}
|
|
65697
65722
|
};
|
|
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
|
-
|
|
65723
|
+
return (jsxRuntime.jsxs("div", { className: "react-table-edit r-virtualized-table", 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) => {
|
|
65724
|
+
setFilterBy([...val]);
|
|
65725
|
+
if (changeFilter) {
|
|
65726
|
+
changeFilter(val);
|
|
65727
|
+
}
|
|
65728
|
+
}, changeOrder: (val) => {
|
|
65729
|
+
setOrderBy([...val]);
|
|
65730
|
+
if (changeOrder) {
|
|
65731
|
+
changeOrder(val);
|
|
65732
|
+
}
|
|
65733
|
+
}, 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) => {
|
|
65734
|
+
const indexRow = index + startIndex;
|
|
65735
|
+
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
65736
|
+
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}`));
|
|
65737
|
+
}), 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) => {
|
|
65738
|
+
const item = columnsAggregate?.find((x) => x.field === col.field);
|
|
65739
|
+
let sumValue = item?.value;
|
|
65740
|
+
if (!item && col.haveSum === true && col.type === "numeric") {
|
|
65741
|
+
sumValue = dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
|
|
65707
65742
|
}
|
|
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, {})] }));
|
|
65743
|
+
return col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
65744
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
65745
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
65746
|
+
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
65747
|
+
}, 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}`);
|
|
65748
|
+
}) }) : 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
65749
|
};
|
|
65725
65750
|
|
|
65726
65751
|
exports.ExportExcelComponent = ExportExcelComponent;
|