React Material-UI Cookbook

How it works...

Let's start by looking at the two components that are used as the row actions:

const StartButton = ({ row, onClick }) => (  <IconButton    onClick={onClick}    color={row.status === 'off' ? 'primary' : 'default'}    disabled={row.status === 'running'}  >    <PlayArrowIcon fontSize="small" />  </IconButton>);const StopButton = ({ row, onClick }) => (  <IconButton    onClick={onClick}    color={row.status === 'running' ? 'primary' : 'default'}    disabled={row.status === 'off'}  >    <StopIcon fontSize="small" />  </IconButton>);

The StartButton and StopButton components are very similar. Both of these components are rendered in every row of the table. There's the onClick property, a function that changes the state of the row data when clicked. The color ...