How to change sort icon of mui tablee in react js?

Hi 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 install @mui/material @emotion/react @emotion/styled


yarn add @mui/material @emotion/react @emotion/styled

Step 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.

    { => (
    <TableRow key={}>
    <TableCell component="th" scope="row">
        <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">{}</TableCell>

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.


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');

  return (
    <TableContainer component={Paper}>
                active={orderBy === 'name'}
                direction={orderBy === 'name' ? order : 'asc'}
                onClick={() => handleSort('name')}
                active={orderBy === 'age'}
                direction={orderBy === 'age' ? order : 'asc'}
                onClick={() => handleSort('age')}
          {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={}>

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.

React, change, sort, icon, of, mui, table

All the best πŸ‘

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts