pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
93 lines (92 loc) • 4.49 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { MantineReactTable, } from 'mantine-react-table';
import { useMemo, useState } from 'react';
const CoreTable = ({ columns, data, sortable = false, sortConfig = null, onSort = () => { }, selectable = false, selectedRows = [], onSelectRow = () => { }, onSelectAll = () => { }, enablePagination = false, expandable = false, renderExpandableComponent, pagination, enableGlobalFilters, enableManualSorting, enableManualPagination, multiSorting, setSortBy, setSortDir, ...props }) => {
const [expanded, setExpanded] = useState({});
const hideHeaderConfig = (column) => {
return {
...column,
header: '',
enableSorting: false,
enableColumnFilter: false,
enableColumnActions: false,
mantineTableHeadCellProps: {
sx: {
svg: {
display: 'none',
},
},
},
};
};
const memoizedColumns = useMemo(() => {
return columns.map((column) => {
const { showHeader = true, ...rest } = column;
if (showHeader) {
return {
...rest,
enableSorting: sortable && !!onSort,
};
}
return hideHeaderConfig(column);
});
}, [columns, sortable, onSort]);
const memoizedData = useMemo(() => data, [data]);
const sortingState = useMemo(() => {
if (!sortConfig?.sortBy || !sortConfig?.sortDir)
return [];
return [{ id: sortConfig.sortBy, desc: sortConfig.sortDir === 'desc' }];
}, [sortConfig]);
const handleSortingChange = (updaterOrValue) => {
const newSorting = typeof updaterOrValue === 'function' ? updaterOrValue([]) : updaterOrValue;
if (!Array.isArray(newSorting) || newSorting.length === 0) {
return;
}
const [sort] = newSorting;
const sortKey = sort.id;
const sortDirection = sort.desc ? 'desc' : 'asc';
setSortBy?.(sortKey);
setSortDir?.(sortDirection);
onSort?.(sortKey, sortDirection);
};
const handlePaginationChangeInternal = (updaterOrValue) => {
let newPagination;
if (typeof updaterOrValue === 'function') {
newPagination = updaterOrValue(pagination
? {
pageIndex: pagination.pageIndex,
pageSize: pagination.pageSize,
}
: { pageIndex: 0, pageSize: 10 });
}
else {
newPagination = updaterOrValue;
}
// Trigger the onPaginationChange callback to update server-side state
pagination?.onPaginationChange?.(newPagination.pageIndex, newPagination.pageSize);
// Optionally trigger the onPageChange callback if needed
pagination?.onPageChange?.(newPagination.pageIndex);
// Reset expanded rows when pagination changes
setExpanded({});
};
return (_jsx(MantineReactTable, { columns: memoizedColumns, data: memoizedData, enableSorting: true, manualSorting: true, onSortingChange: handleSortingChange, enableRowSelection: selectable, enableGlobalFilter: enableGlobalFilters, onRowSelectionChange: (rowSelection) => { }, enableSelectAll: selectable, manualPagination: enableManualPagination, enablePagination: enablePagination, initialState: {
pagination: {
pageIndex: pagination?.pageIndex ?? 0,
pageSize: pagination?.pageSize ?? 10,
},
sorting: [],
}, state: {
pagination: {
pageIndex: pagination?.pageIndex ?? 0,
pageSize: pagination?.pageSize ?? 10,
},
sorting: sortingState,
expanded,
}, onPaginationChange: handlePaginationChangeInternal, renderEmptyRowsFallback: () => (_jsxs("div", { style: { textAlign: 'center', padding: '20px', color: '#888' }, children: [_jsx("p", { children: "No data available" }), _jsx("p", { children: "Please adjust your filters or try again later." })] })), mantineTableContainerProps: {
sx: {
border: 'transparent',
borderRadius: '4px',
},
}, onExpandedChange: setExpanded, enableExpanding: expandable, renderDetailPanel: renderExpandableComponent, ...props }));
};
export default CoreTable;