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

robust-apricot

1/15/2025

Where has Tables been in my dev life? Love it! Couple of questions.

I've got a little dev playground and I have a table with sorting, filtering, and basic pagination working (in just a couple of hours from cratch!). For pagination, I have it doing this (first screenshot from tanstack.com). But what I want the pagination to do is the second screenshot (row or page buttons). I know how to make the buttons look like how I want, what I don't know is how to get Tables to dynamically generate the buttons, and a ... button indicating the pages that aren't shows.

ambitious-aqua

1/14/2025

lit table data not reactive

I'm trying to set up a table using the lit adapter with my data stored as a nanostore atom. In my console.log output, I can see that my lit element's render function is being called when the nanostore that contains the data updates, and that the render function does in fact see the updated values for the data. However, the table continues to dispaly the initial values.
I tried, as part of debugging, using the vanilla js createTable function from @tanstack/table-core with as close to the same options as I could (that function seems to require a few things be present in the options that the lit controller doesn't?). When I run the table this way, the data is reactive, but the table is not (clicking headers does not resort the data).
I'm having trouble figuring out what I might be doing wrong, and would appreciate any pointers on how to debug this. ...

fascinating-indigo

1/13/2025

How to change order pinned columns ?

How to change order pinned columns ? https://github.com/TanStack/table/issues/4362...

fascinating-indigo

1/13/2025

Empty getRowModel() rows despite having data

Hi I've been using the tanstack table but I did a lot of server side pagination, filtering, and sorting. I have a boolean field called hidden and I do filter these on the backend. It's all working with the api and I can see that the data is passed on to the DataTable. The getRowModel() function returns empty rows still, wondering if I am missing something or did some weird config. Here is the sample of my implementation: ``` let tableConfig: TableOptions<DataWithOnClick<TData>> = { data, columns,...

adverse-sapphire

1/13/2025

Show pivoted column value on child rows - table v6

Hi everyone, Is there a way to show the pivoted column value on the child rows? Already tried Cell and Pivot props with no luck. ...

like-gold

1/10/2025

Is it possible to sort data in each group?

Hi all, is it possible to sort data without changing the order of grouping data? In the video, I group data by last name. If I sort by age, the order of grouped lastname is changed. Can I prevent that? Or is there any way to implement the sorting for each group only?

genetic-orange

1/9/2025

Suspense within table

I want to wrap <tbody> with suspense. But I couldn't find a suitable way of setting the data from a component with use(promise) below that suspense. Any ideas?

deep-jade

1/9/2025

No editable table (and others) example for svelte

There seem to be no svelte specific example for an editable table (and other features) that are present in the react examples , see https://tanstack.com/table/latest/docs/framework/svelte/examples/editable-data and https://github.com/TanStack/table/tree/main/examples/svelte ...

deep-jade

1/7/2025

Table scrolling

I have a flex layout with several columns. The last column is the tanstack table and the table itself has a huge width. Though, the parent div has the appropiated remaining width of the screen. From what I understand that's the reason, why column pinning does not work. Same is true for sticky headers. I think the parent div does the scrolling and not the table itself....

foreign-sapphire

1/6/2025

How to type Columns when they are defined with createColumnHelper()?

When using createColumnHelper, it seems impossible to pass these columns to another component while keeping type-safety. Using ColumnDef does not work. Is there any solutions to this issue? I'm pretty sure a lot of other people are in the same boat. Ditching the column helper solves this, but we have already commited to it, and it gives benefits. Thanks!...

environmental-rose

1/4/2025

Using TanStack tables in Astro

I'm new to TanStack. I'm looking into a tool to display a dataset as a list (not a table, just a <ul>). 1. Is TanStack dependant on a UI framework like React? Or can it be used in a vanilla js/ts project? 2. Do I need to initially display my entire dataset on a page before TanStack initializes and adds the pagination?...

useful-bronze

12/27/2024

Can't use filtering with value 1 (number), works for other numbers.

Hi, I have problem that I have column where I have two values: 1 or 2. This data is coming from some server. When I write column?.setFilterValue([2]) everything works perfectly, but when I set the value to [1], which exists of course, nothing is changed, both rows with 1 and 2 are being shown. What is wrong?...

fascinating-indigo

12/27/2024

how to correctly add additional parameters for a column?

it's okey?

correct-apricot

12/24/2024

US partner wanted for a profitable venture

I’m working on an exciting business idea and need a partner to help bring it to life. Here's what you can expect: -A comfortable fixed monthly salary with a light and manageable workload. -No financial investment or technical expertise required—just your willingness to collaborate....

genetic-orange

12/19/2024

Using aggregations without grouping? / How to display a unique count cell in the footer ?

Basically I just want to define an aggregationFn like "uniqueCount" for each column and display that number in the footer of the table? Can that be done or the aggregations are meant just to be used when grouping columns together.

foreign-sapphire

12/19/2024

Update Column Definition Dynamically

I need to be able to update the column definition dynamically. My use case for this is to enable sorting on a column when a useEffect hook fires in my react component. Is there a way to do this easily with tanstack table library?

fascinating-indigo

12/16/2024

fully controlled table component that uses react-table.

I created a Generic table component that uses react-table under the hood and takes data as props and builds an editable table that allows users to edit cells and it launches an onChange event on the table component. problem is, because new data prop keeps updating and everything is being rerendered, the performance is pretty bad. that made me think if there is a way to make a fully controlled table component for forms and such?...

rival-black

12/11/2024

Possible to update state via functionalUpdate by passing in updater manually?

I have a state like this. ```js // Model pageTokens: Record<number, string | undefined>;...

sharp-indigo

12/11/2024

React memo with Row selection

Hi folks, I need your help with memorization cells. I've wrapped cell with React.memo to prevent re-rendering on every render. ```cell: memo(({ row }) => ( <div className="flex items-center"> <Checkbox...

conscious-sapphire

12/9/2024

Horizontal Scroll

Hi - is there a way to make a horizontal scrollbar for the table visible at all times, and show immediately below the table (rather than relying on the horizontal scroll being at the bottom of the browser?)

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