I am new in react js I am using material UI. I have used Material Table to display server side data. I want to change the Export button design. Is there any way to override the export button design or use material table export function with custom button?
`<MaterialTable tableRef={tableRefEmp} title={"Employee"}
columns={[
{title: "Name", field: 'first_name', render: (rowData) =>
!!rowData && rowData.first_name !== undefined ? (<EmployeePopUpLink rowData={rowData} />) : ('')
},
{title: 'Company', field: 'company', render: (rowData) =>
!!rowData && rowData.company !== undefined && rowData.company !== null ? (
<CompanyPopUpLink rowData={rowData} />
) : (
''
) },
{title: 'Title', field: 'title' },
{title: 'Get Data', field: 'title', render: (rowData) => {
return !!rowData && <LoopAddToCartSplitBtn employee={ rowData } />
}},
]}
data={tableData}
localization={{
body: {
emptyDataSourceMessage: tableMsg,
},
}}
options={{
search: false,
headerStyle: {backgroundColor: '#192d3e', color: '#fff'},
pageSize: 10,
pageSizeOptions: [10, 25, 50, 100],
exportButton: true,
sorting: false,
selection: true,
rowStyle: rowData => {
if(rowData.company_id+"_"+rowData.employee_id === openedCompanyId){
return {backgroundColor: "rgb(248 248 248)"};
}else if(rowData.employee_id === openedEmployeeId){
return {backgroundColor: "rgb(248 248 248)"};
}
}
}}
components={{
Toolbar: props =>{
// This will let you use your own Title while keeping the search
const propsCopy = { ...props };
console.log(propsCopy);
// Hide default title
propsCopy.showTitle = false;
return (<div className="w-full">
<Grid container direction="row">
<Grid item xs={12} md={2}>
<div className="flex items-center p-8 md:p-16">
<h2>Employee</h2>
</div>
</Grid>
<Grid item xs={12} md={10}>
<div className={"grid-cols-2 md:grid-cols-4 grid grid-rows-1 gap-4 pl-8 md:pl-0"}>
<div className="flex items-center"> <AddToDripBinButton /></div>
<div className="flex items-center"><AddToCartSplitButton /></div>
<div className="flex items-center">
<Button variant="contained" onClick={props.defaultExportCsv } color="primary" size="small">Save This Search</Button>
</div>
<div>
<MTableToolbar {...propsCopy} />
</div>
</div>
</Grid>
</Grid>
</div>);
}
}}
/>`
