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/TopToolbar.js
+++ b/src/core/components/DataTable/toolbar/TopToolbar.js
@@ -0,0 +1,86 @@
+import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Box, useMediaQuery } from "@mui/material";
+import DataTable_LinearProgressBar from "./LinearProgressBar";
+import DataTable_TablePagination from "./TablePagination";
+import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
+
+const DataTable_TopToolbar = ({ table }) => {
+    const {
+        getState,
+        options: {
+            enablePagination,
+            enableToolbarInternalActions,
+            muiTopToolbarProps,
+            positionPagination,
+            renderTopToolbarCustomActions,
+        },
+        refs: { topToolbarRef },
+    } = table;
+    const { isFullScreen, showGlobalFilter } = getState();
+
+    const isMobile = useMediaQuery('(max-width:720px)');
+    const isTablet = useMediaQuery('(max-width:1024px)');
+
+    const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
+
+    const stackAlertBanner =
+        isMobile ||
+        !!renderTopToolbarCustomActions ||
+        (showGlobalFilter && isTablet);
+
+    return (
+        <Box
+            {...toolbarProps}
+            ref={(ref) => {
+                topToolbarRef.current = ref;
+                if (toolbarProps?.ref) {
+                    // @ts-ignore
+                    toolbarProps.ref.current = ref;
+                }
+            }}
+            sx={(theme) => ({
+                ...getCommonToolbarStyles({ table, theme }),
+                position: isFullScreen ? 'sticky' : 'relative',
+                top: isFullScreen ? '0' : undefined,
+                ...(parseFromValuesOrFunc(toolbarProps?.sx, theme)),
+            })}
+        >
+            <Box
+                sx={{
+                    alignItems: 'flex-start',
+                    boxSizing: 'border-box',
+                    display: 'flex',
+                    gap: '0.5rem',
+                    justifyContent: 'space-between',
+                    p: '0.5rem',
+                    position: stackAlertBanner ? 'relative' : 'absolute',
+                    right: 0,
+                    top: 0,
+                    width: '100%',
+                }}
+            >
+                {renderTopToolbarCustomActions?.({ table }) ?? <span />}
+                {enableToolbarInternalActions && (
+                    <Box
+                        sx={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexWrap: 'wrap-reverse',
+                            gap: '0.5rem',
+                            justifyContent: 'flex-end',
+                        }}
+                    >
+                        <DataTable_ToolbarInternalButtons table={table} />
+                    </Box>
+                )}
+            </Box>
+            {enablePagination &&
+                ['both', 'top'].includes(positionPagination ?? '') && (
+                    <DataTable_TablePagination position="top" table={table} />
+                )}
+            <DataTable_LinearProgressBar isTopToolbar table={table} />
+        </Box>
+    );
+}
+
+export default DataTable_TopToolbar