implementation of datatable

2024-04-16 11:45:14 +03:30
parent 78548e89e7
commit a8e28a4f8c
29 changed files with 2983 additions and 2 deletions
--- a/src/core/components/DataTable/toolbar/BottomToolbar.js
+++ b/src/core/components/DataTable/toolbar/BottomToolbar.js
@@ -0,0 +1,88 @@
+import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Box, alpha, useMediaQuery } from "@mui/material";
+import DataTable_LinearProgressBar from "./LinearProgressBar";
+import DataTable_TablePagination from "./TablePagination";
+
+const DataTable_BottomToolbar = ({
+    table,
+    ...rest
+}) => {
+    const {
+        getState,
+        options: {
+            enablePagination,
+            muiBottomToolbarProps,
+            positionPagination,
+            renderBottomToolbarCustomActions,
+        },
+        refs: { bottomToolbarRef },
+    } = table;
+    const { isFullScreen } = getState();
+
+    const isMobile = useMediaQuery('(max-width:720px)');
+    const toolbarProps = {
+        ...parseFromValuesOrFunc(muiBottomToolbarProps, { table }),
+        ...rest,
+    };
+
+    const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
+    return (
+        <Box
+            {...toolbarProps}
+            ref={(node) => {
+                if (node) {
+                    bottomToolbarRef.current = node;
+                    if (toolbarProps?.ref) {
+                        // @ts-ignore
+                        toolbarProps.ref.current = node;
+                    }
+                }
+            }}
+            sx={(theme) => ({
+                ...getCommonToolbarStyles({ table, theme }),
+                bottom: isFullScreen ? '0' : undefined,
+                boxShadow: `0 1px 2px -1px ${alpha(
+                    theme.palette.grey[700],
+                    0.5,
+                )} inset`,
+                left: 0,
+                position: isFullScreen ? 'fixed' : 'relative',
+                right: 0,
+                ...(parseFromValuesOrFunc(toolbarProps?.sx, theme)),
+            })}
+        >
+            <DataTable_LinearProgressBar isTopToolbar={false} table={table} />
+            <Box
+                sx={{
+                    alignItems: 'center',
+                    boxSizing: 'border-box',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    p: '0.5rem',
+                    width: '100%',
+                }}
+            >
+                {renderBottomToolbarCustomActions ? (
+                    renderBottomToolbarCustomActions({ table })
+                ) : (
+                    <span />
+                )}
+                <Box
+                    sx={{
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        position: stackAlertBanner ? 'relative' : 'absolute',
+                        right: 0,
+                        top: 0,
+                    }}
+                >
+                    {enablePagination &&
+                        ['both', 'bottom'].includes(positionPagination ?? '') && (
+                            <DataTable_TablePagination position="bottom" table={table} />
+                        )}
+                </Box>
+            </Box>
+        </Box>
+    );
+}
+export default DataTable_BottomToolbar