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

Question

我正在使用Table中的react-virtualized组件来呈现1,000行和20列的数据集。即使在阅读了Table和Column的文档之后，经过一些实验，我也无法在表格中的单元格之间绘制边框。 带有边框的react-virtualized示例仅包含Grid个组件，例如Grid和CellMeasurer。

它认为Grid具有与Table不同的单元格实现，它似乎使用了flexboxes？请注意下面的图片中的单元格＆＃34;内容＆＃34;在Grid中占据整个单元格而在Table中只占一部分。

Answer 1

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

例如，您可以指定rowStyle={{alignItems: "stretch"}}，以便列填充行的整个高度。然后，如果您想垂直居中列文字，可以指定Column道具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();
}