actions={[
{
icon: 'edit',
tooltip: 'Edit User',
onClick: (event, rowData) => alert('You are editing ' + rowData.name)
},
{
icon: 'delete',
tooltip: 'Delete User',
onClick: (event, rowData) => confirm('You want to delete ' + rowData.name)
}
]}
how to change material table action fields icon
Asked Answered
Consider adding context and description and format your question properly. –
Demantoid
You can change the icon of the action by supplying arbitrary React component as the value for icon
prop.
icon string or () => ReactElement - Icon of button from material icons or custom component
So instead of edit
or delete
, add a component of a desired icon. Something like:
import { Edit } from '@material-ui/icons'
// ...
{
icon: () => <Edit />,
tooltip: 'Edit User',
onClick: (event, rowData) => alert('You are editing ' + rowData.name)
},
// ...
how do it? give me example please ty –
Melodize
IT should be something like this icon:() => <Edit /> other wise it will give an error –
Sulk
Thanks, was a typo basically. –
Demantoid
Simple Sample Code like this:
<MaterialTable
// other props
actions={[
{
icon: 'save',
tooltip: 'Save User',
onClick: (event, rowData) => {
// Do save operation
}
}
]}
/>
if you use somethimg like FontawesomeIcon, this sample is good:
<MaterialTable
// other props
actions={[
{
icon: () => <FontAwesomeIcon icon={faSave} />,
tooltip: 'Save User',
onClick: (event, rowData) => {
// Do save operation
},
},
]}
/>
In my case I imported the icon
import VisibilityIcon from '@material-ui/icons/Visibility';
and simply passed it like this
actions = {
[{
icon: VisibilityIcon,
tooltip: 'View'
onClick: (event, rowData) => {
// Your required onclick functionality
}
}]
}
Hope this helps... have a nice day
© 2022 - 2024 — McMap. All rights reserved.