TanStack

T

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

genetic-orange
genetic-orange11/22/2022

Use expanded with both initialState and state

state: { expanded: {} } overrides initialState: { expanded: true }
sunny-green
sunny-green11/21/2022

Table with different columns in sub row

Hello everyone, is it possible to make such a version of the table using react-table? [React table v8] So that after clicking on the cell table, a table with additional information opens, with its own header and content that does not look like the main table...
No description
correct-apricot
correct-apricot11/18/2022

Additional keys in ColumnDef object

How to add additional key in ColumnDef object, I have been trying to go through meta property but didn't able to get any success so far any help would be great
vicious-gold
vicious-gold11/17/2022

[v8][react] Client-side column sorting across all pages (pagination & filtering also client-side)?

Hi, I have a TanStack v8 React table that's too large to fit on one page so I added pagination. But sorting a column only sorts the current page, not all the data. Client-side filtering (via text input search bar) on the other hand correctly filters across the data across all pages. How can I fix this? Thank you!...
rival-black
rival-black11/17/2022

Multiple column groups + toggle visibility

Hi 🙂 We are working on a big admin table. In the design we have some of the columns that have a toggle button in the headers which should show/hide 1-3 additional columns to the right of the clicked column. ...
causal-orange
causal-orange11/17/2022

2 buttons in a column

How do I do this?
rival-black
rival-black11/17/2022

Change default size in uncontrolled pagination

I'm following this example to add pagination to my table (Uncontrolled) - https://tanstack.com/table/v8/docs/examples/react/pagination How do I change the initial size, which is 10...
inland-turquoise
inland-turquoise11/17/2022

Svelte table cell formatting issue

Title + pic Did I miss something?...
No description
conscious-sapphire
conscious-sapphire11/16/2022

v7 to v8 useFlexlayout equivalent

Is there any equivalent for the useFlexlayout of the v7 of react-table?
foreign-sapphire
foreign-sapphire11/16/2022

react table v8 with javascript

Is there any javascript examples of react table v8?
fascinating-indigo
fascinating-indigo11/16/2022

Rerenders and fine grained updates using react-table with context

I use @tanstack/react-table and put the useReactTable table inside a react context. It seems like the table instance stays stable and hence stuff like table.getSelectedRowModel() does not rerender when used inside the subcomponent. I want that the getter functions from react-table will force the component to rerender when it consumes a getter function value that changes. One solution that I think can work is to create another some small context providers. They will hold react state and update it on changes - for example ```ts const [rowSelection, setRowSelection] = useState<RowSelectionState>({});...
eastern-cyan
eastern-cyan11/14/2022

Data is empty

Hey ! I'm trying out the v8 version. By copy pasting the react basic example and switching out the makeup data by data coming from a redux store, data is empty ```JS...
No description
fair-rose
fair-rose11/14/2022

Column definition without accessor

Hi. What is the best way to create a column for buttons, which don't need accessors using Column Definitions?...
xenophobic-harlequin
xenophobic-harlequin11/11/2022

Display only relevant data on nested table

Hey all. I have a scenario where in which I've created a table which will ideally be used for both the parent table and the nested table. They will ideally use the same data data?.records. Below I'm rendering just a single object of legs for all parents (test[2]), but I'd ideally want each parent to only display its relevant legs. The app looks like the following: ``` const test = data?.records?.map((leg) => leg?.legs); // Parent table...
abstract-brown
abstract-brown11/10/2022

Show loading hover table

Hi guys i added a div into table to show loading when the table is waiting of ajax resolve the promise, But I have an error of react "<div> cannot appear as a child of <table>" This is error because is a div inside of table instead <tr>, but i need to lock table while is loading, any idea?...
No description
extended-salmon
extended-salmon11/10/2022

Any guide or tutorial for learning how to use react-table v8?

Wanted to see if there were any tutorials for react-table v8 out there? I'm a bit overwhelmed going through it on my own.
like-gold
like-gold11/8/2022

Bug when column has a dot (.) in it

I run into an issue when my column has a dot . in it. the column id is automatically replace a . with a _. The problem is that when it try to access the data this column id won't work because of the mismatch in name. Wonder if this is a bug.
robust-apricot
robust-apricot11/8/2022

GlobalFilter when some columns has array of strings

Hello. I have a problem with filtering when some columns has array of strings, I'm using custom globalFilter function and row.getValue(columnId) but it just skips values that are arrays. How to implement to make it possible to search values in such cases? Thanks in advance
No description
genetic-orange
genetic-orange11/8/2022

Creating row above a specific row

I have a use case for which: 1- I want to create a row with demy data above or below a specific existing row dynamically. 2- I want to move a specific row above or below, not drag and drop because drag and drop is a mouse event. Are these possible?...
harsh-harlequin
harsh-harlequin11/7/2022

Row Pinning

Hi will there be support for rows-pinning in react table, since want to have pinned top and bottom rows returned from the rowCoreModel, which will be preserved during sorting / filtering etc. i.e they wont participate in sorting/ filtering. Since it is not implemented, is there a way to hook into react-table v8 plugin system and write a custom hook for the same....