Skip to content

Conversation

@gigor
Copy link
Contributor

@gigor gigor commented Apr 17, 2025

πŸ”— Linked issue

Related to #3296

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

Currently it is possible to create multi-level table headers, but colspan is not applied to th elements. This functionality is implemented in tanstack table and relies on it's internal mechanics.

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Apr 17, 2025

npm i https://pkg.pr.new/@nuxt/ui@3926

commit: 807c177

@benjamincanac
Copy link
Member

Can't we handle colspan and rowspan on th and td at the same time?

@gigor
Copy link
Contributor Author

gigor commented Apr 21, 2025

There is a well established tanstack way to work with grouped columns in thead and we just don't pass the attribute to table header. AFAIK, rowspan and colspan in tbody are supposed to be done via cell meta, but documentation there is confusing and I am not sure what is the right way.

This fix makes the following column definition work:

const columns = [
    {
        header: 'Asset',
        columns: [
            {
                header: 'Symbol',
                accessorKey: 'asset.code'
            },
            {
                header: 'Name',
                accessorKey: 'asset.name'
            },
        ]
    },
    {
        header: 'Strategy',
        columns: [
            {
                header: 'PCT',
                accessorKey: 'strategy.accountPct',
            },
            {
                header: 'Goal',
                accessorKey: 'strategy.goal',
            }
        ]
    }
];

Copy link
Member

Should we unlink the #1651 issue then?

@gigor
Copy link
Contributor Author

gigor commented Apr 21, 2025

you are right, it should not be there

@benjamincanac
Copy link
Member

You've also marked #3296 as resolved which doesn't seem to be the case.

@benjamincanac benjamincanac changed the title fix: passes colspan to th in UTable fix(Table): pass header colspan to th Apr 21, 2025
@benjamincanac benjamincanac merged commit 122e8ac into nuxt:v3 Apr 22, 2025
5 checks passed
@benjamincanac benjamincanac added the v3 #1289 label Apr 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v3 #1289

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants