У меня есть таблица с фиксированным макетом таблицы в моем приложении реакции, где я использую компонент MaterialTable (здесь material-table ) в material-ui .
Проблема возникает, когда в мобильном формате я хочу иметь горизонтальную полосу прокрутки для просмотра столбцов переполнения. На данный момент я добавил wordWrap: "break-word", чтобы таблица соответствовала правильному размеру, но я хочу заменить это одной горизонтальной полосой. Пожалуйста, предложите помощь.
return (
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
options={{
rowStyle: {
wordWrap: "break-word",
},
padding: "dense",
tableLayout: "fixed",
actionsColumnIndex: -1,
exportButton: true,
draggable: 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);
}),
}}
/>
);
Визуальная иллюстрация проблемы приведена ниже введите описание изображения здесь