Combine ColumnGroup s with regular columns

[barriber]

Is their way to combine ColumnGroup s with regular columns?

When i'm trying to do so, it removes the ColumnGroup header

[KamranAsif]

This isn't something we current support; but it's on our roadmap to support

[Dangoo]

Hi there!

I am currently working on a pull request for that trying to solve the following issues:

• Topic of this issues: mixed <Columns>/<ColumnGroups>
• Missing width calculation of nested ColumnGroups

The main issue here is that the FixedDataTableWidthHelper tries to differ between cols and groups but than combines them into an array allColumns and treats all descendants equally. But only <Column>s have a width property containing a valid value.

Anything I should keep in mind?

Cheers!

[wcjordan]

Hey @Dangoo thanks for diving into this. One thing to note, is this logic is moved around a bit in our beta branch. If you're thinking you'll do this work over the next couple weeks or month, it's probably still work looking at master, but keep that in mind and please upmerge your solution into the beta branch.

On the beta branch you may want to look at convertColumnElementsToData.

Regardless of the data backend, the larger issue is probably with the renderer. Right now the header and group header are 2 independent rows, so you won't be able to do a clean column group mixture like the image below without some fancy CSS.

[Dangoo]

Hey @wcjordan thanks for the hint!

main focus was on getting the width calculation to work recursively today, flex stuff to come next. After preparing the size preconditions I'll dive in the renderer, lets see how this is going to work out… 🤠

What is already working is the usage of mixed Columns and <ColumnsGroups> (regardless of some duplicated headers. 👉🏻 rendering)

(Any idea why the Col1 label isn't centered correctly?)

JSX:

<Table
    rowHeight={50}
    rowsCount={rows.length}
    width={980}
    height={300}
    groupHeaderHeight={50}
    headerHeight={50}
>
    <ColumnGroup
        header={({height, ...props}) => <Cell>Col 1</Cell>}
        fixed
    >
        <ColumnGroup
            header={<Cell>Col 1.1</Cell>}
            fixed
        >
            <Column
                header={<Cell>Col 1.1.1</Cell>}
                cell={({ rowIndex, ...props }) => (
                    <Cell {...props}>
                        Data for column 1.1.1: {rows[rowIndex][0]}
                    </Cell>
                )}
                width={200}
            />
            <Column
                header={<Cell>Col 1.1.2</Cell>}
                cell={({ rowIndex, ...props }) => (
                    <Cell {...props}>
                        Data for column 1.1.2: {rows[rowIndex][1]}
                    </Cell>
                )}
                width={100}
            />
        </ColumnGroup>
        <ColumnGroup
            header={<Cell>Col 1.2</Cell>}
            fixed
        >
            <Column
                header={<Cell>Col 1.2.1</Cell>}
                cell={({ rowIndex, ...props }) => (
                    <Cell {...props}>
                        Data for column 1.2.1: {rows[rowIndex][2]}
                    </Cell>
                )}
                width={200}
            />
            <Column
                header={<Cell>Col 1.2.2</Cell>}
                cell={({ rowIndex, ...props }) => (
                    <Cell {...props}>
                        Data for column 1.2.2: {rows[rowIndex][3]}
                    </Cell>
                )}
                width={100}
            />
        </ColumnGroup>
    </ColumnGroup>
    <ColumnGroup
        header={<Cell>Foo</Cell>}
    >
        <Column
            header={<Cell>Col 3</Cell>}
            cell={({ rowIndex, ...props }) => (
                <Cell {...props}>
                    Data for column 3: {rows[rowIndex][4]}
                </Cell>
            )}
            width={200}
        />
    </ColumnGroup>
    <Column
        header={<Cell>Col 4</Cell>}
        cell={({ rowIndex, ...props }) => (
            <Cell {...props}>
                Data for column 4: {rows[rowIndex][5]}
            </Cell>
        )}
        width={200}
    />
</Table>

[Dangoo]

Possible duplicate with #27