react-virtualized table x-scrolling

Question

是否可以在反应虚拟化中设置x滚动？我有一个固定宽度的表，显示的列比我表中的空间要多，所以我需要一个x-scrollinig。在我的测试中，如果我这样做了，那桌子只是缩小了，如果桌子空间不足，只会显示内容。“＃＆＃39;＆＃39;＆＃39;

Answer 1

react-virtualized Table docs的简介段落（强调补充）：

  

具有固定标题和窗口行的表组件以进行改进   大数据集的性能。该组件需要明确   width和height个参数。 Table内容可以垂直滚动，但是   它并不意味着水平滚动。

你可能能够破解它，但它并不意味着支持水平滚动，所以它可能无法正常工作。如果这是您的应用的要求，请考虑使用Grid或MultiGrid。

Answer 2

我自己为此苦了一段时间。我是通过将表的宽度设置为select session_id, count(*) / nullif(extract('epoch' from (max(timestamp) - min(timestamp))), 0) as sampling_rate from trajectories_splitted group by session_id; session_id | sampling_rate ----------------+--------------------- 20081023025304 | 0.23076923076923078 20081023025305 | 0.14285714285714285 并将每列的最小宽度设置为150来完成此操作的（或者您选择的任何方法只是确保表中的宽度相同）。

然后将其包装在Paper中，并赋予其宽度并溢出X：'auto'

类似这样的东西：

width={Object.keys(rows[0]).length*150}

Answer 3

以bvaughn的公认答案为基础，可水平滚动的表格的骇客外观可能类似于this，但是请注意该骇客附带的以下警告：

• 您溢出的表格列将不虚拟化
• 包装器的x轴滚动捕获了滚动焦点，您需要在内部Table组件内单击以重新聚焦并重新获得y轴滚动。尤其是在移动设备上使用时，这真令人沮丧。