Having an issue with data overflow in my MaterialTable from material-ui when viewed on mobile devices. It displays fine on desktop, but the table data spills over on smaller screens. How can I resolve this problem?
<MaterialTable
className={classes.table}
title="Editable Example"
columns={state.columns}
data={state.data}
options={{
padding: "dense",
tableLayout: "fixed",
actionsColumnIndex: -1,
exportButton: true,
}}
editable={{
onRowAdd: (newData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.push(newData);
return { ...prevState, data };
});
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
if (oldData) {
setState((prevState) => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return { ...prevState, data };
});
}
}, 600);
}),
onRowDelete: (oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1);
return { ...prevState, data };
});
}, 600);
}),
}}
/>
- See visual representation of the problem here