Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DataGrid] Style DataGrid Column Menu and text inside GridToolbarColumnsButton #3686

Closed
2 tasks done
zvonimirprpic opened this issue Jan 21, 2022 · 9 comments
Closed
2 tasks done

[DataGrid] Style DataGrid Column Menu and text inside GridToolbarColumnsButton #3686

zvonimirprpic opened this issue Jan 21, 2022 · 9 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation support: question Community support but can be turned into an improvement

Comments

@zvonimirprpic
Copy link

zvonimirprpic commented Jan 21, 2022 •
edited
Loading

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Summary 💡

I'd love to be able to customize the buttons and padding and background colours inside the ColumnMenu of DataGrid where you choose which fields should be shown.

Also, I'd love to be able to customize and change the text inside GridToolbarColumnsButton component.

Examples 🌈

<GridToolbarColumnsButton startIcon={<MoreHorizIcon />}

<DataGridpanel: { sx: { '& .MuiTypography-root': { color: 'dodgerblue', fontSize: 20, background: 'red', }, '& .MuiDataGrid-filterForm': { bgcolor: 'lightblue', }, }, }, }} />

Motivation 🔦

No response

Order ID 💳 (optional)

No response
@zvonimirprpic zvonimirprpic added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 21, 2022
@DanailH
Copy link
Member

DanailH commented Jan 21, 2022

Hi, @zprpic thanks for reporting this!
Regarding the styling, we provide an extensive list of classes that we treat as a public API of the grid. You can use them to style the grid. You can check the list here -> https://mui.com/api/data-grid/data-grid/#css
Regarding adding an icon to the GridToolbarColumnsButton -> that component supports all pros that you would pass to the MUI Button component so startIcon is a valid prop and it should work. If it doesn't please add a codesandbox example so we can take a look at the reproduction. You can use this template.

@DanailH DanailH added the status: waiting for author Issue with insufficient information label Jan 21, 2022
@zvonimirprpic
Copy link
Author

zvonimirprpic commented Jan 21, 2022 •
edited
Loading

Sorry!

I must've been not clear enough.

These current styles in the code work. However, automatically has text "Columns" inside it. I would love if it were changeable to something else, maybe even just an empty string.

Considering the DataGrid stylings inside the ColumnMenu, I don't understand the docs completely. Could you exemplify how you would style the buttons/checkboxes inside the ColumnMenu of DataGrid?

Thanks!

@DanailH
Copy link
Member

DanailH commented Jan 21, 2022

For changing the text you can use the localeText prop either directly or through the theme. You can check here how to do that -> https://mui.com/components/data-grid/localization/#locale-text

For the styling you can simply target the CSS class directly:

<DataGrid
  sx={{
    '& .MuiDataGrid-menu': {
      background: red,
    },
  }}
/>

@zvonimirprpic
Copy link
Author

zvonimirprpic commented Jan 21, 2022 •
edited
Loading

Hi!

I tried out the piece of code, but the styling didn't work at all. It wasn't applied. :/

<DataGrid columns={columns} rows={rows} sx={{ '& .MuiDataGrid-menu': { background: red, }, }} />

Is there a way to turn the toggle buttons inside the ColumnMenu to checkboxes as well?

@alexfauquette
Copy link
Member

Yes, customizing panels, such as the column menu or the filter panel is a bit more complex than usual components.

The following code you use add a CSS selector looking for components with class "MuiDataGrid-menu" inside the DataGrid. But panels are not inside the grid. The components are rendered in a distinct div, at the end of the <body>. So this CSS selector will never find the column menu

sx={{
	 '& .MuiDataGrid-menu': { background: red, }
}}

A solution is to use the componentsProps to put the sx props at the root of the panel. To do so, write the following code.

<DataGrid
	componentsProps={{
		basePopper: {
			sx: {
		    	/* Now we have access to column menu style*/
		    }
		}
	}}
/>

The question is now, what to write inside

  • backgroundColor: "red": This is really bad because basePopper is a functionality component only here to decide when and where the menu should be display
  • "& .MuiPaper-root": { backgroundColor: "green" }: That's better, but if you open the filter, you will see that the same style is applied. That's because basePopper is used for both the filter panel and the column menu
  • "&.MuiDataGrid-menu .MuiPaper-root": { backgroundColor: "blue" }: Now we restrain our style to basePopper with the classe MuiDataGrid-menu.

You can experiment with this different options in the following demo:
https://codesandbox.io/s/datagrid-quick-start-forked-4lpjm?file=/src/App.tsx

@alexfauquette alexfauquette added component: data grid This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation support: question Community support but can be turned into an improvement and removed status: waiting for author Issue with insufficient information status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 24, 2022
@alexfauquette
Copy link
Member

I missed a simpler solution. There exist the columnMenu props which is much easier to use

<DataGrid
	componentsProps={{
		columnMenu: {
			sx: {
		    	/* style allied to the column menu */
		    	backgroundColor: "orange" // for example
		    }
		}
	}}
/>

@zvonimirprpic
Copy link
Author

Wow! These are great and super simple solutions.

Thanks!

However, 2 of my questions still remain unanswered and I'm still not sure how to approach them:

  1. How can I change the toggle buttons into checkboxes inside the ColumnMenu component?
  2. How can I edit the text which is inside GridToolbarColumnsButton component and currently it says "Columns"?

@alexfauquette
Copy link
Member

image

If you are talking about this panel, you have two options:

For your second point, this answer linked you to the doc with all the information about text translation: #3686 (comment)

I think, your point is explained at the end of the page

To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there.

@Here2Huynh Here2Huynh mentioned this issue Mar 26, 2024
Closed
@QuentinPhrl
Copy link

No solution is up to date, I hate MUI !!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: data grid This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation support: question Community support but can be turned into an improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@DanailH @alexfauquette @zvonimirprpic @QuentinPhrl