material-react-table : how can I change header icon color?

Question

How can I change header icon color ?

I would like to put them in red with a darker when hover.

I looked on this site and other sites with no success.

https://mui.com/material-ui/react-table/

Thanks a lot

In business, great things are never done by one person, they are done by a team. In business, great things are never done by one person, they are done by a team.

import { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
} from 'material-react-table';


import * as call_cookie from './Cookies.js';
import * as table_setup_fr from './Table_setup_fr.js';
import * as table_setup_en from './Table_setup_en.js';
import { AlignHorizontalLeft } from '@mui/icons-material';
import { BorderBottom, BorderClear, BorderColor, BorderLeft, BorderStyle, BorderTop } from '@material-ui/icons';

// switch language of the table
var lang_table_setup = '';
if (call_cookie.get_cookie('language') === 'fr'){
  lang_table_setup = JSON.parse(table_setup_fr.get_table_translation(),)
}
else{
  lang_table_setup = JSON.parse(table_setup_en.get_table_translation())
}

//nested data is ok, see accessorKeys in ColumnDef below
const data = [
  {
    firstName: 'John',
    lastName: 'Doe',
    address: '261 Erdman Ford',
    city: 'East Daphne',
    state: 'Kentucky',
  },
  {
    firstName: 'Jane',
    lastName: 'Doe',
    address: '769 Dominic Grove',
    city: 'Columbus',
    state: 'Ohio',
  },
  {
    firstName: 'Joe',
    lastName: 'Doe',
    address: '566 Brakus Inlet',
    city: 'South Linda',
    state: 'West Virginia',
  },
  {
    firstName: 'Kevin',
    lastName: 'Vandy',
    address: '722 Emie Stream',
    city: 'Lincoln',
    state: 'Nebraska',
  },
  {
    firstName: 'Joshua',
    lastName: 'Rolluffs',
    address: '32188 Larkin Turnpike',
    city: 'Charleston',
    state: 'South Carolina',
  },
];

const Example = () => {
  //should be memoized or stable
  const columns = useMemo(
    () => [
      {
        accessorKey: 'firstName', 
        header: 'First Name',
        size: 150,
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
        size: 150,
      },
      {
        accessorKey: 'address', 
        header: 'Address',
        size: 200,
      },
      {
        accessorKey: 'city',
        header: 'City',
        size: 150,
      },
      {
        accessorKey: 'state',
        header: 'State',
        size: 150,
      },
    ],
    [],
  );  


  // column header
  var column_header_set = {      
    sx: {
      fontWeight: 'bold',
      fontSize: '14px',
      color:'black',
      BorderTop:'0px', 
      boxShadow: 0,
      bgcolor: 'white',
    },
  }


  // topToolbar
  var topToolbar_set = {
    sx: {
      paddingTop:'10px',
      //justifyContent: 'space-between', // Spreads items to the sides
      //flexDirection: 'row-reverse', // Reverses the order, moving icons to the left
      zIndex:0,
      bgcolor: '#FAFAFA',
      boxShadow: 0,
      BorderStyle:'solid',
      border: '1px solid #4b286d',
      borderRadius: 2,
 
    },
  }


  // table
  const table_set = {
    sx: {
      paddingTop:'20px',
      paddingBottom:'20px',
      bgcolor:'white',
      boxShadow: 0,
      borderCollapse: "collapse",
      border: '1px solid #ffffff'
    },
    
  }


  // pagination
  var pagination_set = {
    sx: {
      paddingTop:'100px',
    },
  }
  

  return (
    <div style={{ maxWidth: "100%", padding:"10px"}}>        
    <MaterialReactTable        
    columns={columns}
    data={data}

    localization={lang_table_setup}
    muiTableHeadCellProps= {column_header_set}    
    muiTopToolbarProps={topToolbar_set}
    muiTableProps={table_set}    
    
    renderTopToolbarCustomActions={() => (
      <div style={
        { 
          fontSize: '18px', 
          fontWeight: 'normal',
          color:'#4b286d',
        }
      }>
        title
      </div>
    )}
  
  /></div>);
};

export default Example;

Answer 1

I have found ways to change them, not completely sure how well they will work with changing for on hover but I can show the docs for material-react-table I think will be useful for you.
The first most important thing is customizing them with MaterialReactTable. This is done with the passing of an icons prop to the component and you can see more about that here.
After that you can get a list of all the icons you can change within that in the github icons file they have.
They seem to have a lot of options for icons, including MUI and FontAwesome, and I am sure you can use some of your own if you try hard enough :)
You can change the color MUI Icons quite easily with overriding the MUI styling using the sx props that exists on their components for example

<Icon sx={{color: 'red'}} />

This should work for any of the Icons you can import from MUI including the ones already being used.