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
package/dist/index.mjs
CHANGED
|
@@ -65379,8 +65379,9 @@ const ImportExcelComponent = (props) => {
|
|
|
65379
65379
|
};
|
|
65380
65380
|
|
|
65381
65381
|
const HeaderTableCol = (props) => {
|
|
65382
|
-
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;
|
|
65382
|
+
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;
|
|
65383
65383
|
const { t } = useTranslation();
|
|
65384
|
+
const headerRef = useRef(null);
|
|
65384
65385
|
const order = orderBy.find((item) => item.key === col.field);
|
|
65385
65386
|
const [openFilter, setOpenFilter] = useState(false);
|
|
65386
65387
|
const filter = filterBy.find((item) => item.key === col.field);
|
|
@@ -65401,6 +65402,9 @@ const HeaderTableCol = (props) => {
|
|
|
65401
65402
|
}
|
|
65402
65403
|
}
|
|
65403
65404
|
};
|
|
65405
|
+
const checkOverflow = () => {
|
|
65406
|
+
return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
|
|
65407
|
+
};
|
|
65404
65408
|
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: {
|
|
65405
65409
|
top: `${indexParent * 42}px`,
|
|
65406
65410
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol ?? 0] : undefined,
|
|
@@ -65428,7 +65432,7 @@ const HeaderTableCol = (props) => {
|
|
|
65428
65432
|
setSelectedRows([]);
|
|
65429
65433
|
}
|
|
65430
65434
|
}
|
|
65431
|
-
} })), col.type !== 'checkbox' && jsxs(Fragment$1, { children: [
|
|
65435
|
+
} })), col.type !== '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.type !== '#' && col.type !== '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) => {
|
|
65432
65436
|
setOpenFilter(!openFilter);
|
|
65433
65437
|
e.stopPropagation();
|
|
65434
65438
|
}, onClick: (e) => {
|
|
@@ -65436,11 +65440,11 @@ const HeaderTableCol = (props) => {
|
|
|
65436
65440
|
}, children: [jsx(DropdownToggle$1, { tag: 'div', className: 'p-0 r-filter', children: 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: [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" }), " "] }) }), jsx(DropdownMenu$1, { container: container, className: 'formula-dropdown icon-dropdown p-0', style: {
|
|
65437
65441
|
borderRadius: 8,
|
|
65438
65442
|
zIndex: 1056
|
|
65439
|
-
}, children: jsx(DropdownItem$1, { className: 'p-1', style: { borderRadius: '6px' }, tag: 'div', header: true, children: jsx(RenderFilterElement, { setOpenFilter: setOpenFilter, filter: filter, filterBy: filterBy, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] })] })] })] }) }) })) }, `header-${indexCol}`));
|
|
65443
|
+
}, children: jsx(DropdownItem$1, { className: 'p-1', style: { borderRadius: '6px' }, tag: 'div', header: true, children: jsx(RenderFilterElement, { setOpenFilter: setOpenFilter, filter: filter, filterBy: filterBy, optionsFilter: optionsFilter, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] })] })] })] }) }) })) }, `header-${indexCol}`));
|
|
65440
65444
|
};
|
|
65441
|
-
const RenderFilterElement = ({ filter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
|
|
65445
|
+
const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
|
|
65442
65446
|
const { t } = useTranslation();
|
|
65443
|
-
const [operator, setOperator] = useState(filter?.ope ?? 'contains');
|
|
65447
|
+
const [operator, setOperator] = useState(filter?.ope ?? ((!column.filterType && column.type === 'numeric') || column.filterType === 'select' ? 'equal' : 'contains'));
|
|
65444
65448
|
const [valueFilter, setValueFilter] = useState(filter?.value ?? '');
|
|
65445
65449
|
const RenderStringFilter = () => {
|
|
65446
65450
|
const options = [
|
|
@@ -65474,9 +65478,7 @@ const RenderFilterElement = ({ filter, formatSetting, filterBy, setOpenFilter, c
|
|
|
65474
65478
|
let floatValue = parseFloat(valueFilter ?? '0');
|
|
65475
65479
|
return (jsxs(Fragment$1, { children: [jsx(SelectTable, { value: options.find((x) => x.value === (operator)), options: options, onChange: (val) => {
|
|
65476
65480
|
setOperator(val.value);
|
|
65477
|
-
}, placeholder: 'Select' }), jsx(
|
|
65478
|
-
setValueFilter(val.target.value);
|
|
65479
|
-
} }), 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) => {
|
|
65481
|
+
}, placeholder: t('Select') }), 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) => {
|
|
65480
65482
|
floatValue = values?.floatValue;
|
|
65481
65483
|
}, onFocus: (e) => {
|
|
65482
65484
|
e.target.setSelectionRange(0, e.target.innerText.length - 1);
|
|
@@ -65487,21 +65489,32 @@ const RenderFilterElement = ({ filter, formatSetting, filterBy, setOpenFilter, c
|
|
|
65487
65489
|
} })] }));
|
|
65488
65490
|
};
|
|
65489
65491
|
const RenderSelectFilter = () => {
|
|
65490
|
-
return (jsx(
|
|
65491
|
-
|
|
65492
|
-
}, placeholder: 'Select' }) }));
|
|
65492
|
+
return (jsx("div", { className: 'mb-1', children: jsx(SelectTable, { value: optionsFilter ? optionsFilter[column.field]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[column.field]) ?? [], isClearable: true, onChange: (val) => {
|
|
65493
|
+
setValueFilter(val?.value);
|
|
65494
|
+
}, placeholder: t('Select') }) }));
|
|
65493
65495
|
};
|
|
65494
|
-
|
|
65495
|
-
|
|
65496
|
-
|
|
65497
|
-
|
|
65498
|
-
|
|
65499
|
-
|
|
65500
|
-
|
|
65501
|
-
|
|
65502
|
-
|
|
65503
|
-
|
|
65504
|
-
|
|
65496
|
+
const handleSave = () => {
|
|
65497
|
+
if (valueFilter || valueFilter === 0) {
|
|
65498
|
+
if (filter) {
|
|
65499
|
+
filter.ope = operator;
|
|
65500
|
+
filter.value = valueFilter;
|
|
65501
|
+
}
|
|
65502
|
+
else {
|
|
65503
|
+
filterBy.push({ key: column.field, ope: operator, value: valueFilter });
|
|
65504
|
+
}
|
|
65505
|
+
changeFilter([...filterBy]);
|
|
65506
|
+
}
|
|
65507
|
+
else {
|
|
65508
|
+
changeFilter(filterBy.filter((x) => x.key !== column.field));
|
|
65509
|
+
}
|
|
65510
|
+
setOpenFilter(false);
|
|
65511
|
+
};
|
|
65512
|
+
return (jsxs("div", { className: 'r-filter-popup', onKeyDown: (e) => {
|
|
65513
|
+
if (e.code === 'Enter' || e.code === 'NumpadEnter') {
|
|
65514
|
+
handleSave();
|
|
65515
|
+
e.stopPropagation();
|
|
65516
|
+
}
|
|
65517
|
+
}, children: [((!column.filterType && column.type === '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, { outline: true, color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50', onClick: handleSave, children: t('Filter') }), jsx(Button$1, { className: 'py-25 px-50', outline: true, style: { borderRadius: 3 }, onClick: () => {
|
|
65505
65518
|
if (filterBy) {
|
|
65506
65519
|
changeFilter(filterBy.filter((x) => x.key !== column.field));
|
|
65507
65520
|
}
|
|
@@ -65554,6 +65567,9 @@ const RenderContentCol = (props) => {
|
|
|
65554
65567
|
else if (col.type === 'datetime') {
|
|
65555
65568
|
value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
|
|
65556
65569
|
}
|
|
65570
|
+
if (col.template) {
|
|
65571
|
+
value = col.template(row, indexRow) ?? '';
|
|
65572
|
+
}
|
|
65557
65573
|
return (jsx("div", { className: classNames$1('r-rowcell-div'), children: jsxs("div", { className: classNames$1('r-rowcell-content'), style: {
|
|
65558
65574
|
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
65559
65575
|
}, children: [jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), col.haveToolTip && jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }) }));
|
|
@@ -65595,9 +65611,7 @@ const RenderColGroup = ({ contentColumns }) => (jsx("colgroup", { children: cont
|
|
|
65595
65611
|
maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
|
|
65596
65612
|
} }, index))) }));
|
|
65597
65613
|
|
|
65598
|
-
const
|
|
65599
|
-
|
|
65600
|
-
const VirtualTable = ({ idTable, dataSource, rowHeight = 28, height = 400, columns, isMutil, isLoading, selectEnable, formatSetting, commandClick, allowFilter, allowOrder, setColumns, pagingSetting, changeFilter, changeOrder, searchSetting, columnsAggregate, toolbarSetting }) => {
|
|
65614
|
+
const VirtualTable = ({ idTable, dataSource, rowHeight = 33, height = 400, columns, isMutil, isLoading, selectEnable, formatSetting, commandClick, allowFilter, allowOrder, setColumns, pagingSetting, changeFilter, changeOrder, searchSetting, columnsAggregate, toolbarSetting, optionsFilter }) => {
|
|
65601
65615
|
const gridRef = useRef(null);
|
|
65602
65616
|
const [startIndex, setStartIndex] = useState(0);
|
|
65603
65617
|
const [selectedRows, setSelectedRows] = useState([]);
|
|
@@ -65605,20 +65619,36 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 28, height = 400, colum
|
|
|
65605
65619
|
const [filterBy, setFilterBy] = useState([]);
|
|
65606
65620
|
const [searchTerm, setSearchTerm] = useState('');
|
|
65607
65621
|
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
|
|
65622
|
+
//trường liên quan đến virtul loading
|
|
65608
65623
|
const visibleRowCount = Math.ceil(height / rowHeight) + 5;
|
|
65609
|
-
const
|
|
65624
|
+
const buffer = 10; // số dòng dự phòng phía trên và dưới
|
|
65625
|
+
const adjustedStartIndex = Math.max(startIndex - buffer, 0);
|
|
65626
|
+
const adjustedEndIndex = Math.min(startIndex + visibleRowCount + buffer, dataSource.length);
|
|
65627
|
+
const visibleData = dataSource.slice(adjustedStartIndex, adjustedEndIndex);
|
|
65610
65628
|
const { t } = useTranslation();
|
|
65611
65629
|
const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = useMemo(() => calculateTableStructure(columns), [columns]);
|
|
65612
|
-
const
|
|
65613
|
-
|
|
65630
|
+
const scrollTimeoutRef = useRef(null);
|
|
65631
|
+
const lastScrollTop = useRef(0);
|
|
65632
|
+
const handleScroll = (e) => {
|
|
65633
|
+
if (!gridRef.current) {
|
|
65634
|
+
return;
|
|
65635
|
+
}
|
|
65636
|
+
// Nếu không có sự thay đổi về scrollTop => người dùng chỉ scroll ngang => không xử lý
|
|
65637
|
+
if (e.target.scrollTop === lastScrollTop.current) {
|
|
65638
|
+
return;
|
|
65639
|
+
}
|
|
65640
|
+
lastScrollTop.current = e.target.scrollTop;
|
|
65641
|
+
if (scrollTimeoutRef.current !== null) {
|
|
65642
|
+
cancelAnimationFrame(scrollTimeoutRef.current);
|
|
65643
|
+
}
|
|
65644
|
+
scrollTimeoutRef.current = requestAnimationFrame(() => {
|
|
65614
65645
|
const scrollTop = gridRef.current.scrollTop;
|
|
65615
65646
|
const newStartIndex = Math.floor(scrollTop / rowHeight);
|
|
65616
65647
|
if (newStartIndex !== startIndex) {
|
|
65617
65648
|
setStartIndex(newStartIndex);
|
|
65618
65649
|
}
|
|
65619
|
-
}
|
|
65650
|
+
});
|
|
65620
65651
|
};
|
|
65621
|
-
const visibleData = dataSource.slice(startIndex, Math.min(startIndex + visibleRowCount, dataSource.length));
|
|
65622
65652
|
const handleCommandClick = (id, rowData, index) => {
|
|
65623
65653
|
if (commandClick) {
|
|
65624
65654
|
commandClick({ id, rowData, index });
|
|
@@ -65667,32 +65697,32 @@ const VirtualTable = ({ idTable, dataSource, rowHeight = 28, height = 400, colum
|
|
|
65667
65697
|
}
|
|
65668
65698
|
}
|
|
65669
65699
|
};
|
|
65670
|
-
return (jsxs("div", { className: "react-table-edit", children: [jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }),
|
|
65671
|
-
|
|
65672
|
-
|
|
65673
|
-
|
|
65674
|
-
|
|
65675
|
-
|
|
65676
|
-
|
|
65677
|
-
|
|
65678
|
-
|
|
65700
|
+
return (jsxs("div", { className: "react-table-edit", children: [jsxs("div", { className: 'r-grid', children: [toolbarSetting?.showTopToolbar && jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxs("div", { ref: gridRef, className: "r-gridtable", onScroll: handleScroll, style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxs("table", { style: { width: '100%' }, children: [jsx(RenderColGroup, { contentColumns: flatVisble }), jsx("thead", { className: 'r-gridheader', children: headerColumns.map((rowColumn, indexParent) => (jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (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) => {
|
|
65701
|
+
setFilterBy([...val]);
|
|
65702
|
+
if (changeFilter) {
|
|
65703
|
+
changeFilter(val);
|
|
65704
|
+
}
|
|
65705
|
+
}, changeOrder: (val) => {
|
|
65706
|
+
setOrderBy([...val]);
|
|
65707
|
+
if (changeOrder) {
|
|
65708
|
+
changeOrder(val);
|
|
65709
|
+
}
|
|
65710
|
+
}, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, indexParent))) }), jsxs("tbody", { className: 'r-gridcontent', children: [adjustedStartIndex > 0 && (jsx("tr", { style: { height: adjustedStartIndex * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) })), visibleData.map((row, index) => {
|
|
65711
|
+
const indexRow = index + startIndex;
|
|
65712
|
+
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
65713
|
+
return (jsx("tr", { className: classNames$1('r-row'), children: contentColumns.map((column, indexCol) => (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}`));
|
|
65714
|
+
}), dataSource.length > adjustedEndIndex && (jsx("tr", { style: { height: (dataSource.length - adjustedEndIndex) * rowHeight }, children: jsx("td", { style: { padding: 0 }, colSpan: flatVisble.length }) }))] }), dataSource.length > 0 && jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? jsx("tr", { className: 'r-row', children: contentColumns.map((col, indexCol) => {
|
|
65715
|
+
const item = columnsAggregate?.find((x) => x.field === col.field);
|
|
65716
|
+
let sumValue = item?.value;
|
|
65717
|
+
if (!item && col.haveSum === true && col.type === "numeric") {
|
|
65718
|
+
sumValue = dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
|
|
65679
65719
|
}
|
|
65680
|
-
|
|
65681
|
-
|
|
65682
|
-
|
|
65683
|
-
|
|
65684
|
-
|
|
65685
|
-
|
|
65686
|
-
let sumValue = item?.value;
|
|
65687
|
-
if (!item && col.haveSum === true && col.type === "numeric") {
|
|
65688
|
-
sumValue = dataSource.reduce(function (accumulator, currentValue) { return (Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0)); }, 0);
|
|
65689
|
-
}
|
|
65690
|
-
return col.visible !== false && jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
65691
|
-
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
65692
|
-
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
65693
|
-
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
65694
|
-
}, children: jsxs("div", { className: "r-footer-div", children: [(item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) >= 0) && jsx(Fragment$1, { 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) && 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}`);
|
|
65695
|
-
}) }) : jsx(Fragment$1, {}) })] }) })] }), pagingSetting?.allowPaging ? 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 }) : jsx(Fragment$1, {})] }));
|
|
65720
|
+
return col.visible !== false && jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
65721
|
+
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
65722
|
+
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
|
|
65723
|
+
textAlign: col.textAlign ? col.textAlign : 'left'
|
|
65724
|
+
}, children: jsxs("div", { className: "r-footer-div", children: [(item || (col.haveSum === true && col.type === "numeric")) && col.type === "numeric" && (Number(sumValue) >= 0) && jsx(Fragment$1, { 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) && 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}`);
|
|
65725
|
+
}) }) : jsx(Fragment$1, {}) })] }), (((dataSource.length ?? 0) === 0) && !isLoading) && jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [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" }), 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 && jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) })] })] }), pagingSetting?.allowPaging ? 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 }) : jsx(Fragment$1, {})] }));
|
|
65696
65726
|
};
|
|
65697
65727
|
|
|
65698
65728
|
export { ExportExcelComponent, FindNodeByPath, ImportExcelComponent, InputStyleComponent, SelectTable, SelectTableTree, TabsMenuComponent, VirtualTable, Wizard, calculateTableStructure, checkDecimalSeparator, checkThousandSeparator, TableEdit as default, formartNumberic, formatDateTime, generateUUID, isNullOrUndefined$1 as isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, roundNumber, useOnClickOutside };
|