How to make mui table with multi-select in react js?
March 12, 2024Hi Friends 👋,
Welcome To aGuideHub!
To make mui table with multi-select in React js, you can use Checkbox in Table. It will make mui table with multi-select in react js.
Today, I am going to show you, how to make mui table with multi-select in react js.
Table of contents
- Install Material-UI
- Import the required Material-UI components.
- Define the table body.
Let’s start with the first step.
Step 1: Install Material-UI
Install the following packages to use make mui table with multi-select in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledStep 2: Import the required Material-UI components.
To make mui table with multi-select in React, first, you have to import the table. We have imported the table, tableBody, tableCell, tableContainer, tableHead, tableRow, Checkbox and Paper components from the @mui/material library.
import React from 'react';
import MultiSelectTable from './MultiSelectTable';
import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Checkbox } from '@mui/material';Step 3: Define the table body.
Table body is needed after table head, This code creates a table body with one row for each object in the rows array.
<TableBody>
{rows.map((row) => (
<TableRow
key={row.id}
hover
onClick={() => handleSelectRow(row)}
role="checkbox"
aria-checked={isSelected(row)}
selected={isSelected(row)}
>
<TableCell padding="checkbox">
<Checkbox checked={isSelected(row)} />
</TableCell>
{columns.map((column) => (
<TableCell key={column}>{row[column]}</TableCell>
))}
</TableRow>
))}
</TableBody>MUI material make mui table with multi-select example.
The below code is an example of a Material UI table. You have to import @mui material table. In the Material Table function when you create a table component, it consists of a table head and a table body. In this code, we create our TableContainer component with a Paper component as its child and use Checkbox to make mui table with multi-select in react js.
App.js
import React from 'react';
import MultiSelectTable from './MultiSelectTable';
const rows = [
{ id: 1, name: 'Item 1', quantity: 5 },
{ id: 2, name: 'Item 2', quantity: 10 },
{ id: 3, name: 'Item 3', quantity: 15 },
];
const columns = ['name', 'quantity'];
const App = () => {
return <MultiSelectTable rows={rows} columns={columns} />;
};
export default App;MultiSelectTable.js
import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Checkbox } from '@mui/material';
const MultiSelectTable = ({ rows, columns }) => {
const [selectedRows, setSelectedRows] = useState([]);
const handleSelectRow = (row) => {
const selectedIndex = selectedRows.indexOf(row);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selectedRows, row);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selectedRows.slice(1));
} else if (selectedIndex === selectedRows.length - 1) {
newSelected = newSelected.concat(selectedRows.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selectedRows.slice(0, selectedIndex),
selectedRows.slice(selectedIndex + 1),
);
}
setSelectedRows(newSelected);
};
const isSelected = (row) => selectedRows.indexOf(row) !== -1;
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>
<Checkbox
indeterminate={selectedRows.length > 0 && selectedRows.length < rows.length}
checked={selectedRows.length === rows.length}
onChange={() => {
if (selectedRows.length === rows.length) {
setSelectedRows([]);
} else {
setSelectedRows([...rows]);
}
}}
/>
</TableCell>
{columns.map((column) => (
<TableCell key={column}>{column}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow
key={row.id}
hover
onClick={() => handleSelectRow(row)}
role="checkbox"
aria-checked={isSelected(row)}
selected={isSelected(row)}
>
<TableCell padding="checkbox">
<Checkbox checked={isSelected(row)} />
</TableCell>
{columns.map((column) => (
<TableCell key={column}>{row[column]}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
export default MultiSelectTable;In the above code example, I have used the @mui/material component and made mui table with multi-select in react js.
Check the output of the above code example.
All the best 👍
