I'm using Material Table and I need change the Action column name but this column is automatic generated because I'm using editable function from material table.
<MaterialTable
title=""
localization={{
body: {
editRow: {
saveTooltip: "Salvar",
cancelTooltip: "Cancelar",
deleteText: "Tem certeza que deseja deletar este registro?"
},
addTooltip: "Adicionar",
deleteTooltip: "Deletar",
editTooltip: "Editar"
}
}}
columns={state.columns}
data={state.data}
editable={{
onRowAdd: newData => createInstructor(newData),
onRowUpdate: async (newData, oldData) =>
updateInstructor(newData, oldData),
onRowDelete: oldData => deleteInstructor(oldData)
}}
/>
How can I change these icons and column name ?
You can change the icon of the action by supplying arbitrary React component as the value for icon prop. So instead of edit or delete , add a component of a desired icon. Something like: import { Edit } from '@material-ui/icons' // ...
There are two ways to use icons in material-table either import the material icons font via html OR import material icons and use the material-table icons prop.
As you've rightfully assumed, the title of the that column, as well as all the text strings in the material table are customizable via localization property.
<MaterialTable
// other props
localization={{
pagination: {
labelDisplayedRows: '{from}-{to} of {count}'
},
toolbar: {
nRowsSelected: '{0} row(s) selected'
},
header: {
actions: 'Actions'
},
body: {
emptyDataSourceMessage: 'No records to display',
filterRow: {
filterTooltip: 'Filter'
}
}
}}
/>
Notice header.actions
item. That's the one for you.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With