material_react_table : how can show table title and move icon of topToolbar to Left?

how can :

• show table title
• move icon of topToolbar to Left

I have searched extensively on this site and elsewhere and tried hundreds of possibilities.

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.

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

// 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 colun_header = {      
    sx: {
      fontWeight: 'bold',
      fontSize: '14px',
      color:'#66cc00',   
    },
  }
  

  return (
    <div style={{ maxWidth: "100%" }}>
    test    
    <MaterialReactTable        
    columns={columns}
    data={data}
    title="Average Expense Ratio" 
    localization={lang_table_setup}
    muiTableHeadCellProps= {colun_header}    
  /></div>);
};

export default Example;

I’ve been trying a lot of things for 12 hours without success.

>Solution :

 <MaterialReactTable
        //

        muiTopToolbarProps={{
          sx: {
            justifyContent: 'space-between', // Spreads items to the sides
            flexDirection: 'row-reverse', // Reverses the order, moving icons to the left
          },
        }}
 renderTopToolbarCustomActions={() => (
          <div style={{ fontSize: '20px', fontWeight: 'bold' }}>
            Average Expense Ratio
          </div>
        )}
       /
      /> 

Try adding this. But personally I think it’s better to add the topic as a separate component.