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

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

vicious-gold

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

rising-crimson

4/6/2023

svelte

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

tame-yellow

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

deep-jade

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

conscious-sapphire

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

correct-apricot

4/4/2023

tanstack-table row selection/row virtualized: How do I maintain the selection with a column filter?

I'm following this example: https://tanstack.com/table/v8/docs/examples/react/row-selection However, when I try to filter a column, the state of the row selection is not maintained, but in the example it is. So what would maintain the row selection when filtered?...

optimistic-gold

4/3/2023

Recommended approach to setting `<td className={classes}>`?

I'm surprised to see that there is no utility for setting styles/classes on cells. What is the recommended way to do this? This is the api i was expecting: ```jsx const columnHelper = createColumnHelper<Person>() ...

like-gold

3/31/2023

Global filter

why does it not enter the fuzzy filter method or why doesnt it filter??

quickest-silver

3/31/2023

Migrating from bootstrap table 2 to react-table

I have a data fetch api with sorting, filters and pagination parameters. I am trying to migrate from bootstrap table 2 to tanstack react table. It seems I have to use oncolumnfilterschange and onsortingchange etc... Is there any examples like my case? my code got ugly eg) async (updater) => { await setColumnFilters(updater) } to get newer values to table object....

adverse-sapphire

3/29/2023

getRowModel() is undefined

Hello, could anyone help me figure out, why I keep getting getRowModel() is undefined Although it is supposed to work, it works in codeSandbox same code....

inc-lavender

3/27/2023

Getting this error while using latest `svelte-check`

Using svelte-check@^2 I'm not getting this error but upgrading to svelte-check@^3 I started to get this error. There is no issue on dev/preview/live env is only for types and check. How can this be fixed?

Argument of type '{ render: (props?: {} | undefined, { $$slots, context }?: { $$slots?: {} | undefined; context?: Map<any, any> | undefined; } | undefined) => { html: any; css: { code: string; map: any; }; head: string; }; $$render: (result: any, props: any, bindings: any, slots: any, context: any) => any; } | (new (options: any) => ...' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent | null | undefined'.
  Type '{ render: (props?: {} | undefined, { $$slots, context }?: { $$slots?: {} | undefined; context?: Map<any, any> | undefined; } | undefined) => { html: any; css: { code: string; map: any; }; head: string; }; $$render: (result: any, props: any, bindings: any, slots: any, context: any) => any; }' is not assignable to type 'ConstructorOfATypedSvelteComponent'.

Argument of type '{ render: (props?: {} | undefined, { $$slots, context }?: { $$slots?: {} | undefined; context?: Map<any, any> | undefined; } | undefined) => { html: any; css: { code: string; map: any; }; head: string; }; $$render: (result: any, props: any, bindings: any, slots: any, context: any) => any; } | (new (options: any) => ...' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent | null | undefined'.
  Type '{ render: (props?: {} | undefined, { $$slots, context }?: { $$slots?: {} | undefined; context?: Map<any, any> | undefined; } | undefined) => { html: any; css: { code: string; map: any; }; head: string; }; $$render: (result: any, props: any, bindings: any, slots: any, context: any) => any; }' is not assignable to type 'ConstructorOfATypedSvelteComponent'.

...

extended-salmon

3/27/2023

global filter, expand matching items subrows

hey guys, does anyone have any approach for the global filter to expand the sub-rows if there is any match? this one searches only the parent and it does not expand the child preferably v8...

continuing-cyan

3/27/2023

Dealing with key value pairs

Say I have a type ``` type Stats = { max: {...

fascinating-indigo

3/24/2023

Resuable editable table using react table, I found a codesandbox but it is using old verison

https://codesandbox.io/s/editable-react-table-gchwp?fontsize=14&hidenavigation=1&theme=dark&file=/src/Cell.js This is a codesandbox...

unwilling-turquoise

3/23/2023

Custom column width for each column

Hello everyone! I would like to know how can i define a different width for each column as default. I know the default is 150px and i can only change the size for all columns at once, during the headers map. I tried to do it dynamically using the column ID, but it doesnt work, it keeps changing the size of all columns....

genetic-orange

3/23/2023

Dynamically update column header based on filtered data

I would like to know if it's possible to dynamically update a column header based on the current filtering applied to the table data. Here's an example to illustrate my use case: Let's say I have a column header called "Items" and there are 10 rows in the table, each containing the data "1" in each row for that column. If I apply a filter to the table so that it displays only 3 rows with 1 item each, I would like the header for that column to be updated to "Items (3)" to reflect the current number of displayed items....

foreign-sapphire

3/22/2023

Vertical table, switching between rows<->columns?

Is it possible to render the table with Headers on left-most column, and rows being vertical rather than horizontal?

gradual-turquoise

3/22/2023

Fix ts in custom getColumns function

Hello , why it heppends? and how it fix?

rare-sapphire

3/21/2023

Infinite Renders in Vue

Due to Vue's ref's it seems that the only way to dynamically pass data to useVueTable is if I define getters, which can be annoying due to extra lines. However, it seems that if anything happens inside these getters the entire page freezes.

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