nuxt / nuxt/ui

Table: Expose column resize handlers to support column resizing

Open
#6,715 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Package

v4.x

Description

The Table component forwards TanStack Table column options such as enableResizing, but there is currently no way to actually resize columns.

According to the TanStack Table documentation, enabling column resizing also requires wiring header.getResizeHandler() (or an equivalent API) to a resize handle in the UI.

At the moment, the Table component doesn't expose any way to access the resize handler or render a resize handle, so setting enableResizing: true has no visible effect.

Expected behavior

It should be possible to use TanStack's built-in column resizing through the Nuxt UI Table component, either by:

  • Exposing header.getResizeHandler()
  • Providing a resize handle in the default header implementation
Current behavior

enableResizing: true is accepted in the column definition, but columns cannot actually be resized because the required resize handler isn't accessible.

Additional context

TanStack Table already provides column resizing support:
https://tanstack.com/table/latest/docs/guide/column-sizing

The missing part is exposing the resize handler in the Nuxt UI Table component.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in the Nuxt UI Table component implementation and compare its header rendering and exposed APIs with TanStack Table's column-sizing documentation. Determine whether the handler should be exposed or rendered as a default resize handle, then verify that enabling column resizing allows columns to be resized through the component.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.