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

eastern-cyan

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

adverse-sapphire

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

exotic-emerald

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

quickest-silver

3/31/2023

Global filter

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

fair-rose

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

sunny-green

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

continuing-cyan

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

...

optimistic-gold

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

correct-apricot

3/27/2023

Dealing with key value pairs

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

fair-rose

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

ratty-blush

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

robust-apricot

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

extended-salmon

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?

adverse-sapphire

3/22/2023

Fix ts in custom getColumns function

Hello , why it heppends? and how it fix?

fair-rose

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.

vicious-gold

3/21/2023

Can't expand multiple sub component with a query

Hello! 👋 I would like to expends multiple sub component at the same time, but I use a query inside the sub component so when I expend two at the same time I got "Rendered mor hooks than during the previous render." error. See the screenshot for : Sub component / Table body / Query I use ...

optimistic-gold

3/20/2023

dynamic skeleton display on loading state

Hey guys, Does anyone have a workaround for a custom skeleton based on the content of the column? For example, I want to have an Avatar skeleton on the first column since it renders an Avatar component after a successful fetch and a single-line skeleton for the second column, etc. I have a very simple Skeleton component right now that renders the same skeleton for every column. Wondering if anyone has any ideas, please. I appreciate it. Thanks...

foreign-sapphire

3/19/2023

columnHelper in Svelte?

Looking at all the examples for Svelte I can't find one where it uses ColumnHelper, which is something afaik is the recommended way of defining columns for one's table. The question I got then is how exactly would you use ColumnHelper?...

foreign-sapphire

3/19/2023

could you suggest me about how to custom classname (css global)

I'm using @tanstack/react-table v8 and I custom my table wrapped by react-table v8 and if i want to custom className , style props in td how to implement this ps. I have attached a picture of my source code....

foreign-sapphire

3/19/2023

How to implement export buttons

I'm using @tanstack/react-table v8 for my Table component and I'd like to add export buttons for pdf, XLSX, and CSV. Kindly provide code snippets or links to helpful resources. Thanks....

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