MDE/PKFE-16 custom data grid header definition

app/front-end/src/features/editor/components/editorView/editorHeader.tsx

@@ -0,0 +1,35 @@
+import { ColumnAggregation } from '@/features/editor/types';
+import { Box, Typography, useTheme } from '@mui/material';
+import React from 'react';
+
+export interface EditorHeaderProps {
+  columnName: string;
+  gridColumnsAggregation: ColumnAggregation;
+}
+
+export const EditorHeader: React.ElementType<EditorHeaderProps> = ({ columnName, gridColumnsAggregation }) => {
+  const Theme = useTheme();
+
+  if (!gridColumnsAggregation[columnName])
+    return <Typography sx={{ fontSize: '0.875rem', fontWeight: 'bold' }}>{columnName}</Typography>;
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', gap: '0.5rem', alignItems: 'center' }}>
+        <Typography
+          sx={{
+            fontSize: '0.875rem',
+            fontWeight: 'bold',
+            color: Theme.palette.primary.main,
+          }}
+        >
+          {gridColumnsAggregation[columnName].action.toUpperCase()}
+        </Typography>
+        <Typography sx={{ fontSize: '0.875rem', fontWeight: 'bold' }}>{columnName}</Typography>
+      </Box>
+      <Typography sx={{ fontSize: '0.75rem', fontWeight: 'bold', color: Theme.palette.primary.main }}>
+        {gridColumnsAggregation[columnName].value}
+      </Typography>
+    </Box>
+  );
+};

app/front-end/src/features/editor/types/columnAggregation.ts

@@ -0,0 +1,5 @@
+import { EditorColumnMenuAggregationActions } from '@/features/editor/types';
+
+export interface ColumnAggregation {
+  [field: string]: { action: EditorColumnMenuAggregationActions; value: string };
+}

app/front-end/src/features/editor/types/editorColumnMenuAggregationActions.ts

@@ -0,0 +1,8 @@
+export enum EditorColumnMenuAggregationActions {
+    NONE = '',
+    SUM = 'sum',
+    AVG = 'avg',
+    MIN = 'min',
+    MAX = 'max',
+    COUNT = 'cnt',
+}

app/front-end/src/features/editor/types/index.ts

@@ -1,5 +1,7 @@
+export type { ColumnAggregation } from './columnAggregation';
 export { ConsoleFeedbackTypes } from './consoleFeedback';
 export type { ConsoleFeedback } from './consoleFeedback';
+export { EditorColumnMenuAggregationActions } from './editorColumnMenuAggregationActions';
 export type { FileDataRequestDTO, FileDataResponseDTO } from './fileData';
 export { FileTreeItemContextMenuActions } from './fileTreeItemContextMenuActions';
 export type { FileTreeViewItemProps } from './fileTreeViewItemProps';