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

correct-apricot

11/13/2024

Do you have a plan for making Table compatible with React Compiler ?

Hi ! I tried to use React Compiler with Tanstack Table and ran into some issues. There is already an issue about it (https://github.com/TanStack/table/issues/5567). Do you have a plan to make it work ? Are you already working on it ? Thank you for your replies....

wise-white

11/3/2024

Dynamic table with Shadcn + Tanstack Query + Tanstack Router

Hi everyone Anyone already did a dynamic table with Tanstack and Shadcn? I'm trying to build a hook to handle everything, filters, etc, but I'm facing some issues. ...

stormy-gold

11/1/2024

Using .setState(), .getState()

Can table.setState()/getState() be used with arbitrary values. I have a table cell that just shows a component which handles a calculation/formula from Query data. I need to be able to total the final results of those values for all selected rows. Ideally I'd like to just add this to row data, without precalculating it for the entire table. (Because reasons.) Instead, I'd rather the component be able to add it to the context of the row. So when I pass selected rows to the footer, it can just sum those up....

correct-apricot

10/31/2024

`aggregationFn` types in `aggregatedCell`

Should there be some type-inference between aggregationFn and aggregatedCell? I have a column with union type 'first' | 'second', and for example aggregationFn of unique shows it as "first,second". The return type of aggregatedCell.getValue() is still just the same union, but shouldn't it in theory be ('first' | 'second')[]? Same if I provide a custom aggregationFn that returns an array.

harsh-harlequin

10/28/2024

Table where rows are columns

Hi! I want to create a table to display an array of choices (each choice is an object following a data model: it has a title, a description, etc...), where the choices are the columns of the table and a column can be dynamically added each time a new choice is created. This seems to be incompatible with Tanstack Table where the objects have to be the rows of the table. Is there a way I can make it work?

eastern-cyan

10/24/2024

Render Facets using ColumnDef Renderers

Is it possible to render facet values gathered with column.getFacetedUniqueValues() using the columnDef cell renderer? Trying to avoid code duplication....

deep-jade

10/22/2024

Why use react-table?

I dont get it totally with react-table and querying data. React-tables power is dealing with data (sorting columns etc) that is bigger than like 1 page of data right? Then what is the benefits of using it if you only fetch one page at a time? A bit confused around fetching data sizes with react-query react-table etc Right now our database works with around 3000 rows in different tables. Its amazing to use react-query and react-table to sort/paginate etc. But its just a dream right?...

rival-black

10/18/2024

Filter grouped rows based on leaf counts

I'm struggling to filter grouped rows based on the group's leaf count. I'm not sure this can be done with tanstack-table. I've put together this silly codesandbox that shows the issue : https://codesandbox.io/p/devbox/wonderful-cohen-gdhgq8 The table is grouped on the "age" column, I'd like to hide all rows that have less than MIN_LEAVES persons (currently, 6) with a given age. ...

foreign-sapphire

10/17/2024

autoResetPageIndex with server-side pagination?

I read in the docs that autoResetPageIndex is set to false when using manualPagination, which makes sense. However, I still want to achieve the same behavior, i.e. I want the page index to reset when the filters change. I don't see this mentioned anywhere in the documentation or in the examples. Should I reset the page index as a side effect in onGlobalFilterChange and onColumnFiltersChange?...

continuing-cyan

10/16/2024

How to use TanStack Table with FormKit DnD for column reordering?

Hi everyone, I'm trying to implement column reordering in a table using TanStack Table along with the FormKit DnD library for drag-and-drop functionality in my project. The drag-and-drop isn't working because the structure I’ve built is incorrect. I’m struggling with how to properly integrate the two libraries. Could anyone help by providing a simple example of how this integration should look?...

vicious-gold

10/16/2024

Can I use wrapper functions to get column defs dynamically?

Hey there! I was currently building an app with tanstack table and shadcn. When fetching data from my page.tsx, I want that data to be passed dynamically to my columndefs ( in a separate file ). I want to use it for an action component. Please suggest a valid standard way to achieve this. Is using a wrapper function to get columns dynamically a suggested approach? Thanks in advance....

flat-fuchsia

10/15/2024

Dynamically hide columns based on width/resize

Hello, i have set columns. and i want to add responsiveness. how i want it to work is to hide the last column visible as the screen gets smaller, which would result in a table with 2-3 columns by the time it reaches mobile. is there any automatic way for me to do this?...

sensitive-blue

10/14/2024

Expanding same row.

I have a table in React Table defined like so: ```ts const table = useReactTable({ data: [ {...

realistic-cyan

10/13/2024

Computed Data doesn't update properly (Vue reactivity issue)

Hey again, I'm not sure if I'm doing something wrong but my data does not seem to update properly for some reason. Whenever I add or remove data from the array my computedData updates just fine (checked via Vue DevTools) but the table is only updated partially. ```ts // Precompute the netTotal and profit for each item in the data...

correct-apricot

10/12/2024

Infinite table height (Must be fixed, but how to deal with diff screen sizes?)

The table wrapper must have a fixed height when using infinite tables, right? (https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-infinite-scrolling) <div className="container"...

realistic-cyan

10/11/2024

How to make defaultColumn context aware and conditionally add functionality

Hey there, I'm writing an invoice app for video productions and for that I make extensive use of the TanStack table. As for the rows I have different item types like "title", "item", "subtotal", … and each type has it's own specialities and columns to it. The tricky part I'm challenged with is that most of the cells have one thing in common: They're inline editable. This I have implemented using the defaultColumn. What I'm struggling with is how to take this defaultColumn as a base and add features and such on top of it. To give you an example: A title item for instance does not need parameters like "quantity", "unit" or "price" but should be span across almost the entire row. In order to make that working I have to conditionally check for each column if the row type is an item or a title and also check if that type needs to have the current column with an editable input or if an empty cell should be returned. And depending on the type of column I need different input formatting. A title should have bold text, number fields should render differently and text-align on the right and if the input contains currency I want it to have two decimals and the currency added as well. This results in a lot of spaghetti code and endless if-else-conditions and I feel like there must be an easier way to solve this. So I'd be very happy if someone can push me into the right direction on how to make this more versatile and easier to manage....

relaxed-coral

10/8/2024

Tips on typing ColumnDef for a table with expandable rows

Hey folks - I'm currently implementing a table with expandable rows and looking to see if anyone has a decent pattern for typescript. Basically, my parent rows have a type of Parent and the child rows Parent['children'][number]. They will both display their name in the name column but each type uses a different key for that data. Also, most of the columns will be dedicated to child row data. Unfortunately, typing the columns like ColumnDef<Parent> results in TS assuming every row implements the Parent type. Does anyone have a good idea for this besides massaging the data and using a discriminated union?...

absent-sapphire

10/7/2024

Will invertSorting work for server-side sorting (manualSorting : true)

Will invertSorting work for server-side sorting (manualSorting : true)

conscious-sapphire

10/6/2024

Row Selection not reactive

Hi again I have tried following the row selection guide (https://tanstack.com/table/v8/docs/guide/row-selection), however I'm not able to get a simple checkbox to correctly work with the indications at the end of the guide. What should be the correct way to get reactive stores (or similar) using the alpha release?...

fair-rose

10/6/2024

Is there any theming or styling system to just plugin some existing styling?

Ideally looking for things to look nice using bootstrap without much manual styling required

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