Footers displayed even when not in column definition with column group

[bastiengrignon]

When using column grouping to have one header that take fullWidth of my table and all other columns below, but adding this header also add a footer below the table, thise footer is rendered but with empty element as you can see in the following example

I'd like to know if there is a way to not display theses footers ?

[bastiengrignon]

This seems to be an issue as this is also present in an example of tanstack v8 : https://tanstack.com/table/v8/docs/examples/react/column-groups

[rajagopalstalwart]

@bastiengrignon this code is working, check here

{table.getFooterGroups().map((footerGroup, index) => ( {console.log("index111", index)} {index === 0 && footerGroup.headers.map((header) => ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.footer, header.getContext() )} ))} ))}

[xicrow]

This is still relevant, and kinda annoying :P

You don't even need to use grouping, just take the basic example from the documentation, and remove the footers:
https://tanstack.com/table/latest/docs/framework/react/examples/basic

Will still render a row for the footer with empty cells :/

[BrendanC23]

I'm running into the same issue. Here's a fix, though it isn't very elegant. This determines whether any of the columns actually have a footer. If not, you can return early from the component.

const footers = table
    .getFooterGroups()
    .map((group) => group.headers.map((header) => header.column.columnDef.footer))
    .flat()
    .filter(Boolean);

if (footers.length === 0) return;

// Render footer as normal

[farhan-hafizh]

hello, can you really provide me how exactly do you render the footer? @BrendanC23

[BrendanC23]

Take a look at this example from the TanStack Table docs. If none of the columns have a footer, you can return early to avoid rendering an empty footer.

function Footer(table) {
    const footers = table
        .getFooterGroups()
        .map((group) => group.headers.map((header) => header.column.columnDef.footer))
        .flat()
        .filter(Boolean);

    if (footers.length === 0) return;

    return (
        <tfoot>
            {table.getFooterGroups().map((footerGroup) => (
                <tr key={footerGroup.id}>
                    {footerGroup.headers.map((header) => (
                        <th key={header.id}>
                            {header.isPlaceholder
                                ? null
                                : flexRender(header.column.columnDef.footer, header.getContext())}
                        </th>
                    ))}
                </tr>
            ))}
        </tfoot>
    );
}