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

unwilling-turquoise

6/3/2024

How can I filter data using date?

hello, so i've been having a hard time on how can I filter data using date, This is my data looks like ```...

flat-fuchsia

6/2/2024

Stop table header shifting ...

Hey all, I just wondered what strategies people were employing to stop table headers from shifting so much when loading in data ... I'd be curious to see what people are employing ...

wise-white

6/1/2024

Fetch next page

Hello, how to implement fetching data when trying to get next page?

genetic-orange

5/31/2024

How to create a filter that filters the data instead of column

Hello I'm trying to have a filter that will filter data and not by column. currently i have 2 filters, one is tied to the 'name' column while the other is tied to the dataset for the table....

flat-fuchsia

5/30/2024

Custom (reactive) row cell component

I was wondering if anyone had any specific examples of a particular column having a custom row cell element rendered for every value ... I have a value that is dynamically created and formatted (it's a sub grid of elements styled in a specific way that changes on every clock tick). I was wondering what solutions I could explore. 🤔

apparent-cyan

5/30/2024

Can't use useMutation with Table

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

genetic-orange

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

extended-salmon

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

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

extended-salmon

5/27/2024

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

yeah

modern-teal

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) => { ...

fascinating-indigo

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?

ambitious-aqua

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

metropolitan-bronze

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 ?

correct-apricot

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 .

unwilling-turquoise

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

other-emerald

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

apparent-cyan

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

wise-white

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

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