TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

optimistic-gold

7/26/2023

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....

xenial-black

7/26/2023

Using @tanstack/react-table with @tanstack/react-virtual

Hello. There is an example (https://tanstack.com/table/v8/docs/examples/react/virtualized-rows) of using react-virtual on your site. Can you make a sample usage with your new version of the library - @tanstack/react-virtual ?...

other-emerald

7/24/2023

When does the _valuesCache under row object are updated?

I have an issue with this cached values. The row.original is being updated but the _valuesCache still with the old values which makes the getValue function to always retrieve the cell old value. I've made a custom cell edit and when the save button is clicked, it sends the new data to an API and then useTable data is updated with the request response. As I said before, the row.original is being updated properly, but the _valuesCache still with the old values. Is there a way to force this cache to be updated?...

ratty-blush

7/24/2023

Detached column filters.

Hi everyone, I want to create a detached from the table multi-select column filter for my table. I am trying to create a generic usable table, on top of the table I need to have a bar with a search bar (already implemented) and next to it I want to be able to choose which columns will render a dropdown with all the faceted values for the user to choose from. So atm reading the docs, I have it that under each header I can have the dropdown, The question is how can I move it away from the header, and just attach it to that column and of course get the column's values to populate the dropdown. ...

like-gold

7/22/2023

Single row selection not working

I've been trying to implement single row selection using the v8 of the table, but I'm unable to do so. I'm using radio buttons which ideally should allow me to select a single row, but I'm able to select to multiple rows. I've tried various solutions but none of them seem to work. Can someone please help me with it ```tsx...

magic-amber

7/21/2023

ReactTable size independent of split-pane Pane parent size; how to fix?

Hello. I have a ReactTable inside a Pane (from react-split-pane), and want to get the resulting table to conform to the size of the Pane that it is nested in. I've noticed that although it's possible to override the table's height with an absolute value, overriding with a percentage doesn't seem to work. Is there some quirk I am missing?

foreign-sapphire

7/19/2023

Svelte selection

I have a config with, following an example of react in Svelte ```ts const defaultColumns: ColumnDef<MedicationRow>[] = [ {...

xenophobic-harlequin

7/17/2023

How to get all unique values of a given columnId?

Hi all, I'm building my own filters to be something like the following where the dropdown is supposed to show all unique values: ...

adverse-sapphire

7/17/2023

How to stop table overflow on mobile

I am using Table after going setting it up from shadcn and it works beautifully on all screen sizes except mobile where there seems to be a really weird issue with overflow scroll on the screen. I do have 2 screenshots but I will only share them if it is okay to do so after reading the guidelines. Also not wanting to post a big wall of code either unless someone is happy to debug it with me and then I can share more details 🙂 Sadly, the code is within a private repo and I do not know how to set it up correctly within a code sandbox....

adverse-sapphire

7/13/2023

(V8) Triggering a, per row, function from one column to another.

I'm not sure if this is possible but lets say I have a two column table. 1) An action column where I want to trigger a function e.g. 'rename' on a input field. 2) An input component, which changes from a span to an input box....

continuing-cyan

7/12/2023

Sorting middleware

Hi! I would like to call a middleware before (if it would be after, I could probably use the onSortingChange property exposed by the API) the sorting function (I only use the built-in ones) are called in a table. What would be the easieast way to do so?

genetic-orange

7/11/2023

Example how to virtualize columns?

There is an example in the docs about how to virtualize a table's rows. Is there an example how to do that with columns? Row example: https://tanstack.com/table/v8/docs/examples/react/virtualized-rows...

national-gold

7/9/2023

Sort by datetime

I have columns that are being sorted using this how can i make a column sort by date time instead of if the field is true or not https://github.com/shadcn/ui/blob/main/apps/www/app/examples/tasks/components/data-table-column-header.tsx https://github.com/shadcn/ui/blob/main/apps/www/app/examples/tasks/components/data-table.tsx https://github.com/shadcn/ui/blob/main/apps/www/app/examples/tasks/components/columns.tsx...

other-emerald

7/7/2023

default UI?

Is there some default UI or component library I can use for a table? I do not want to build the entire UI from scratch so hoping there’s some template I can use

sharp-indigo

7/7/2023

How to render default filters outside of the table in v8

In table v7 I used following code to render filters defined in columns outside of table headers: {headerGroup.headers.map((column) => ( column.enableFilter && ( <div className="col-md-2" key={column.id}> <div>...

afraid-scarlet

7/7/2023

How to get selected rows data outside Table component?

Hi, I'm having trouble with getting selected rows data outside Table component: My table component looks like on the image. Do you have any idea how to access it in parent component ? Thank you for attention.

absent-sapphire

7/6/2023

How to interpret the sizing options

Hi all, I'm looking at how to set sizing of columns. Somehow I feel that the minSize, maxSize and size all basically do the same thing, it just finds the lowest value of all 3 and then ignores all the rest. Reason I'm thinking this is after looking at the source code:...

stormy-gold

7/6/2023

Can someone explain why getSortedRowModel() is firing over and over again?

I have a table with data on it in my electron app, but for some reason as soon as I add getSortedRowModel to my useReactTable, my console shows that the table is firing getSortedRowModel() over and over again, making it impossible to actually do anything and causing a memory leak. my useReactTable(): ```typescript...

eastern-cyan

7/5/2023

Can table be used for building product lists with filters and sort?

I wamt to build a product list with advanced filtering and sorting. Is table component can be used for such a thing with similar ui like this?

equal-aqua

7/5/2023

Default sorting icon

How do I set a default sorting icon? I've seen some ppl suggest using canSort in an operation but it doesn't seem to exist in v8? I'm using the default sorting code w/ bootstrap icons ```...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs