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

exotic-emerald

11/18/2024

next-intl and tanstack-table

Hello guys, I'm working on a project which uses the next-intl package and tanstack/table, I want to translate the column names but haven't found a way to do so. I cannot import getTranslations nor useTranslations since it's a hook and it's used on a top level. Can anyone look into this and give me directions or some help?...

flat-fuchsia

11/16/2024

Select all table rows with server side pagination

I have table that displays data that comes from an api using server side pagination. How do I mark all rows as selected when the user checks the 'select all' checkbox in header? Because currently, when the user clicks select all, the rows of the entire page are selected, but not from the entire table. I'm using react-table v7. Checkbox column: `{ id: "selection",...

eastern-cyan

11/14/2024

Placeholder column span

Hi, I have a question about placeholder headers. I have an array of ColumnDef, containing two simple accessor columns, followed by a group column. When rendering the first (top) header group, I get two "placeholder" headers (one for each ungrouped column), followed by the group header. I would like/expect to get a single placeholder header, with colSpan: 2 to span both of the ungrouped columns. I only want to render a single th element here, not two. Is this possible, without manually grouping the ungrouped columns?...

extended-salmon

11/14/2024

Accessor for a column which depends on a component

In our app we have a concept of a "run", and I need to sort a table column "duration". 1. If the run is finished, back-end returns createdAt and finishedAt for which an accessor function is easy to write: calculateDuration(finishedAt, createdAt). 2. The problem is, when the run is ongoing, finishedAt is undefined, and in the table cell, we use a React component which calculates currentTime inside a useEffect and shows the duration differently, using createdAt and currentTime. At no point is currentTime exposed outside this cell component....

extended-salmon

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

metropolitan-bronze

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

exotic-emerald

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

extended-salmon

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.

fair-rose

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?

robust-apricot

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

automatic-azure

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

vicious-gold

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

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

foreign-sapphire

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

rare-sapphire

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

xenial-black

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

firm-tan

10/14/2024

Expanding same row.

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

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

conscious-sapphire

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

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

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