I'm working with the MUI X DataGridPremium
component in a React project and I'm trying to add a border around the entire table but not around the quick filters.
Here's a simplified version of the component code and here is the codesandbox link:
import * as React from 'react';
import Box from '@mui/material/Box';
import {
DataGridPremium,
GridToolbar,
useGridApiRef,
useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
export default function DataGridPremiumDemo() {
const { data, loading } = useDemoData({
dataSet: 'Commodity',
rowLength: 100,
editable: true,
visibleFields: [
'commodity',
'quantity',
'filledQuantity',
'status',
'isFilled',
'unitPrice',
'unitPriceCurrency',
'subTotal',
'feeRate',
'feeAmount',
'incoTerm',
],
});
const apiRef = useGridApiRef();
const initialState = useKeepGroupedColumnsHidden({
apiRef,
initialState: {
...data.initialState,
rowGrouping: {
...data.initialState?.rowGrouping,
model: ['commodity'],
},
sorting: {
sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
},
aggregation: {
model: {
quantity: 'sum',
},
},
},
});
return (
<Box sx={{ height: 520, width: '100%', border: '2px solid #000' }}>
<DataGridPremium
{...data}
apiRef={apiRef}
loading={loading}
disableRowSelectionOnClick
initialState={initialState}
slots={{ toolbar: GridToolbar }}
getRowSpacing={(index) => 1}
/>
</Box>
);
}
I attempted to add a border using inline styling with the sx
prop in the Box
component, which wraps DataGridPremium
, but I want to ensure that this border does not apply to the quick filters.
<Box sx={{ height: 520, width: '100%', border: '2px solid #000' }}>
Does anyone have suggestions or best practices to apply border to the DataGridPremium
component while excluding the quick filters? Any help would be greatly appreciated!