TanStack

T

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

absent-sapphire
absent-sapphire6/19/2023

Struggle to build filter outside the table with setFilter.

I am trying to hook up a few selects outside the table and when I try to pass the table to my component, the table itself doesn't have setFilter on it. I am referencing some examples like: https://codesandbox.io/s/react-table-filter-outside-table-bor4f?file=/package.json:296-307 and https://github.com/TanStack/table/discussions/2181 but I am struggling to make it work... "@tanstack/react-table": "^8.5.11" this is the version that I am on. Any tips are appreciated....
fair-rose
fair-rose6/19/2023

How to add unit text to the end of a cell that is a number, while not having that text affect filter

Lets say I have a table with fields name age and weight. I would like to add years and lbs to the end of the age and weight fields respectfully, but I don't want the text to affect the sort and filter functionality I have in react tables. So both sort and filter should essentially only be looking at the numbers not the appended text.
harsh-harlequin
harsh-harlequin6/18/2023

ReactTable Pivot

It's possible on react table to have pivot data view? Or what do you guys use for pivot data? Thank you.
vicious-gold
vicious-gold6/16/2023

I cannot use @tanstack/react-table in NextJS 13

Hello! I cannot use @tanstack/react-table in NextJS 13. I get this error; ``` ./node_modules/.pnpm/@tanstack+react-table@8.9.0_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-table/build/lib/index.mjs...
provincial-silver
provincial-silver6/16/2023

Vue Tanstack Table help with sorting

Is there someone who could help me with Vue tanstack table since documentation is lacking Vue examples... I want to have my own sorting - sending query parameters to backend fetch function. How can I achieve that this is my current implementation
harsh-harlequin
harsh-harlequin6/16/2023

Keeping table settings between page navigation/sessions

Hey all. I’ve put together a Table component with React using this library. It lets the user reorder columns, show/hide columns, pin, sort etc. As per the examples, I initialise the state in the (generic) table component and pass it in to the useReactTable hook. However, I want a users preferences (e.g. their column order, or what is pinned or visible) to be kept when they navigate to a different page and back again, or even between sessions. I know I’ll need to use something like redux for the former and local storage for the latter, but does anyone have any advice/suggestions on implementing this as I’m not exactly sure how to?...
like-gold
like-gold6/15/2023

Custom way to hide column, is it a bad practice ?

Hello everyone, I have an accessor cell that display multiple content, it must display within the cell a name, email, an organisation type(enum) and badge that inform confirmed account or not (boolean) ...
continuing-cyan
continuing-cyan6/13/2023

De-select all will unselect disabled rows

So here's a bit of an issue. I'm wondering if there's a way to get around this. I have a conditional row selection enabled. The condition is that if one of the attributes of the row is present, it will disable the row. The user experience is something like this. The first step is to check off entries of the table. Then they batch them all together into one state, and after they're batched they can no longer be de-selected. What it ends up looking like is this:...
No description
typical-coral
typical-coral6/13/2023

sorting

I have a table and i request a data from parent component. I request 10 items, and then use pagination to request more 10 in another page. How can i create a sort, that i send to backend a queryParams, with table headers title and a boolean with true = asc and false = desc with react-table?...
grumpy-cyan
grumpy-cyan6/13/2023

setPageIndex() works on button event but doesn't work in useEffect

it only updates and rerenders the table if I wrap setPageIndex with a setTimeout.
stormy-gold
stormy-gold6/13/2023

filter rows based on the row.original?

Is there a built-in way to filter the rows based on a value not visible in the table? My rows have a revokedAt column which isn't part of the columns, but i want to be able to toggle whether i show them or not. I did it the react way like this but it feels very hacky, is there a built in for this?' afternote: this breaks a lot of other stuff so feels way wrong...
conscious-sapphire
conscious-sapphire6/12/2023

how does `sortUndefined` work?

I have columns with sortUndefined: 1 and I expected it to always sort undefineds to the bottom regardless of sort order, instead it sorts it as if undefined is the maximum value. So, when the sort is reversed it's at the top of the list.
deep-jade
deep-jade6/11/2023

Accessing nested values

Is there a way to access nested data from a object within table v8? The data I am accessing is within an array and is an object itself. An example similar to this would be: {...
frozen-sapphire
frozen-sapphire6/9/2023

How to set initial page size

Hellow, I'm trying to set initial page size to differnent value than 10. If i'd try to do table.setPagesize(5) returning component it rerenders too many timez, can I put it somehow in the useReactTable object?...
helpful-purple
helpful-purple6/8/2023

Defining columns inside function components

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md when I am trying to define my column array inside a function component, whereas in the examples the columns are defined inside the function component, https://codesandbox.io/s/gallant-austin-kn24pq?file=/src/main.tsx:701-723...
foreign-sapphire
foreign-sapphire6/7/2023

How can I add a boolean checkbox that corresponds to react query data in a react table column?

I have a react table mapped to an array of objects that contains a boolean field, I want to be able to toggle that field within a react table column. What's the best way to approach this? I also want to add a handler to the checkbox if possible.
harsh-harlequin
harsh-harlequin6/7/2023

React Context Menu

Does anyone have any good resources for creating context menus on right-click? I couldn’t see anything like this covered in the docs for tanstack table
absent-sapphire
absent-sapphire6/7/2023

vue table

Hi , in vue i am getting prop.renderValue is not a function , what might be the case
extended-salmon
extended-salmon6/7/2023

Display Cell Metadata

Hi, I am trying to add some metadata to individual cells that can be displayed e.g. in a Popup. Think of a Popup that gives the user information of the source of this particular data point. I was wondering, how/where I could store and access such metadata to individual cells. The documentation does not make this obvious... Thanks in advance!...
distinguished-scarlet
distinguished-scarlet6/5/2023

Render partial change (Solidjs)

Is it possible to use Store (createStore) as the source of data and reactively track the partial changes? I did not find a way to make it work. There are samples only with createSignal. In this case, rendering happens only when you replace the whole table data. Thanks....