Absolutely! MUI X Data Grid v5 gives you full flexibility to customize the footer component—you can rearrange its built-in sub-components, tweak styles, or even add entirely new elements to match your specific design needs. Here's a step-by-step breakdown to achieve this:

1. Replace the Default Footer with a Custom Component #

The Data Grid allows you to override the default footer using the components prop. You can build a custom footer component that rearranges core sub-components or injects your own UI elements.

First, import the necessary components:

import { DataGrid, GridFooter, GridFooterPager, GridFooterRowCount, GridFooterSelectedRowCount } from '@mui/x-data-grid';
import { Button, styled } from '@mui/material';

2. Reuse Built-in Footer Sub-Components #

Instead of rebuilding core functionality from scratch, you can leverage Data Grid's pre-built footer sub-components (like pagination controls or row counters) while rearranging their layout:

Example: Styled Footer with Rearranged Elements #

Let’s create a footer that places the row count on the left, pagination in the center, and a custom export button on the right, with custom styling:

// Styled wrapper using MUI's styled utility for custom footer layout
const StyledCustomFooter = styled(GridFooter)(({ theme }) => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: theme.spacing(1.5, 2),
  borderTop: `2px solid ${theme.palette.primary.light}`,
  backgroundColor: theme.palette.grey[50],
  boxShadow: '0 -1px 4px rgba(0,0,0,0.05)',
}));

// Custom footer component combining built-in and custom elements
const CustomDataGridFooter = () => {
  return (
    <StyledCustomFooter>
      {/* Built-in row count display */}
      <GridFooterRowCount />
      {/* Built-in pagination controls */}
      <GridFooterPager />
      {/* Custom element: Export data button */}
      <Button variant="contained" size="small" color="primary">
        Export Data
      </Button>
    </StyledCustomFooter>
  );
};

3. Apply the Custom Footer to Your Data Grid #

Pass your custom footer to the Data Grid via the components prop, and optionally tweak props for built-in sub-components:

<DataGrid
  rows={yourRowData}
  columns={yourColumnConfig}
  pagination // Enable pagination to show the pager
  rowCount={yourRowData.length}
  components={{ Footer: CustomDataGridFooter }}
  // Optional: Fine-tune styles for built-in sub-components
  componentsProps={{
    footerPager: {
      sx: { '& .MuiDataGrid-pagination': { gap: '12px' } } // Adjust pagination spacing
    }
  }}
/>

4. Full Customization (No Built-in Components) #

If you want complete control over every part of the footer, you can build it entirely from scratch. Use the Data Grid's pagination state handlers to sync your custom controls:

const CustomFullFooter = ({ paginationModel, onPaginationModelChange, rowCount }) => {
  const totalPages = Math.ceil(rowCount / paginationModel.pageSize);
  
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', padding: '16px' }}>
      <span>Page {paginationModel.page + 1} of {totalPages}</span>
      <Button 
        onClick={() => onPaginationModelChange({...paginationModel, page: paginationModel.page - 1})} 
        disabled={paginationModel.page === 0}
      >
        Previous
      </Button>
      <Button 
        onClick={() => onPaginationModelChange({...paginationModel, page: paginationModel.page + 1})} 
        disabled={paginationModel.page >= totalPages - 1}
      >
        Next
      </Button>
    </div>
  );
};

// Use the fully custom footer in your Data Grid:
<DataGrid
  rows={yourRowData}
  columns={yourColumnConfig}
  paginationModel={{ page: 0, pageSize: 10 }}
  onPaginationModelChange={(model) => console.log(model)}
  rowCount={yourRowData.length}
  components={{ Footer: CustomFullFooter }}
/>

This approach gives you total freedom to structure and style the footer exactly how you need it.

内容的提问来源于stack exchange，提问作者Joseph Mutua