formatted
This commit is contained in:
@@ -5,31 +5,17 @@ import DataTable_CellActionMenu from "../menus/CellActionMenu";
|
||||
import DataTable_Table from "./Table";
|
||||
import DataTable_TableLoadingOverlay from "./TableLoadingOverlay";
|
||||
|
||||
const useIsomorphicLayoutEffect =
|
||||
typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
||||
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
||||
|
||||
const DataTable_TableContainer = ({
|
||||
table,
|
||||
...rest
|
||||
}) => {
|
||||
const DataTable_TableContainer = ({ table, ...rest }) => {
|
||||
const {
|
||||
getState,
|
||||
options: {
|
||||
enableCellActions,
|
||||
enableStickyHeader,
|
||||
muiTableContainerProps,
|
||||
},
|
||||
options: { enableCellActions, enableStickyHeader, muiTableContainerProps },
|
||||
refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
|
||||
} = table;
|
||||
const {
|
||||
actionCell,
|
||||
isFullScreen,
|
||||
isLoading,
|
||||
showLoadingOverlay,
|
||||
} = getState();
|
||||
const { actionCell, isFullScreen, isLoading, showLoadingOverlay } = getState();
|
||||
|
||||
const loading =
|
||||
showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
|
||||
const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
|
||||
|
||||
const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
|
||||
|
||||
@@ -41,15 +27,9 @@ const DataTable_TableContainer = ({
|
||||
};
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
const topToolbarHeight =
|
||||
typeof document !== 'undefined'
|
||||
? topToolbarRef.current?.offsetHeight ?? 0
|
||||
: 0;
|
||||
const topToolbarHeight = typeof document !== "undefined" ? topToolbarRef.current?.offsetHeight ?? 0 : 0;
|
||||
|
||||
const bottomToolbarHeight =
|
||||
typeof document !== 'undefined'
|
||||
? bottomToolbarRef?.current?.offsetHeight ?? 0
|
||||
: 0;
|
||||
const bottomToolbarHeight = typeof document !== "undefined" ? bottomToolbarRef?.current?.offsetHeight ?? 0 : 0;
|
||||
|
||||
setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
|
||||
});
|
||||
@@ -57,7 +37,7 @@ const DataTable_TableContainer = ({
|
||||
return (
|
||||
<TableContainer
|
||||
aria-busy={loading}
|
||||
aria-describedby={loading ? 'mrt-progress' : undefined}
|
||||
aria-describedby={loading ? "mrt-progress" : undefined}
|
||||
{...tableContainerProps}
|
||||
ref={(node) => {
|
||||
if (node) {
|
||||
@@ -69,19 +49,17 @@ const DataTable_TableContainer = ({
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
maxHeight: isFullScreen
|
||||
? `calc(100vh - ${totalToolbarHeight}px)`
|
||||
: undefined,
|
||||
maxHeight: isFullScreen ? `calc(100vh - ${totalToolbarHeight}px)` : undefined,
|
||||
...tableContainerProps?.style,
|
||||
}}
|
||||
sx={(theme) => ({
|
||||
maxHeight: enableStickyHeader
|
||||
? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
|
||||
: undefined,
|
||||
maxWidth: '100%',
|
||||
overflow: 'auto',
|
||||
position: 'relative',
|
||||
...(parseFromValuesOrFunc(tableContainerProps?.sx, theme)),
|
||||
maxWidth: "100%",
|
||||
overflow: "auto",
|
||||
position: "relative",
|
||||
...parseFromValuesOrFunc(tableContainerProps?.sx, theme),
|
||||
})}
|
||||
>
|
||||
{loading ? <DataTable_TableLoadingOverlay table={table} /> : null}
|
||||
@@ -89,6 +67,5 @@ const DataTable_TableContainer = ({
|
||||
{enableCellActions && actionCell && <DataTable_CellActionMenu table={table} />}
|
||||
</TableContainer>
|
||||
);
|
||||
|
||||
}
|
||||
export default DataTable_TableContainer
|
||||
};
|
||||
export default DataTable_TableContainer;
|
||||
|
||||
Reference in New Issue
Block a user