passive-yellow

Failing to make Tanstack Table Columns Resizable

Hi, I am using Tanstack Table v8 + ShadCN UI to create a data table. I am trying to make columns resizable but failing to achieve that. I am new to tanstack table, so any pointers on what I am missing will really be appreciated. I have tried to follow the sample code for column resizing but it does not work as expected. My Code is in the "data-table" branch of this repo: https://github.com/tanushm31/test-ui-nextjs/tree/data-table P.S. Not posting any code snippets following the community guidelines. But let me know if I need to add some screenshots.

GitHub

GitHub - tanushm31/test-ui-nextjs at data-table

Contribute to tanushm31/test-ui-nextjs development by creating an account on GitHub.

6 Replies

correct-apricot•3y ago

Have you checked this out, it might be a good starting point https://codesandbox.io/p/sandbox/github/tanstack/table/tree/main/examples/react/column-sizing?embed=1&file=%2Fsrc%2Fmain.tsx%3A116%2C5-116%2C21

tanstack-table-example-column-sizing

Synced template from GitHub @tanstack/table at /examples/react/column-sizing

passive-yellowOP•3y ago

Hi @AlexMachin1997 , yes I have tried to implement the same concept. But apparently its not working as expected. I think I am missing something, just can't pinpoint exactly what

national-gold•3y ago

It comes up a lot and is 100% in this discord server if you do a search. You'll need to use the getSize() method. https://tanstack.com/table/v8/docs/api/features/column-sizing#getsize something like this on your <Th>: width: header.getSize(), and something like this on your <Td>: width: cell.column.getSize() Sorry, misread the original message. The resize handler is what you need. Absolutely position a div or block element at the end of your <th>, like the following:

<Box
                  {...{
                    onMouseDown: header.getResizeHandler(),
                    onTouchStart: header.getResizeHandler(),
                    className: `resizer ${
                      header.column.getIsResizing() ? 'isResizing' : ''
                    }`,
                  }}
                >

<Box
                  {...{
                    onMouseDown: header.getResizeHandler(),
                    onTouchStart: header.getResizeHandler(),
                    className: `resizer ${
                      header.column.getIsResizing() ? 'isResizing' : ''
                    }`,
                  }}
                >

Hope this helps.

genetic-orange•3y ago

Do you know, how to make last column has full width of the table? With resize mode it works incorrectly, I tried this example with table width:100%. https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/full-width-resizable-table

tanstack-table-example-full-width-resizable-table

Synced template from GitHub @tanstack/table at /examples/react/full-width-resizable-table

genetic-orange•3y ago

In v7 there was width parameter which could take "auto" value by default

constant-blue•3y ago

The only way I found was to name a certain pixel value "auto" and translate that into auto in the CSS. You cannot provide out of range or undefined/null values, those will be all be min/maxed into the range or default to 150px.

Gaming

Programming

Failing to make Tanstack Table Columns Resizable

Did you find this page helpful?