如何在 react-virtualized 中绘制单元格之间的边界 Table

Question

我正在使用 react-virtualized 中的 Table 组件来呈现 1,000 行和 20 列的数据集。即使在阅读了 Table and Column 的文档并进行了一些实验之后，我仍无法在 Table 中的单元格之间绘制边界。来自 react-virtualized with borders include only Grid component, such as Grid and CellMeasurer.

的示例

它认为 Grid 与似乎使用 flexboxes 的 Table 有不同的单元实现？请注意，在下图中，Grid 中的单元格 "content" 占据了整个单元格，而在 Table 中仅占据了一部分。

Answer 1

Table 组件使用 flexbox 布局，因此您仍然可以使用 flex 样式实现您的目标。

例如，您可以指定 rowStyle={{alignItems: "stretch"}}，以便列填满行的整个高度。然后如果你想垂直居中列文本，你可以指定一个 Column prop style={{display: "flex", alignItems: "center"}}.

（当然也可以用CSS 类）

Answer 2

这应该或多或少能满足您的需求，尽管这可能不是正确的覆盖方式。我昨天才开始使用 react-virtualized，所以我还在玩弄东西。

@border: 1px solid #D3D3D3;

.column() {
    align-items: center;
    border-right: @border;
    display: flex;
    flex: 1;
    height: 100%;
    min-width: 0;

    &:last-child {
        border-right: none;
    }
}

/*** Overrides for react-virtualized styles ***/
.ReactVirtualized__Table__Grid {
    background-color: white;
    border-bottom: @border;
    border-right: @border;
}
.ReactVirtualized__Table__headerColumn {
    .column();
}
.ReactVirtualized__Table__headerRow {
    background-image: linear-gradient(#fff, #efefef);
    border: @border;
    padding-right: 0 !important;
}
.ReactVirtualized__Table__row {
    border-bottom: @border;
    border-left: @border;
}
.ReactVirtualized__Table__rowColumn {
    .column();
}

如何在 react-virtualized 中绘制单元格之间的边界 Table

How to draw borders between cells in react-virtualized Table

react-virtualized