[8.0.0-beta.3] Grouping is not working when there is only one item in a group.

[heikkilamarko]

Describe the bug

Grouping is not working when there is only one item in a group. This crashes your app. Tried with React and Svelte.

Your minimal, reproducible example

See "Steps to reproduce"

Steps to reproduce

Modify the React Grouping example so that there are groups with only one item, and see the error in browser console.

Expected behavior

Grouping works correctly without crashing your app.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

mac

react-table version

8.0.0-beta.3

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[heikkilamarko]

It seems that 8.0.0-beta.4 didn't fix the problem. Still see the error:

The error happens inside the {:else} block when group contains only one item:

<tbody>
    {#each rows as row (row.id)}
        <tr>
            {#each row.getVisibleCells() as cell (cell.id)}
                <td>
                    {#if cell.getIsGrouped()}
                        <DomainGroupCell {row} {cell} />
                    {:else if cell.getIsAggregated()}
                        <!-- empty -->
                    {:else if cell.getIsPlaceholder()}
                        <!-- empty -->
                    {:else}
                        <div class="text-truncate px-2">
                            <svelte:component this={cell.renderCell()} />
                        </div>
                    {/if}
                </td>
            {/each}
        </tr>
    {/each}
</tbody>

[heikkilamarko]

If I change the {:else} block to render X it renders as follows:

{:else}
    <div class="text-truncate px-2">X</div>
{/if}

With groups containing more that one item, it renders as follows:

[heikkilamarko]

My current workaround:

{:else if !cell.id.startsWith('domain:')}
    <div class="text-truncate px-2">
        <svelte:component this={cell.renderCell()} />
    </div>
{/if}

[heikkilamarko]

Can reproduce this with 8.0.0-beta.6. Why was this issue closed?

Ping @tannerlinsley

[tannerlinsley]

As far as we tried, we couldn't reproduce. If you can, It'd really help to see a codesandbox (even better if it's in react) that shows this edge case.

[heikkilamarko]

Cannot reproduce exactly the same error with React, but the problem with cell rendering is visible:

Cornell group has 2 items and Janae 1. Aggregates (A) are not rendered for Janae similar to Cornell.

Codesandbox: https://codesandbox.io/s/optimistic-hill-92rkfm?file=/src/main.tsx

I guess the problems with Svelte adapter are related to this.

[heikkilamarko]

Tried v8.0.0-beta.8 and cannot reproduce the problem anymore. Seems to be fixed. Thanks!

[tannerlinsley]

Huzzah!

[LuisBarroso37]

@heikkilamarko I seem to be having the same issue as you. I am using the latest version of @tanstack/svelte-table v8.5.22 and the same error occurs.

The error seems to be coming from here:

{:else if cell.getIsAggregated()}
    <!-- If the cell is aggregated, use the Aggregated renderer for cell -->
    <svelte:component
        this={flexRender(
            cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,
            cell.getContext()
        )}
    />
{:else if !cell.getIsPlaceholder()}

[LuisBarroso37]

@tannerlinsley

It appears that the issue comes exactly from this part of the code:

{:else if cell.getIsAggregated()}
    <!-- If the cell is aggregated, use the Aggregated renderer for cell -->
    <svelte:component
        this={flexRender(
                cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,
            cell.getContext()
        )}
    />

If I add aggregatedCell: () => '' to the columns that do not have any aggregation, then the table works as expected.

{
            header: 'Name',
            enableGrouping: false,
            enableSorting: false,
            columns: [
                {
                    accessorKey: 'firstName',
                    header: 'First Name',
                    cell: (info) => info.getValue(),
                    aggregatedCell: () => ''
                },

With @tanstack/react-table, this issue does not exist. If I leave out aggregatedCell: () => '' in the columns that do not have any aggregation, the table still works as expected.

Note: It seems like the median aggregation function does not work properly.