Check out this demonstration: https://jsfiddle.net/yb57vrhp/1/
Here is the HTML code snippet:
<div id="box"></div>
JavaScript code:
const { Box, BoxHeader, BoxContent, BoxItem, Button, BoxItemColumn, BoxHeaderRow, getMuiTheme } = MaterialUI;
class Demo extends React.Component {
render() {
return (
<div style={{ width: '100%' }}>
<Box style={{ width: 400, margin: 'auto' }}>
<BoxHeader>
<BoxHeaderRow>
<BoxItemColumn>ID</BoxItemColumn>
<BoxItemColumn>Name</BoxItemColumn>
<BoxItemColumn>Status</BoxItemColumn>
</BoxHeaderRow>
</BoxHeader>
<BoxBody>
<BoxItem>
<BoxItemColumn>1</BoxItemColumn>
<BoxItemColumn>John Smith</BoxItemColumn>
<BoxItemColumn>Employed</BoxItemColumn>
</BoxItem>
<BoxItem>
<BoxItemColumn>2</BoxItemColumn>
<BoxItemColumn>Randal White</BoxItemColumn>
<BoxItemColumn>Unemployed</BoxItemColumn>
</BoxItem>
<BoxItem>
<BoxItemColumn>3</BoxItemColumn>
<BoxItemColumn>Stephanie Sanders</BoxItemColumn>
<BoxItemColumn>Employed</BoxItemColumn>
</BoxItem>
<BoxItem>
<BoxItemColumn>4</BoxItemColumn>
<BoxItemColumn>Steve Brown</BoxItemColumn>
<BoxItemColumn>Employed</BoxItemColumn>
</BoxItem>
</BoxBody>
</Box>
</div>
);
}
}
const Application = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Demo />
</MuiThemeProvider>
);
ReactDOM.render(
<Application />,
document.getElementById('box')
);