具有垂直和水平滚动的 Ant Design Table

Question

我正在使用 Ant Design Table 来显示来自公司内部 API 的动态数据。

这意味着我不知道我会收到什么样的数据来填充每个单元格。它可以是大文本、数字、空值、短字符串、图像、url 等。

我需要应用水平和垂直滚动，但如 Ant Design 文档中所述：

如果标题和单元格没有正确对齐，请指定列的宽度。（至少保留一列没有宽度以适应流体布局）建议使用固定值大于 scroll.x 的表格宽度。未固定列的总和不应大于 scroll.x。

现在，宽度很好，Ant Design Table 可以计算出每列的最佳比例。见下图：

问题是当我设置 y 滚动时。下面举个例子：

这里的主要问题是我不知道每列的数据大小。说到列，我必须从表源中提取键才能动态生成列。

是否有可能绕过这种行为？

谢谢！

Answer 1

请参阅@Afaq 所附问题中的此评论。

对于遇到此问题的任何人，请为每列设置宽度，并在表格中添加以下代码：scroll={{ x: "max-content" }}。这将自动调整您的列宽。

这应该可以解决大多数人的问题。

Answer 2

所以这是 Ant Design 的一个已知问题，请查看这里、这里、这里和这里

没有正确的解决方法，我遇到了同样的问题，我尝试设置每列的宽度，在列中设置“宽度”属性有效，但它因粘性标题而中断。

解决此问题的另一种简单方法是使用水平滚动并像这样删除垂直滚动

scroll={{ x: 400 }}

Answer 3

我想出了一个解决我的问题的方法。为了根据列的宽度设置整个表格的宽度，我必须遍历所有表格数据，根据其内容的长度计算每个单元格的宽度。

之后，我可以对总宽度求和并将其设置到表格中。

这是使用这种方法的示例：