Is there a way to specify a "colspan"-like attribute for rows?

[cosminnicula]

Given this JSBin example http://goo.gl/TyxoBX, I want to specify a colspan-like attribute for the first row. Is there a way to do it?

[ehzhang]

@cosminnicula currently there isn't a way to specify a colspan-like attribute on the row level, but this may be a feature for a future release. Sorry :(

[bvaughn]

This would be very useful for headers of related columns.

[sorenhoyer]

This would indeed be VERY useful! :-)

[gregkaczan]

+1

[cosminnicula]

Trying to imagine a possible implementation for this feature. Let's start with the API:

FixedDataTableNew.react.js will have a new prop called colSpanGetter: PropTypes.func

The signature of the function will be: function colSpanGetter(rowIndex: number): Array<number> { ... }
The convention would be the following: if the function returns an empty array (default), then colSpanGetter is not taken into account; if the return value is an array which is not empty, then the cells will span accordingly.

Let's see below how the API could look like:

let dataSource = [{
  aa: "row0-col0",
  bb: "row0-col1",
  cc: "row0-col2",
  dd: "row0-col3",
  ee: "row0-col4",
  ff: "row0-col5",
  gg: "row0-col6"
}, {
  aa: "row1-col0-1",
  cc: "row1-col2-4",
  ff: "row2-col5-6"
}, {
  aa: "row2-col0",
  bb: "row2-col1",
  cc: "row2-col2",
  dd: "row2-col3",
  ee: "row2-col4",
  ff: "row2-col5",
  gg: "row2-col6"
}];

getCellData(rowIndex, colIndex) {

  let colNames = ['aa', 'bb', 'cc', 'dd', 'ee', 'ff'];

  return this.dataSource[props.rowIndex][colNames[colIndex]];
}

<Table colSpanGetter={rowIndex => { if (rowIndex === 1) return [2, 3, 2]}} ... />
  <Column cell={props => (<Cell {...props}>{getCellData(props.rowIndex, 0)}</Cell>)} ... />
  <Column cell={props => (<Cell {...props}>{getCellData(props.rowIndex, 1)}</Cell>)} ... />
  <Column cell={props => (<Cell {...props}>{getCellData(props.rowIndex, 2)}</Cell>)} ... />
  <Column cell={props => (<Cell {...props}>{getCellData(props.rowIndex, 3)}</Cell>)} ... />
  <Column cell={props => (<Cell {...props}>{getCellData(props.rowIndex, 4)}</Cell>)} ... />
  <Column cell={props => (<Cell {...props}>{getCellData(props.rowIndex, 5)}</Cell>)} ... />
  <Column cell={props => (<Cell {...props}>{getCellData(props.rowIndex, 6)}</Cell>)} ... />
<Table />

Also, let's see how the implementation could look like:

1. Inside the render() function of the FixedDataTableBufferedRows.react.js, the colSpan value could be extracted and passed down all the way to FixedDataTableCellGroup.react.js (going through FixedDataTableBufferedRows.react.js and FixedDataTableRow.react.js)
2. Inside the render() function of the FixedDataTableCellGroup.react.js, there will be an if statement that checks colSpan parameter:

if(props.colSpan.length === 0) {
  //keep the same logic as is
  for (var i = 0, j = columns.length; i < j; i++) {
    ...
  }
} else {
  let colSpanIndex = 0, cellIndex = 0, columnProps;

  //the number of rendered cells = the number of items inside the colSpan array
  for (var i = 0, j = props.colSpan.length; i < j; i++) {
    //cell_0, cell_2, cell_5
    key = 'cell_' + cellIndex;

    //columns[0], columns[2], columns[5]
    columnProps = columns[cellIndex].props;

    cells[i] = this._renderCell(
      columnProps,
      key,
      ...
    )

    //set the next index according to the colSpan value
    cellIndex += props.colSpan[colSpanIndex++];
  }
}

@ehzhang am I too far from what this should look like?

[wer]

+1

[Bazze]

+1. Did you ever give your implementation a try @cosminnicula? I will need to fork and implement this myself if no one have done this already.

[bvaughn]

Judging by the commit history, fixed-data-table seems to have been abandoned. (Last commit is over 5 months old.)

If anyone would be interested in adding col-span support to react-virtualized's FlexTable component though, chat with me on Gitter. :)

[Bazze]

@bvaughn I noticed that too, however, the FlexTable component lacks two features I require: fixed columns & colspans. I'm guessing that implementing colspan support in FixedDataTable will be faster, and time is of the essence for me at the moment :)

[bvaughn]

No worries! I would actually expect adding colspan support to FlexTable to be a pretty easy task, but I understand time constraints and fixed columns aren't a feature I have on my roadmap. :)

[cosminnicula]

@Bazze I gave up the idea since some other things got prioritized. Nevertheless, it would be interesting to see this feature in a future release of FixedDataTable

[jonecir]

So, any updates on DataTable colspan?

[kwent]

Bumping up this issue. It's been almost a year without any follow up.

[csillag]

It's been almost a year without any follow up.

See #468.

[jeffycai]

it's good

[krprashant94]

probably it may help you 👉 style={{flex: number}}>