Custom Column Rendering#
Usage#
import MaterialTable from '@material-table/core';
<MaterialTable
// ...
columns={[
{
field: 'url',
title: 'Avatar',
render: rowData => {
return <img src={rowData.url} style={{width: 50, borderRadius: '50%'}}/>
}
}
]}
/>
Live Demo#
note
See here for more on the GLOBAL_VARS
we use in our demos
Live Editor
function RenderImage() {return (<MaterialTableicons={TABLE_ICONS}data={[{name: 'Mehmet',surname: 'Baran',birthYear: 1987,birthCity: 63,imageUrl: 'https://avatars0.githubusercontent.com/u/7895451?s=460&v=4'},{name: 'Zerya Betül',surname: 'Baran',birthYear: 2017,birthCity: 34,imageUrl: 'https://avatars0.githubusercontent.com/u/7895451?s=460&v=4'},]}columns={[{title: 'Avatar',field: 'imageUrl',/*** Custom column rendering*/render: rowData => {const styles = { width: 40, borderRadius: '50%' };return <img src={rowData.imageUrl} style={styles}/>}},{title: 'Name',field: 'name'},{title: 'Surname',field: 'surname'},{title: 'Birth Year',field: 'birthYear',type: 'numeric'},{title: 'Birth Place',field: 'birthCity',lookup: {34: 'İstanbul',63: 'Şanlıurfa'},},]}/>)}
Result
Table Title
Avatar | Name | Surname | Birth Year | Birth Place |
---|---|---|---|---|
Mehmet | Baran | 1987 | Şanlıurfa | |
Zerya Betül | Baran | 2017 | İstanbul | |
Rows per page: 5 rows 1-2 of 2 1-2 of 2 |