Multiple colspan

[alessandro308]

The idea is to give the possibility to achieve this result:

Month	Savings
January	$100
February	$80
Sum: $180

I want to open a discussion about the possibility to have multiple colspan columns.

I actually achieved editing the useBlockLayout adding a logic to consider the widget of the next columns too

  hooks.getCellProps.push((props, { instance, cell, userProps }) => {

        let columnWidth;

        if (typeof userProps.colSpan === 'number') {
            columnWidth = calculateColumnWidth({
                colSpan: userProps.colSpan,
                cell,
                columns: instance.columns,
            });
        } else {
            columnWidth = cell.column.totalWidth;
        }
        return [
            props,
            {
                style: {
                    ...cellStyles,
                    width: `${columnWidth}px`,
                },
            },
        ];
    });

with calculateColumnWidth similar to

export const calculateColumnWidth = ({colSpan, cell, columns}) => {

    if (colSpan === 0) {
        return 0;
    } else {
        const currentCellWidth = cell.column.totalWidth;
        let res = currentCellWidth;


          let remainingColSpan = colSpan - 1;
          let colIndex = 1 + columns.findIndex((column) => column.id === cell.column.id);

          while (remainingColSpan > 0 && colIndex < columns.length) {

              res += columns[colIndex].totalWidth;

              remainingColSpan--;
              colIndex++;
          }


        return res;
    }
};

and then using it in the render assigning to each cell the expected value:

{...cell.getCellProps({ colSpan: 5 })}

What do you think? Can be useful to include it in the useBlockLayout? In case I can prepare a PR

[rimzzlabs]

Hi
Is there any update, are this implemented yet at the current version? 🤔

[alessandro308]

We are using the code described above in production. So feel free to implement a similar solution if you need

[tochukwu19]

Does this work in react-table V8? Please