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/
Thank’s
[!tableenter image description here](https://i.sstatic.net/3PPBmslD.jpg)
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.