如何启用水平滚动并防止溢出？

Question

我正在使用 PrimeReact 的 DataTable 组件开发一个 React 项目，但我正在努力将表包含在其父容器中。当表格内容超过可用宽度时，它会溢出屏幕而不是添加水平滚动，导致整个页面水平滚动。

这是我的布局代码：

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>
  );
};

这是 CustomDataTable 组件：

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;

这就是我使用组件的方式：

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>
);

尽管进行了这些尝试，表格仍然溢出其父容器，并且整个页面水平滚动。当屏幕尺寸减小时，问题仍然存在，并且表格无法正确调整其滚动行为。我正在寻找一种解决方案，将表格限制在其父容器中，确保水平滚动仅适用于表格，并在不破坏布局的情况下处理屏幕大小调整。

Answer 1

如果您不希望滚动宽度溢出父元素，可以添加滚动宽度。将其添加到您的数据表中：scrollHeight =“300px”