[data grid] Is there a way to get the features of footer to the toolbar?

[ZaidLinkEZ]

The problem in depth

I wanted to know if the footer details can be brought up to the toolbar, basically like a header of the table beside the toolbar functions. For ex: Selected Rows : , Total Rows: , etc.
If not, is it a feature that you are looking forward to bring to the library?

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Data grid pro

Order ID: 95670

[KenanYusuf]

Hi @ZaidLinkEZ.

You would need create a custom toolbar and pass it to the toolbar slot. Inside the custom toolbar, you can use useGridSelector and the relevant selector to get the information you want to show.

import * as React from "react";
import {
  DataGrid,
  GridToolbarContainer,
  selectedGridRowsCountSelector,
  gridTopLevelRowCountSelector,
  gridFilteredTopLevelRowCountSelector,
  useGridSelector,
  useGridApiContext,
} from "@mui/x-data-grid";
import Typography from "@mui/material/Typography";

function CustomToolbar() {
  const apiRef = useGridApiContext();
  const selectedRows = useGridSelector(apiRef, selectedGridRowsCountSelector);
  const totalRows = useGridSelector(apiRef, gridTopLevelRowCountSelector);
  const visibleRows = useGridSelector(
    apiRef,
    gridFilteredTopLevelRowCountSelector
  );

  return (
    <GridToolbarContainer>
      <Typography>Selected rows: {selectedRows}</Typography>
      <Typography>Total rows: {totalRows}</Typography>
      <Typography>Visible rows: {visibleRows}</Typography>
    </GridToolbarContainer>
  );
}

export default function CustomToolbarGrid() {
  return (
    <DataGrid
      slots={{ toolbar: CustomToolbar }}
    />
  );
}

Here's a working example in CodeSandbox https://codesandbox.io/p/sandbox/data-grid-footer-data-in-toolbar-h6x9xd.

You can find the available state selectors here: https://mui.com/x/react-data-grid/state/#catalog-of-selectors

[michelengelen]

Here is an example on how you can add similar stuff to the toolbar as well: #16132

[ZaidLinkEZ]

@KenanYusuf @michelengelen
Thank you for your replies, these helped a lot!

[michelengelen]

Great to hear @ZaidLinkEZ ... I'll close this then! 👍🏼

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ZaidLinkEZ How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.