Use icons as field labels in Datagrid
See original GitHub issueIs your feature request related to a problem? Please describe.
I want to show an icon as a column header in Datagrid, like this:

I can achieve this with:
label={<StarBorderIcon fontSize={'small'} className={classes.columnIcon} />}
The problem is that the FieldTitle component always tries to translate the field’s label, and gives this error in the console:
Warning: Missing translation for key: "[object Object]"
at FieldTitle (http://localhost:4533/static/js/0.chunk.js:106580:21)
at pure(FieldTitle) (http://localhost:4533/static/js/0.chunk.js:187826:9)
at th
at TableCell (http://localhost:4533/static/js/0.chunk.js:27368:28)
at WithStyles (http://localhost:4533/static/js/0.chunk.js:41841:31)
at DatagridHeaderCell (http://localhost:4533/static/js/0.chunk.js:131626:25)
...
Describe the solution you’d like
Maybe we could have a new property in the Field that accepts a component as label, instead of using the label itself (iconLabel?).
Describe alternatives you’ve considered Can’t think of anything else.
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
how to add icon in a datagrid in reactjs - Stack Overflow
Check the following to insert a material-ui icon in your datagrid. import React ...
Read more >JavaScript Data Grid: Custom Icons - AG Grid
JavaScript Data Grid: Custom Icons. This sections details how to provide your own icons for the grid and style grid icons for your...
Read more >Data Grid - Column definition - MUI X
The columns are defined with the columns prop which has the type GridColDef[] . field is the only required property since it's the...
Read more >Change the label of the search bar button of a data grid
No, there isn't an easy way: for our project, we did this by hand. We've filed a ticket for this: #203297 ("Use different...
Read more >lightning-datatable - documentation - Salesforce Developers
To display an icon instead of a label in the column header, specify the properties iconName and hideLabel in the column definition. Specify...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

@deluan That’s what I did, see attached PR.
Definitely useful! I actually need it, too. Marking it as a feature request, and working on an implementation.