PrimeReact DataTable: как включить горизонтальную прокрутку и предотвратить переполнение? ⇐ CSS

[Anonymous]

Я работаю над проектом React, используя компонент DataTable PrimeReact, но мне сложно удержать таблицу в родительском контейнере. Когда содержимое таблицы превышает доступную ширину, оно выходит за пределы экрана вместо горизонтальной прокрутки, вызывая горизонтальную прокрутку всей страницы.
Вот мой код макета:

Код: Выделить всё

export const AuthenticatedLayout = ({ children }) => {
return (






{children}




);
};

Вот компонент CustomDataTable:

Код: Выделить всё

const CustomDataTable = ({
data,
columns,
actionsBodyTemplate,
first,
rows,
totalRecords,
onPageChange,
customTemplate,
}) => {
return (


{columns.map((col, index) => (

))}
{actionsBodyTemplate && (

)}



{customTemplate && {customTemplate}}

first={first}
rows={rows}
totalRecords={totalRecords}
onPageChange={onPageChange}
rowsPerPageOptions={[5, 10, 20]}
className="custom-paginator"
/>



);
};

export default CustomDataTable;

Вот как я использую компоненты:

Код: Выделить всё

return (

 (
 openModal("update", rowData)}
onDelete={() => deleteMutation.mutate(rowData.id)}
onShow={() => navigate(`/portfolios/${rowData.id}`)}
/>
)}
customTemplate={
selectedCheckboxes.length > 0 && (

 hideCheckboxes()}
>
გაუქმება

 setDistributionModalVisible(true)}
>
გადანაწილება


)
}
/>

);

Несмотря на эти попытки, таблица по-прежнему переполняет родительский контейнер, и вся страница прокручивается горизонтально. Когда размер экрана уменьшается, проблема сохраняется, и таблица не настраивает должным образом поведение прокрутки. Я ищу решение, которое ограничивает таблицу ее родительским контейнером, гарантирует, что горизонтальная прокрутка работает только для таблицы, и обрабатывает изменение размера экрана, не нарушая макет.

Подробнее здесь: https://stackoverflow.com/questions/792 ... t-overflow