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

national-gold

5/30/2024

Can't use useMutation with Table

```ts const { mutate } = useMutation() const columnHelper = createColumnHelper<SurveyWithAuthor>(); const defaultColumns = [ columnHelper.display({...

helpful-purple

5/28/2024

Table header shifting

Hello, im making an expandable table that has a custom model. though everytime i expand the table headers shift. Trough testing i see that its to the custom expand component. TableBody: <TableBody> {table.getRowModel().rows?.length ? (...

like-gold

5/28/2024

Dynamic formatting of table rows

I'm trying to create a dynamic table row which wraps content and changes the shape of the row as a result. I've created an example of this using Tailwindcss and a regular html table here: https://play.tailwindcss.com/FUf0HYAUiS...

absent-sapphire

5/27/2024

React Search Params - Page Index

Hi there, what is the proper way to keep the current page index inside the url? I've tried some things using searchParams and managing the pagination state myself, but it does not seam to work.

quickest-silver

5/27/2024

any way to load this from a cdn and use it in vanilla?

yeah

adverse-sapphire

5/27/2024

In a table with inputs as cell, how to render only concerned rows instead of the entire table ?

When i change the value inside of a cell, the entire table gets rendered. How can i render only the row concerned by the change ? ```JavaScript const InviteUsersTable = ({data, removeInvite, handleRoleChange, handleEmailChange}: Props) => { ...

yappiest-sapphire

5/27/2024

How to configure a column to only be as wide as it's content?

Does anyone know if there's a way to force the first column (the one with the checkbox) to only be as wide as said checkbox?

fascinating-indigo

5/24/2024

Control accessor dynamic based on changing react state?

Is it possible for the value shown in a column to be dynamic based on react state? I have a user controllable filter and I want to pull different values from my row based on what is selected. Tried this but didn't work. It works on load but not when the state changes. buyOrRent is a useState variable. ``` columnHelper.accessor((row) => { return row.price[buyOrRent].max;...

compatible-crimson

5/23/2024

Pass globally available data to table

Hello. I want pass some data not to data prop. And make it available to every row. Like when you declare Columns, u can invoke Header, Cell, which has access to table argument, which had rows, columns, etc. I wanna put my data there, do I need to make it explicitly by myself or there are predefined methods and so on? What are best practices ?

equal-jade

5/23/2024

data showing when running local not when deployed

hi guys can anyone help me with my tanstack table , it only shows checkbox when hosted but when i run it locally it shows all the data .

fascinating-indigo

5/23/2024

Why my Status filter is not clickable?

Hello, so i'm trying to follow the shadcn/tutorial about the task. https://ui.shadcn.com/examples/tasks, but I get an error wherein when I tried to do the filter thing like this . it's unclickable I even tried to clone the whole repo, but i get the same problem https://stackoverflow.com/questions/78520533/why-is-my-filter-status-unclickable-following-shadcn-ui...

sensitive-blue

5/21/2024

How does tanstack table table handle huge loads of data

Hi, I am using tanstack table to render a list of invoices that I fetch from the backend using tanstack query in my nextjs 14 app router app. I am fetch over 10,000 records and are well paginated. I need some clarity on how tanstack table actually works under the hood. Does it fetch all the 10,000 records before the table component is rendered or it renders as long as the first page (of 10 rows is ready)?...

fascinating-indigo

5/20/2024

Nested SubRows Error for Table-Expanded

I am developing a table with expandable sub-rows to display 'option' questions. When I click 'Expand' on a row, the index numbers of the sub-rows are displayed correctly, but the optional questions associated with each index are not being rendered. Here is a replicated example of my problem using sample data. Upon clicking 'Expand', the indices are shown, but the corresponding questions do not appear. https://codesandbox.io/p/sandbox/data-table-expand-nz5ndg?file=%2Fsrc%2Fcolumn.tsx%3A32%2C32...

national-gold

5/20/2024

Filter table

const table = useReactTable({ columns: defaultColumns, data: projects?.filter(p=> p.archived && showArchived || !p.archived), getCoreRowModel: getCoreRowModel() })

const table = useReactTable({ columns: defaultColumns, data: projects?.filter(p=> p.archived && showArchived || !p.archived), getCoreRowModel: getCoreRowModel() })

This code whenever I change showArchived breaks the website, before I used React Table all worked properly, what is the right way to handle this?...

conscious-sapphire

5/20/2024

Input loosing focus after table rerender

How to keep focus on input when table (columns) rerenders? Tried key on input, but it is not working... https://github.com/TanStack/table/discussions/5572...

other-emerald

5/18/2024

Group by row using shadcn tanstack table

I couldn't find any good docs or example to build this kind of table, can anyone please help me

stormy-gold

5/17/2024

import {useAsyncDebounce} from '@tanstack/react-table' not exported from node modules

I just upgraded to verion 8 from version 7, we were current using useAsyncDebounce in our filter section. In version 8 it seems that it doesn't have this function in the nodeModules/@tanstack/react-table/index.tsx. Was this upgraded to something else or do we need to make a custom function to debounce?

unwilling-turquoise

5/16/2024

Connect parts of table state to redux state

Hi, I want to connect e.g. the columnVisibiliyState to my redux state. The "problem" is the onChange functions, that are typed as OnChangeFn<VisibilityState>. I understand that this is basically the same as the useState's setState function. But i cannot figure out how to replicate this function when using a redux store. Currently I have it like this, but I do not really like the solution much: ``` // column visibility...

ambitious-aqua

5/15/2024

defaultColumn not seeing state changes

I'm defining a column renderer using defaultColumn, it works great. I have some state containing an array of selected rows (selectedRows), and I want to display an <input> if the cell being rendered is in a row within selectedRows. However, when selectedRows changes, the cells are not updating as they should. I think this might be due to defaultColumn being memoised internally (https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table.ts#L411), but I'm not 100% sure. ...

other-emerald

5/14/2024

How do I get all rows value including the paginated one

```typescript const orderFrom = table.getRowModel().rows?.length ? table.getRowModel().rows.map((row: any) => ({ value: row.original.orderFrom.country, label: row.original.orderFrom.country,...

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