I'm trying to use Material-Table component - it's perfect for a table that I'm buildling (add, edit, delete and search rows). I've installed and used it as a child component of a page - everything works but...
STYLING: all custom and built-in styling in the page is lost in all the Material UI components (ie. AppBar buttons have no padding/spacing between, custom font styling is messed up).
ICONS: The icons in the table won't render - they just appear as large cut-off text.
Styling and icons on other pages without the table are not affected.
Anybody have a solve? Thanks in advance.
For icons, I tried reinstalling the library and importing. Also tried putting html method. Snippet of the Material Table code is below.
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
actions={[
{
icon: 'edit',
tooltip: 'Edit Study',
onClick: (event, rowData) => alert("Do you want to edit " + rowData.name + "?")
},
rowData => ({
icon: 'clear',
tooltip: 'Delete User',
onClick: (event, rowData) => alert("You want to delete " + rowData.name),
disabled: rowData.birthYear < 2000
})
]}
editable={{
onRowAdd: newData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...state.data];
data.push(newData);
setState({ ...state, data });
}, 600);
}),
onRowDelete: oldData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...state.data];
data.splice(data.indexOf(oldData), 1);
setState({ ...state, data });
}, 600);
}),
}}
/>
