Basic Details Panel

Usage#

import MaterialTable from '@material-table/core';
<MaterialTable
// ... other props
detailPanel={({rowData}) => {
return (
<div
style={{
fontSize: 20,
textAlign: 'center',
height: 100
}}
>
This is a detailed panel for {rowData.name}
</div>
)
}}
/>

Live Demo#

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor
Result
Table Title
Id
Name
2Joe
1Mary