updating datagrid

This commit is contained in:
its-a-feature
2026-05-03 18:03:28 -05:00
parent 8c4ade6b81
commit b8fe5181f4
6 changed files with 76 additions and 18 deletions
+31
View File
@@ -447,6 +447,13 @@ const getModernThemeAdditions = (themeMode, preferences = operatorSettingDefault
fontSize: "0.86rem",
"--DataGrid-rowBorderColor": tableBorderSoft,
"--DataGrid-containerBackground": tableHeaderColor,
overflow: "hidden",
"& .MuiDataGrid-main": {
backgroundColor: backgroundPaper,
},
"& .MuiDataGrid-virtualScroller": {
backgroundColor: backgroundPaper,
},
"& .MuiDataGrid-columnHeaders": {
backgroundColor: tableHeaderColor,
borderBottom: `1px solid ${borderColor}`,
@@ -463,10 +470,16 @@ const getModernThemeAdditions = (themeMode, preferences = operatorSettingDefault
letterSpacing: 0,
textTransform: "uppercase",
},
"& .MuiDataGrid-columnSeparator": {
color: tableBorderSoft,
},
"& .MuiDataGrid-cell": {
borderBottom: `1px solid ${tableBorderSoft}`,
outline: "none",
},
"& .MuiDataGrid-cell:focus, & .MuiDataGrid-cell:focus-within, & .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-columnHeader:focus-within": {
outline: "none",
},
"& .MuiDataGrid-row:nth-of-type(even)": {
backgroundColor: tableRowStripeColor,
},
@@ -482,11 +495,29 @@ const getModernThemeAdditions = (themeMode, preferences = operatorSettingDefault
"& .MuiDataGrid-footerContainer": {
borderTop: `1px solid ${borderColor}`,
minHeight: 34,
color: textSecondary,
},
"& .MuiDataGrid-toolbarContainer": {
borderBottom: `1px solid ${tableBorderSoft}`,
minHeight: 34,
},
"& .MuiDataGrid-overlay": {
backgroundColor: backgroundPaper,
color: textSecondary,
},
"& .MuiTablePagination-root, & .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
color: textSecondary,
fontSize: "0.78rem",
},
"& .MuiSvgIcon-root, & .MuiIconButton-root": {
color: textSecondary,
},
"& .MuiCheckbox-root": {
color: textSecondary,
"&.Mui-checked, &.MuiCheckbox-indeterminate": {
color: primary,
},
},
},
},
},
@@ -0,0 +1,33 @@
import React from 'react';
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
export const MythicDataGrid = ({containerSx = {}, sx = {}, density = "compact", autoPageSize = true, pageSizeOptions = [10, 25, 50, 100], ...props}) => {
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
height: "100%",
minHeight: 0,
overflow: "hidden",
...containerSx,
}}
>
<DataGrid
density={density}
autoPageSize={autoPageSize}
pageSizeOptions={pageSizeOptions}
hideFooterSelectedRowCount
sx={{
flexGrow: 1,
minHeight: 0,
width: "100%",
...sx,
}}
{...props}
/>
</Box>
);
}
@@ -7,7 +7,7 @@ import {useMutation} from '@apollo/client';
import {hideCallbacksMutation} from './CallbackMutations';
import {snackActions} from "../../utilities/Snackbar";
import {CallbacksTableLastCheckinCell, CallbacksTablePayloadTypeCell, CallbacksTableIPCell} from "./CallbacksTableRow";
import { DataGrid } from '@mui/x-data-grid';
import {MythicDataGrid} from "../../MythicComponents/MythicDataGrid";
import DialogContentText from '@mui/material/DialogContentText';
@@ -111,8 +111,8 @@ const CustomSelectTable = ({initialData, selectedData, sortModel}) => {
}));
}, [initialData]);
return (
<div style={{height: "calc(80vh)"}}>
<DataGrid
<div style={{height: "calc(80vh)", minHeight: 0}}>
<MythicDataGrid
rows={data}
columns={columns}
initialState={{
@@ -130,7 +130,6 @@ const CustomSelectTable = ({initialData, selectedData, sortModel}) => {
setRowSelectionModel(newRowSelectionModel);
}}
rowSelectionModel={rowSelectionModel}
density={"compact"}
/>
</div>
@@ -239,4 +238,3 @@ export function CallbacksTabsSelectMultipleDialog({onClose, onSubmit}) {
</React.Fragment>
);
}
@@ -4,7 +4,7 @@ import DialogActions from '@mui/material/DialogActions';
import DialogTitle from '@mui/material/DialogTitle';
import {useQuery, gql } from '@apollo/client';
import {CallbacksTableLastCheckinCell, CallbacksTablePayloadTypeCell, CallbacksTableIPCell} from "./CallbacksTableRow";
import { DataGrid } from '@mui/x-data-grid';
import {MythicDataGrid} from "../../MythicComponents/MythicDataGrid";
import DialogContentText from '@mui/material/DialogContentText';
@@ -98,8 +98,8 @@ const CustomSelectTable = ({initialData, selectedData, onRowClick}) => {
}));
}, [initialData]);
return (
<div style={{height: "calc(80vh)"}}>
<DataGrid
<div style={{height: "calc(80vh)", minHeight: 0}}>
<MythicDataGrid
rows={data}
columns={columns}
initialState={{
@@ -113,7 +113,6 @@ const CustomSelectTable = ({initialData, selectedData, onRowClick}) => {
}}
autoPageSize
onRowClick={onRowClick}
density={"compact"}
/>
</div>
@@ -156,4 +155,3 @@ export function CallbacksTabsOpenMultipleDialog({onClose, tabType, onOpenTabs})
</React.Fragment>
);
}
@@ -7,7 +7,7 @@ import {useQuery, gql } from '@apollo/client';
import {TaskFromUIButton} from './TaskFromUIButton';
import {CallbacksTabsTaskingInput} from "./CallbacksTabsTaskingInput";
import {CallbacksTableIPCell, CallbacksTableLastCheckinCell} from "./CallbacksTableRow";
import { DataGrid } from '@mui/x-data-grid';
import {MythicDataGrid} from "../../MythicComponents/MythicDataGrid";
import { validate as uuidValidate } from 'uuid';
import {snackActions} from "../../utilities/Snackbar";
import DialogContentText from '@mui/material/DialogContentText';
@@ -105,8 +105,8 @@ const CustomSelectTable = ({initialData, selectedData}) => {
}));
}, [initialData]);
return (
<div style={{height: "calc(80vh)"}}>
<DataGrid
<div style={{height: "calc(80vh)", minHeight: 0}}>
<MythicDataGrid
rows={data}
columns={columns}
initialState={{
@@ -124,7 +124,6 @@ const CustomSelectTable = ({initialData, selectedData}) => {
setRowSelectionModel(newRowSelectionModel);
}}
rowSelectionModel={rowSelectionModel}
density={"compact"}
/>
</div>
@@ -32,8 +32,8 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
import {gql, useMutation} from '@apollo/client';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import {copyStringToClipboard} from "../../utilities/Clipboard";
import { DataGrid } from '@mui/x-data-grid';
import {useMythicLazyQuery} from "../../utilities/useMythicLazyQuery";
import {MythicDataGrid} from "../../MythicComponents/MythicDataGrid";
const createAPITokenMutation = gql`
mutation createAPITokenMutation($operator_id: Int, $name: String, $scopes: [String!]){
@@ -551,8 +551,8 @@ const APITokens = ({apiTokens, onDeleteAPIToken, onToggleActive, showDeleted, me
}, []));
}, [apiTokens, showDeleted]);
return (
<div style={{display: "flex", flexDirection: "column", width: "100%", height: "calc(30vh)"}}>
<DataGrid
<div style={{display: "flex", flexDirection: "column", width: "100%", height: "calc(30vh)", minHeight: 0}}>
<MythicDataGrid
rows={data}
columns={columns}
initialState={{
@@ -565,7 +565,6 @@ const APITokens = ({apiTokens, onDeleteAPIToken, onToggleActive, showDeleted, me
},
}}
autoPageSize
density={"compact"}
/>
</div>