mod-arch-shared
Version:
Shared UI components and utilities for modular architecture micro-frontend projects
79 lines • 3.7 kB
JavaScript
import * as React from 'react';
import TableBase, { MIN_PAGE_SIZE } from './TableBase';
import useTableColumnSort from './useTableColumnSort';
const Table = ({ data: allData, columns, subColumns, enablePagination, defaultSortColumn = 0, truncateRenderingAt = 0, sortIndex, sortDirection, onSortIndexChange, onSortDirectionChange, sortField, onSortFieldChange, page: controlledPage, pageSize: controlledPageSize, onPageChange, onPageSizeChange, ...props }) => {
// Internal state (used when not controlled)
const [internalPage, setInternalPage] = React.useState(1);
const [internalPageSize, setInternalPageSize] = React.useState(MIN_PAGE_SIZE);
// Store callback in ref
const onPageChangeRef = React.useRef(onPageChange);
React.useEffect(() => {
onPageChangeRef.current = onPageChange;
}, [onPageChange]);
// Use controlled props if provided, otherwise use internal state
const page = controlledPage !== undefined ? controlledPage : internalPage;
const pageSize = controlledPageSize !== undefined ? controlledPageSize : internalPageSize;
const controlledSortProps = React.useMemo(() => {
const hasField = sortField !== undefined || onSortFieldChange !== undefined;
if (hasField) {
return { sortField, sortDirection, onSortFieldChange, onSortDirectionChange };
}
const hasIndex = sortIndex !== undefined || onSortIndexChange !== undefined;
if (hasIndex) {
return { sortIndex, sortDirection, onSortIndexChange, onSortDirectionChange };
}
return sortDirection !== undefined || onSortDirectionChange !== undefined
? { sortDirection, onSortDirectionChange }
: undefined;
}, [
sortIndex,
sortField,
sortDirection,
onSortIndexChange,
onSortFieldChange,
onSortDirectionChange,
]);
const sort = useTableColumnSort(columns, subColumns || [], defaultSortColumn, controlledSortProps);
const sortedData = sort.transformData(allData);
let data;
if (truncateRenderingAt) {
data = sortedData.slice(0, truncateRenderingAt);
}
else if (enablePagination) {
data = sortedData.slice(pageSize * (page - 1), pageSize * page);
}
else {
data = sortedData;
}
// update page to 1 if data changes (common when filter is applied)
React.useEffect(() => {
const isPageControlled = controlledPage !== undefined;
if (data.length === 0) {
onPageChangeRef.current?.(1);
if (!isPageControlled) {
setInternalPage(1);
}
}
}, [data.length, controlledPage]);
const handlePageChange = (_e, newPage) => {
const isPageControlled = controlledPage !== undefined;
onPageChange?.(newPage);
if (!isPageControlled) {
setInternalPage(newPage);
}
};
const handlePageSizeChange = (_e, newSize, newPage) => {
const isPageControlled = controlledPage !== undefined;
const isPageSizeControlled = controlledPageSize !== undefined;
onPageSizeChange?.(newSize, newPage);
if (!isPageSizeControlled) {
setInternalPageSize(newSize);
}
if (!isPageControlled) {
setInternalPage(newPage);
}
};
return (React.createElement(TableBase, { data: data, columns: columns, subColumns: subColumns, enablePagination: enablePagination, itemCount: allData.length, perPage: pageSize, page: page, onSetPage: handlePageChange, onPerPageSelect: handlePageSizeChange, getColumnSort: sort.getColumnSort, ...props }));
};
export default Table;
//# sourceMappingURL=Table.js.map