coco/ixion
coco
/
ixion
mirror of https://github.com/cocosolos/ixion.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adjust detailed grid styling

This commit is contained in:
Corey 2024-04-16 15:58:46 +00:00
parent f7954a70bd
commit c2a76562b1
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/pages/ServerDetails.tsx
View File

@ -31,19 +31,19 @@ import CopyImageIcon from '../images/copy-image.png';
interface KeyValueRow { interface KeyValueRow {
id: number; id: number;
key: string;
rawValue: string | number | boolean;
name: string; name: string;
value: string | number | boolean; value: string | number | boolean;
description: string; description: string;
key: string;
rawValue: string | number | boolean;
} }
const columns: GridColDef[] = [ const columns: GridColDef[] = [
{ field: 'name', headerName: 'Name', flex: 2 }, { field: 'key', headerName: 'Key', flex: 4, align: 'right' },
{ field: 'value', headerName: 'Value', flex: 1 }, { field: 'rawValue', headerName: 'Raw Value', flex: 1, align: 'left' },
{ field: 'description', headerName: 'Description', flex: 4 }, { field: 'name', headerName: 'Name', flex: 3, align: 'right' },
{ field: 'key', headerName: 'Key', flex: 1 }, { field: 'value', headerName: 'Value', flex: 1, align: 'left' },
{ field: 'rawValue', headerName: 'Raw Value', flex: 1 }, { field: 'description', headerName: 'Description', flex: 6 },
]; ];
function ServerSettingsDataGrid({ function ServerSettingsDataGrid({
@ -60,14 +60,14 @@ function ServerSettingsDataGrid({
const rows: KeyValueRow[] = Object.entries(serverSettings).map( const rows: KeyValueRow[] = Object.entries(serverSettings).map(
([key, value], index) => ({ ([key, value], index) => ({
id: index + 1, id: index + 1,
key,
rawValue: value,
name: ServerSettingsInfo[key]?.name || '', name: ServerSettingsInfo[key]?.name || '',
value: value:
(ServerSettingsInfo[key] && (ServerSettingsInfo[key] &&
transformValue(value, ServerSettingsInfo[key]).toString()) || transformValue(value, ServerSettingsInfo[key]).toString()) ||
'', '',
description: ServerSettingsInfo[key]?.description || '', description: ServerSettingsInfo[key]?.description || '',
key,
rawValue: value,
}) })
); );
@ -80,7 +80,8 @@ function ServerSettingsDataGrid({
autoHeight autoHeight
density="compact" density="compact"
hideFooterSelectedRowCount hideFooterSelectedRowCount
showCellVerticalBorder showColumnVerticalBorder
getRowHeight={() => 'auto'}
initialState={{ initialState={{
sorting: { sorting: {
sortModel: [{ field: 'name', sort: 'asc' }], sortModel: [{ field: 'name', sort: 'asc' }],
@ -90,10 +91,17 @@ function ServerSettingsDataGrid({
items: [{ field: 'name', operator: 'isNotEmpty' }], items: [{ field: 'name', operator: 'isNotEmpty' }],
}, },
}, },
columns: {
columnVisibilityModel: {
key: false,
rawValue: false,
},
},
}} }}
sx={{ sx={{
'& .MuiDataGrid-cell': { '& .MuiDataGrid-cell': {
userSelect: 'text', userSelect: 'text',
py: 1,
}, },
}} }}
/> />