How to add a border around MUI X `DataGridPremium` Table but not around the quick filters?

49 Views Asked by At

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!

0

There are 0 best solutions below