How to draw borders between cells in react-virtualized Table

Question

I am using Table component from react-virtualized to render a dataset of 1,000 rows and 20 columns. Even after reading documentation for Table and Column and after a few experiments, I am not able to draw borders between cells in my Table. Examples from react-virtualized with borders include only Grid component, such as Grid and CellMeasurer.

It think that Grid has a different implementation of cells than Table which appears to use flexboxes? Notice in the images below that a cell "content" in Grid occupies whole cell whereas in Table only a portion.

Answer 1

The Table component uses flexbox layout so you can still do what you're aiming for, using flex styles.

For example, you can specify a rowStyle={{alignItems: "stretch"}} so that the columns fill the full height of the row. Then if you want to vertically center column text, you can specify a Column prop style={{display: "flex", alignItems: "center"}}.

(The same can also be done with CSS classes of course.)

Answer 2

This should more or less get you what you need, although this may not be the correct way to override. I just started working with react-virtualized yesterday so I'm still toying around with things.

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