How to add button on mui table in react js?
March 03, 2023Hi Friends 👋,
Welcome To aGuideHub!
To add button on mui table in React js, you can use <Button> in mui table tableCell tag. It will show button in mui table.
Today, I am going to show you, how to add button on mui table in react js.
Table of contents
- Installation.
- Import Required Components.
- Define Table Data.
- Render Table with Button.
Let’s start with the first step.
Step 1: Installation.
Install the following packages to use add button on mui table in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledStep 2: Import Required Components
To create a button in React, first, you have to import the button.
we have imported the table, tableBody, tableCell, tableContainer``, tableHead, tableRow, and Button components from the @mui/material library.
import { Button, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';Step 3: Define Table Data.
We have to define to show the data of our table.
const tableData = [
{
id: 1,
name: 'Suraj',
age: 30,
address: 'Gujrat'
},
{
id: 2,
name: 'Vir',
age: 25,
address: 'Vihar'
},
];Step 4: Render Table with Button.
We can render our table with a button column.
<Button variant="contained"
onClick={() =>
handleClick(row.id)}>
Click me</Button>MUI material add button on mui table example.
The below code is an example of a Material UI table. You have to import @mui material table and use this code <Button> in add button on mui table.
App.js
import { Button, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
const tableData = [
{
id: 1,
name: 'Suraj',
age: 30,
address: 'Gujrat'
},
{
id: 2,
name: 'Vir',
age: 25,
address: 'Vihar'
},
// Add more objects as needed
];
function handleClick(id) {
// Define the logic for handling the button click here
console.log(`Button clicked for row with id ${id}`);
}
function App() {
return (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
<TableCell>Address</TableCell>
<TableCell>Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tableData.map((row) => (
<TableRow key={row.id}>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
<TableCell>{row.address}</TableCell>
<TableCell>
<Button variant="contained" onClick={() => handleClick(row.id)}>Click me</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
export default App;In the above code example, I have used the @mui/material component and add button on mui table.
Check the output of the above code example.
Here, we are provided code sandbox links for the above program add button on mui table. Then you can use whenever you want and do the changes as per your requirements.
All the best 👍
