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/utils/utils.js
+++ b/src/core/utils/utils.js
@@ -0,0 +1,162 @@
+import { alpha, darken } from "@mui/material";
+
+export const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
+
+export const parseFromValuesOrFunc = (
+  fn,
+  arg
+) => (fn instanceof Function ? fn(arg) : fn);
+
+export const getCommonToolbarStyles = ({
+  table,
+}) => ({
+  alignItems: 'flex-start',
+  backgroundColor: table.options.mrtTheme.baseBackgroundColor,
+  display: 'grid',
+  flexWrap: 'wrap-reverse',
+  minHeight: '3.5rem',
+  overflow: 'hidden',
+  position: 'relative',
+  transition: 'all 150ms ease-in-out',
+  zIndex: 1,
+});
+
+export const getCommonTooltipProps = (
+  placement,
+) => ({
+  disableInteractive: true,
+  enterDelay: 1000,
+  enterNextDelay: 1000,
+  placement,
+});
+
+export const flipIconStyles = (theme) =>
+  theme.direction === 'rtl'
+    ? { style: { transform: 'scaleX(-1)' } }
+    : undefined;
+
+export const getCommonPinnedCellStyles = ({
+  column,
+  table,
+  theme,
+}) => {
+  const { baseBackgroundColor } = table.options.mrtTheme;
+  const isPinned = column?.getIsPinned();
+
+  return {
+    '&[data-pinned="true"]': {
+      '&:before': {
+        backgroundColor: alpha(
+          darken(
+            baseBackgroundColor,
+            theme.palette.mode === 'dark' ? 0.05 : 0.01,
+          ),
+          0.97,
+        ),
+        boxShadow: column
+          ? isPinned === 'left' && column.getIsLastColumn(isPinned)
+            ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+            : isPinned === 'right' && column.getIsFirstColumn(isPinned)
+              ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+              : undefined
+          : undefined,
+        ...commonCellBeforeAfterStyles,
+      },
+    },
+  };
+};
+
+export const getCommonMRTCellStyles = ({
+  column,
+  header,
+  table,
+  tableCellProps,
+  theme,
+}) => {
+  const {
+    getState,
+    options: { enableColumnVirtualization, layoutMode },
+  } = table;
+  const { draggingColumn } = getState();
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const isColumnPinned =
+    columnDef.columnDefType !== 'group' && column.getIsPinned();
+
+  const widthStyles = {
+    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px)`,
+  };
+
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `${[0, false].includes(columnDef.grow)
+      ? 0
+      : `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+        header?.id ?? column.id,
+      )}-size)`
+      } 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
+  }
+
+  const pinnedStyles = isColumnPinned
+    ? {
+      ...getCommonPinnedCellStyles({ column, table, theme }),
+      left:
+        isColumnPinned === 'left'
+          ? `${column.getStart('left')}px`
+          : undefined,
+      opacity: 0.97,
+      position: 'sticky',
+      right:
+        isColumnPinned === 'right'
+          ? `${column.getAfter('right')}px`
+          : undefined,
+    }
+    : {};
+
+  return {
+    backgroundColor: 'inherit',
+    backgroundImage: 'inherit',
+    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+    justifyContent:
+      columnDefType === 'group'
+        ? 'center'
+        : layoutMode?.startsWith('grid')
+          ? tableCellProps.align
+          : undefined,
+    opacity:
+      table.getState().draggingColumn?.id === column.id ||
+        table.getState().hoveredColumn?.id === column.id
+        ? 0.5
+        : 1,
+    position: 'relative',
+    transition: enableColumnVirtualization
+      ? 'none'
+      : `padding 150ms ease-in-out`,
+    zIndex:
+      column.getIsResizing() || draggingColumn?.id === column.id
+        ? 2
+        : columnDefType !== 'group' && isColumnPinned
+          ? 1
+          : 0,
+    ...pinnedStyles,
+    ...widthStyles,
+    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme)),
+  };
+};
+
+export const commonCellBeforeAfterStyles = {
+  content: '""',
+  height: '100%',
+  left: 0,
+  position: 'absolute',
+  top: 0,
+  width: '100%',
+  zIndex: -1,
+};