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

initial-rose

4/23/2023

Controlled sorting and filters?

Can someone help with that?

extended-salmon

4/21/2023

Managing react state on table cells and header

Hi team, I'm developing a server side render table with row selection. I have a problem, in my current page imagine I have 10 elements, so I have a button to select all rows in the table, this 10 and rest ones So when I try to use table getIsAllRowsSelected() method return true always when I select current page but this is not real because I have manual pagination and server side rendering for my data....

conscious-sapphire

4/21/2023

I'm getting this error while creating the column headers.

Uncaught Error: Columns require an id when using a non-string header I'm sure I'm doing something wrong, but not sure what. ```js const columns = React.useMemo<ColumnDef<Customer, any>[]>( () => [...

xenial-black

4/21/2023

How to add a custom class to a specific column header <th> tag?

I'm trying to add a class prop to a specific column header. ``` columnHelper.accessor((row) => row.id, { id: 'id',...

conscious-sapphire

4/20/2023

Adding a checkbox on each row

I am new to using this TanStack table. I want to add a checkbox to the beginning of each of my table rows. So I figured out how to display the checkbox in the first column like this: ```js columnHelper.display({ id: 'actions', header: 'Select',...

correct-apricot

4/20/2023

svelte table does not seem to be reactive when pulling data from query

Hi guys, I have the following code ``` import { getCoreRowModel, createSvelteTable, getSortedRowModel, type TableOptions, flexRender, type ColumnDef, type Table } from '@tanstack/svelte-table'; import { createQuery } from '@tanstack/svelte-query'; import { awaitTimeOut } from '$utils/awaitSleep';...

fascinating-indigo

4/19/2023

Row locking while sorting

Hello, I am struggling to found out if React Table v7 has a feature to lock certain rows if the user decides to sort them? For example if there's a table of fruits and if the user decides to sort them in any way, apples will always be locked in the top row....

inland-turquoise

4/17/2023

Svelte cell formatting

Hello, Using Svelte version of TanTable, I am struggling to format a cell with a background color that depends on the cell's value, like you can do with spreadsheets. I understand the need to define a cell() renderer for the specific column, but I am unclear on how to get it to work. In particular how and where to use flexRender()?...

conscious-sapphire

4/13/2023

Translate header using React and I18Next

I have a react app with i18next installed. I am using the @tanstack/react-table component. I am creating the columns in separation from the component itself in a utility file that exports the columns for this specific table ```typescript...

ratty-blush

4/11/2023

Merging cells inside columns

I am using “tanstack/react-table” v8 and my table is quite nested and sort of complicated. What I want is a expandable rows, with dynamic cell content, like a accordion. Somewhat like the one in the picture. I got the expandable logic working but I can’t find a way to style my column like that. How can I achieve such styling I tried merging cell but I couldn’t. Any help ?

national-gold

4/11/2023

Is there colSpan for rows?

want to conditional take the whole row between all rows which can be achieved by spanning col in row

metropolitan-bronze

4/11/2023

import { useReactTable } from '@tanstack/react-table'; causes error "module not found"

Our project is NOT in typescript but I thought I could still use the module(https://stackoverflow.com/questions/73885732/how-to-implement-react-table-without-typescript) so I did yarn add @tanstack/react-table, and I can see the module has been installed but when I try to import it I receive the above mentioned error. Did anyone else run into this and if so, how did you solve this?

quickest-silver

4/10/2023

React Table declaration failing to merge w/ pnpm

with the file tanstack-table.d.ts ```ts import '@tanstack/react-table';...

genetic-orange

4/10/2023

Multi-select column filters? Is it possible?

Currently filter value is a string of currently selected value. Is it possible for the value to be an array? And then the table would filter based on that array.

genetic-orange

4/10/2023

Infinite scroll table - how to filter by all values(not only for the current scroll page) ?

The table is very big (5k rows) so I want to use infinite scroll, but I also want to filter by all the table - user has to be able to see all filter values. Is it possible?...

flat-fuchsia

4/9/2023

Pagination - how to start pageIndex from 1 not 0?

My initalPagination is ```js const [{ pageIndex, pageSize }, setPagination] = React.useState<PaginationState>({ pageIndex: 1,...

eastern-cyan

4/6/2023

svelte

Is it possible to "bind" a property value when using the flexRender function? ``` { id: 'player_info_header',...

complex-teal

4/6/2023

Hide columns in mobile view

How do people here go about hiding columns based on viewport size? I display 6 cols in desktop view, and would like to shrink this down to 3 cols in mobile view. Have seen the Column Visibility React Example, but wondering about best practices around targeting specific viewport sizes. Appreciate any help or direction on this, thanks!...

ratty-blush

4/6/2023

Group Toggle children visibility

Hi Everyone, i need help are there any exaples on how to toggle visiblity on Header Groups, So my group have many children currently i can toggle each child but when i try to toggleVisbilityHandler on Group Parent it doesnt work

typical-coral

4/5/2023

Optimistic Update with React Query

Hi! I'm using React Query and React Table in the Next.js app and was wondering if there are examples of optimistic update to the table when sending mutation queries? e.g. each row has a toggle favorite button and I'd like to update the table data on mutation succcess....

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