I recently started using the Material-Table component for a project I'm working on, and it's been great for managing tables with features like adding, editing, deleting, and searching rows. However, I've run into a few issues that I need help with.
The main issue I'm facing is related to styling. When I integrate Material UI components into my page as child components, all custom and built-in styling seems to disappear. For example, the padding and spacing between AppBar buttons are missing, and the font styling looks off.
Another problem I'm encountering is with icons. The icons in the table are not rendering properly; they just show up as large cut-off text instead of the expected images.
Interestingly, these styling and icon issues only occur when the table is present on the page. Other pages without the table do not seem to be affected by these issues.
If anyone has encountered similar problems or knows how to solve them, I would greatly appreciate any advice or suggestions. Thank you!
In an attempt to fix the icon display problem, I have already tried re-installing the library and importing the necessary resources. Below is a snippet of the code I used to implement the Material Table:
<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);
}),
}}
/>