material-table: Invalid prop `actions[0]` supplied to `MaterialTable` and fontSize='small'
Describe the bug
Warning: Failed prop type: Invalid prop actions[0]
supplied to MaterialTable
.
Can’t pass fontSize props when using string icon
To Reproduce Steps to reproduce the behavior:
- Add actions to Material Table component
Example :
actions={[ { icon: 'create', tooltip: 'Add', onClick: (event, rowData) => { //Do stuff } } ]
- Instead of a string, pass an icon component directly as the icon props
import Create from ‘@material-ui/icons/Create’;
Example :
actions={[ { icon: Create, tooltip: 'Add', onClick: (event, rowData) => { //Do stuff } } ]
- See error in console
- Additionnaly, because of this in m-table-action.js
{typeof action.icon === "string" ? ( <Icon {...action.iconProps} fontSize="small">{action.icon}</Icon> ) : ( <action.icon {...action.iconProps} disabled={action.disabled} /> ) }
We can’t change the fontSize props if the icon is a string, for example if I seticonProps: { fontSize: 'default' }
My props will be overriden by the hardcoded one (fontSize=“small”).
Expected behavior We shouldn’t get this warning. You should probably remove this fontSize props to let users customize the size.
Desktop (please complete the following information):
- Chrome (didn’t test on other platforms)
- Version 1.39.0
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 8
- Comments: 18 (2 by maintainers)
@IdkMan2 @mbrn FYI–
I FINALLY FOUND A FIX!
I was previously supplying my actions as objects like this:
Changing each action to a
function
resolved this for me!!!THE FIX:
It clears the warning but it doesn’t work with isFreeAction: true unfortunately.
I can confirm that. It’s working for me too, but it’s still a temporary workaround. Waiting for fix from author.
@bableves
Nice find. Ultimately this is something that needs to be resolved within the code base. That solution I found could be considered to be hacky. Sorry it’s not working for you =/
With “material-table”: “1.53.0”, i have the following for my Material Table:
First action will be ‘table wide’ and second one is ‘per row’.
You can try it on my sandbox: https://codesandbox.io/s/mui-button-bar-7qcmg
I am still having this issue - has there been a fix for it yet?
@skitsanos that is awesome!! Excellent work, my friend. I love it 😃 looks really good, too!
Thank you @oze4
I’ve done some tweaking to my DataTable wrapper.
Support for URL and array data sources:
or
Support for two variants of search behavior:
This one will render simple text field where you can type search criteria and look for this value in all fields.
Allows making search queries by simple or key/value pair tags, for example i can write my search query like this:
I’ve also added EditorDrawer, so when you click on the row, there is a drawer opens where you can deal with your row data:
Export functionality was modified as well. It can handle custom rendered columns with deep hierarchy of cell data. There is also optional exportAs property on columns that taken into consideration during the export:
In this particular case I take role array of my row and render a check icon if array is empty. But for exporting to CSV I render it as yes/no options.
Plus polished some CSS.
To make it work on Edge, add corejs polyfill from https://github.com/zloirock/core-js
demo time
Updated sandbox is here: https://codesandbox.io/s/mui-datatable-7qcmg
You are free to fork and give some love if you find it handy 😃
@skitsanos nice work! The root of this problem still needs to be resolved, though (not taking away from your out-of-the-box thinking, but supplying an empty function to “resolve” this feels so hacky)…
Cheers!
Update. it seems that it is obligatory to pass onClick: () =>{} handler to make it work… Solved.