How to change sort icon of mui tablee in react js?
March 18, 2024Hi Friends 👋,
Welcome To aGuideHub!
To change sort icon of mui table in React js, you can use handleSort. It will change sort icon of mui table in react js.
Today, I am going to show you, how to change sort icon of mui table 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 change sort icon of mui table 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 change sort icon of mui table 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 from "react";
import { makeStyles } from '@mui/styles';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } 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.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="center">{row.calories}</TableCell>
<TableCell align="center">{row.fat}</TableCell>
<TableCell align="center">{row.carbs}</TableCell>
<TableCell align="center">{row.protein}</TableCell>
<TableCell align="center">{row.food}</TableCell>
</TableRow>
))}
</TableBody>MUI material change sort icon of mui table 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 handleSort to change sort icon of mui table 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';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
// Sample data
const rows = [
{ id: 1, name: 'John', age: 30 },
{ id: 2, name: 'Doe', age: 25 },
{ id: 3, name: 'Jane', age: 35 },
];
const CustomSortIcon = ({ order }) => {
return order === 'desc' ? <ArrowDownwardIcon /> : <ArrowUpwardIcon />;
};
const CustomTable = () => {
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')}
IconComponent={CustomSortIcon}
>
Name
</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel
active={orderBy === 'age'}
direction={orderBy === 'age' ? order : 'asc'}
onClick={() => handleSort('age')}
IconComponent={CustomSortIcon}
>
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 CustomTable;In the above code example, I have used the @mui/material component and change sort icon of mui table in react js.
Check the output of the above code example.
All the best 👍