Is it possible to create different action button in mui tables? - reactjs

Question

I'm creating a table where the data will be fetched from api and displayed in the mui table or material table. I wanna show different action button to different rows like in the first row the button should display "connect" when I click on that connect it should be changed into "disconnect" the problem here is it changes all the existing "connect" button into disconnect and again when the disconnect is clicked the button should change into connect. I want this behaviour to apply for that particular row alone not the entire table. How can I achieve this?

Answer 1

You should extent the array of data that you use on the Mui table by adding an extra fields for each row. One for saving the status ("connect" or "disconnect") and other for recognizing the row that must change.
After that you will be able to call the onClick event of the Button component and will affect only the target row.
Taking the example from Mui page on codesandbox, I added the "id" and "isConnected" prop to the data array. You can see the modified version in this link and also bellow:
function createData(id, name, calories, fat, carbs, protein, isConnected) {
return { id, name, calories, fat, carbs, protein, isConnected };
}
const data = [
createData(1, "Frozen yoghurt", 159, 6.0, 24, 4.0, true),
createData(2, "Ice cream sandwich", 237, 9.0, 37, 4.3, false),
createData(3, "Eclair", 262, 16.0, 24, 6.0, false),
createData(4, "Cupcake", 305, 3.7, 67, 4.3, false),
createData(5, "Gingerbread", 356, 16.0, 49, 3.9, false)
];
export default function BasicTable() {
const [rows, setRows] = React.useState(data);
const handleChangeConnect = (id) => {
console.log("The id is ", id);
setRows(
rows.map((row) => {
if (row.id == id) {
return { ...row, isConnected: !row.isConnected };
} else return { ...row };
})
);
};
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
<TableCell align="right">Is connected</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow
key={row.name}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
<TableCell align="right">
<Button
variant="contained"
color={row.isConnected ? "primary" : "secondary"}
onClick={() => {
handleChangeConnect(row.id);
}}
>
{row.isConnected ? "disconnect" : "connect"}
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
```l

Answer 2

Instead of using var for determining if it is connect or disconnect you need to use associative array for determine that example
if(check[index]==true){
<button onClick={handlechange}>Disconnect </button>
}
else {
<button onClick={handlechange}>connect </button>}