How to make mui table with sorting in react js?
March 14, 2024Hi Friends 👋,
Welcome To aGuideHub!
To make mui table with sorting in React js, you can use sort in Table. It will make mui table with sorting in react js.
Today, I am going to show you, how to make mui table with sorting 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 sorting 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 sorting in React, first, you have to import the table. We have imported the table, tableBody, tableCell, tableContainer, tableHead, tableRow, and Paper components from the @mui/material library.
import React, { useState } from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
import Paper from '@mui/material/Paper';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.sort((a, b) => {
if (order === 'asc') {
return a[orderBy] < b[orderBy] ? -1 : 1;
} else {
return a[orderBy] > b[orderBy] ? -1 : 1;
}
}).map((row) => (
<TableRow key={row.id}>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
</TableRow>
))}
</TableBody>MUI material make mui table with sorting 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 sort to make mui table with sorting in react js.
App.js
import React, { useState } from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
import Paper from '@mui/material/Paper';
// Sample data
const rows = [
{ id: 1, name: 'John', age: 30 },
{ id: 2, name: 'Doe', age: 25 },
{ id: 3, name: 'Jane', age: 35 },
];
const SortableTable = () => {
const [orderBy, setOrderBy] = useState(null);
const [order, setOrder] = useState('asc');
const handleSort = (property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>
<TableSortLabel
active={orderBy === 'name'}
direction={orderBy === 'name' ? order : 'asc'}
onClick={() => handleSort('name')}
>
Name
</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel
active={orderBy === 'age'}
direction={orderBy === 'age' ? order : 'asc'}
onClick={() => handleSort('age')}
>
Age
</TableSortLabel>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.sort((a, b) => {
if (order === 'asc') {
return a[orderBy] < b[orderBy] ? -1 : 1;
} else {
return a[orderBy] > b[orderBy] ? -1 : 1;
}
}).map((row) => (
<TableRow key={row.id}>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
export default SortableTable;In the above code example, I have used the @mui/material component and made mui table with sorting in react js.
Check the output of the above code example.
All the best 👍