Grid: colspan, rowspan support

What I want to achieve:

variant 1

Use separate grid per each header row with ScrollSync:

<Grid
  className={styles.HeaderGrid}
  columnWidth={columnWidth*3}
  columnsCount={columnsCount / 3}
  height={rowHeight}
  overscanColumnsCount={overscanColumnsCount}
  renderCell={this._renderSpannedHeaderCell}
  rowHeight={rowHeight}
  rowsCount={1}
  scrollLeft={scrollLeft}
  width={width}
/>
<Grid
  className={styles.HeaderGrid}
  columnWidth={columnWidth}
  columnsCount={columnsCount}
  height={rowHeight}
  overscanColumnsCount={overscanColumnsCount}
  renderCell={this._renderHeaderCell}
  rowHeight={rowHeight}
  rowsCount={1}
  scrollLeft={scrollLeft}
  width={width}
/>

variant 2

override cell width in rendered content and hide “unused” cells

<Grid
  className={styles.HeaderGrid}
  columnWidth={columnWidth}
  columnsCount={columnsCount}
  height={rowHeight*2}
  overscanColumnsCount={overscanColumnsCount}
  renderCell={this._renderHeaderCell}
  rowHeight={rowHeight}
  rowsCount={2}
  scrollLeft={scrollLeft}
  width={width}
/>
/* ... */
  _renderHeaderCell ({ columnIndex, rowIndex }) {
    if (rowIndex === 0) {
      return (columnIndex % 3 === 0) ? (
        <div className={styles.headerCell} style={{ width: 75*3 }}>
          {`C${columnIndex}-long-long-long`}
        </div>
      ) : (
        <div className={styles.headerCell} style={{ display: 'none' }} />
      )
    } else {
      return (
        <div className={styles.headerCell}>
          {`C${columnIndex}`}
        </div>
      )
    }
  }

variant 3 (not available currently)

But would be great to have colspan, rowspan support in grid to avoid extra hidden cells in DOM. Don’t sure in implementation but one possible is:

<Grid
  className={styles.HeaderGrid}
  columnWidth={columnWidth}
  columnsCount={columnsCount}
  height={rowHeight*2}
  overscanColumnsCount={overscanColumnsCount}
  renderCell={this._renderHeaderCell}
  rowHeight={rowHeight}
  rowsCount={2}
  scrollLeft={scrollLeft}
  width={width}
/>
/* ... */
  _renderHeaderCell ({ columnIndex, rowIndex, Grid__cell }) {
    if (rowIndex === 0) {
      return (
        <Grid__cell colspan={3}> { /* since colspan="3" _renderHeaderCell calls for R0,C1 and R0,C2 will be skipped */ }
          <div className={styles.headerCell}>
            {`C${columnIndex}-long-long-long`}
          </div>
        </Grid__cell>
      )
    } else {
      return (
        <div className={styles.headerCell}>
          {`C${columnIndex}`}
        </div>
      )
    }
  }

[pisharodySrikanth]

If any one is still interested in this. I have created a component with colspan and rowspan support with dynamic cell height.

https://github.com/pisharodySrikanth/virtualized-table

The component takes in data prop in a format similar to how we create the table in html. The dummy cells are hidden behind the rowspan div. This component has some caveats like the one mentioned by @pete-moss, border goes when the colspan / rowspan div is removed from the DOM. I handled this by showing border of the hidden dummy cells. This works because I don’t need to vertically center align by rowspan div and knew beforehand that the content of the rowspanned cell is relatively smaller.

Also, I have created a wrapper around cell measurer and I calculate the height of the cell with rowspan by using the sum of cache.rowHeight for the next rowSpan no.of rows.

https://github.com/pisharodySrikanth/virtualized-table/blob/master/src/js/components/VirtualizedTable/CellMeasureWrapper.js

[pete-moss]

@csvan @bvaughn I have made some progress with MultiGrid in trying to render grouped columns. The approach I started with follows some of the suggestions here:

1. Render “spanning” cells and modify their width to be the number of child columns spanned.
2. Render null for the other cell slots in a grouped column that are “underneath” the spanning cell.

It looked good until I started scrolling horizontally. I hit the same roadblock @csvan did. That is, when the spanning cell falls out of the viewport being rendered (because MultiGrid thinks it has a much smaller width), it disappears. Here are 2 screen shots which illustrate what I see. First is the non-scrolled picture which looks good: Then, if I scroll right a bit so that the leaf column Col 0 scrolls out of view, I see this: What tells me that my Group 0 spanning cell isn’t being rendered is that I don’t see the border anymore. This is confirmed by looking at the DOM.

I understand this behavior from the Grid’s POV, but at this moment I am scratching my head. I guess I will investigate @bvaughn 's suggestion of using cellRangeRenderer. Haven’t had any experience with that yet…