Column grouping in current data-table

[sammykisina]

Hello guys.
How can I have column grouping in the current data-table? If anyone has an idea please help.

[kaiiiiiiiii]

By just implementing it?

https://tanstack.com/table/v8/docs/examples/react/column-groups

[sammykisina]

I had tried that sir before i asked and the columns did not match or go to their correct groups. I have also checked the utility classes on the styling, but the arrangement still looks wrong.

[anandagodini]

How did you got that more info at the top can send me the code

[AmGhGitHub]

I have faced the same issue and I thought it is a bug in shadcn ui. Turned out to be a bug in my implementation. Make sure you have adjusted the table definition and include the colSpan={header.colSpan} in TableHead definition

          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id} className="bg-zinc-300 text-black">
                {headerGroup.headers.map((header) => {
                  return (
                    // console.log(header),
                    <TableHead key={header.id} colSpan={header.colSpan}>
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </TableHead>
                  );
                })}
              </TableRow>
            ))}

[sammykisina]

Thanks. Worked perfectly

[myoaung99]

Thanks. You saved my time for debugging.