Reputation: 31
I am working on a React project using PrimeReact's DataTable component, but I'm struggling to contain the table within its parent container. When the table's content exceeds the available width, it overflows the screen instead of adding a horizontal scroll, causing the entire page to scroll horizontally.
Here is my layout code:
export const AuthenticatedLayout = ({ children }) => {
return (
<div className="flex h-screen overflow-hidden">
<SideBar />
<div className="flex-1 flex flex-col">
<Navbar />
<div className="flex-1 w-full p-3 bg-gray-100 overflow-hidden">
<main className="w-full px-4 py-6 bg-[#FFFFFF] rounded-md h-full overflow-y-auto overflow-hidden">
{children}
</main>
</div>
</div>
</div>
);
};
Here is the CustomDataTable component:
const CustomDataTable = ({
data,
columns,
actionsBodyTemplate,
first,
rows,
totalRecords,
onPageChange,
customTemplate,
}) => {
return (
<div className="flex flex-col h-full">
<DataTable
scrollable
value={Array.isArray(data) ? data : []}
className="custom-datatable w-full overflow-x-auto"
resizableColumns
>
{columns.map((col, index) => (
<Column
key={index}
field={col.field}
header={col.header}
body={col.body || null}
/>
))}
{actionsBodyTemplate && (
<Column header="Actions" body={actionsBodyTemplate} />
)}
</DataTable>
<div className="mt-2">
{customTemplate && <div className="mb-4">{customTemplate}</div>}
<div className="w-full flex justify-end items-end">
<Paginator
first={first}
rows={rows}
totalRecords={totalRecords}
onPageChange={onPageChange}
rowsPerPageOptions={[5, 10, 20]}
className="custom-paginator"
/>
</div>
</div>
</div>
);
};
export default CustomDataTable;
This is how I use the components:
return (
<AuthenticatedLayout>
<CustomDataTable
columns={columns}
data={portfolios}
actionsBodyTemplate={(rowData) => (
<ActionButtons
onUpdate={() => openModal("update", rowData)}
onDelete={() => deleteMutation.mutate(rowData.id)}
onShow={() => navigate(`/portfolios/${rowData.id}`)}
/>
)}
customTemplate={
selectedCheckboxes.length > 0 && (
<div className="flex items-center gap-4 justify-end border-b py-4">
<button
className="rounded-lg border border-gray-300 py-2 text-sm text-black px-2"
onClick={() => hideCheckboxes()}
>
გაუქმება
</button>
<button
className="rounded-lg py-2 text-sm text-white px-2 bg-customBlue"
onClick={() => setDistributionModalVisible(true)}
>
გადანაწილება
</button>
</div>
)
}
/>
</AuthenticatedLayout>
);
Despite these attempts, the table still overflows its parent container, and the entire page scrolls horizontally. When the screen size decreases, the issue persists, and the table does not adjust its scroll behavior properly. I am looking for a solution that confines the table to its parent container, ensures the horizontal scroll works only for the table, and handles screen resizing without breaking the layout.
Upvotes: 0
Views: 95
Reputation: 1
You could add a scroll width if you don't want it to overflow the parent element. Add this to your datatable: scrollHeight = "300px"
Upvotes: 0