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

2/18/2023

Reset Columns to default

I have a table which enables a user to manually select and deselect columns. I want a way to reset the columns to their default. Is there a way to do that? I found that hard and complex to do in pure logic....

ambitious-aqua

2/17/2023

useRowState equivalent on V8?

Hi everyone! I was wondering if there’s any equivalent to useRowState on v8? I’d like to keep row-specific state contained on each row. On v7 we could use useRowState which was super handy in that way....

deep-jade

2/17/2023

How to properly use columnOrder in the useTable hook

Hi, I'm trying to set the columnOrder in the useTable hook according to this info from the docs: *Table Options...

foreign-sapphire

2/16/2023

How select row with no children?

Hi all. Please tell me. The table is selectable and expandable. How to use row.getToggleRowSelectedProps().onChange or row.toggleRowSelected() and at the same time select only the parent line without the children?...

correct-apricot

2/16/2023

CRUD layout like this example for chakra-ui?

Im looking to prevent reinvent the wheel. IS there some example CRUD implementation like the one in my screenshot for Tanstack table? Using chakra-ui. It would be nice if this is somehere opensourced so the community can contribute to it instead of having to re-invent the wheel ( crud )...

vicious-gold

2/16/2023

Pass column ID as a type

I want to have a defaultSortBy prop that let's me pass in a column ID but I can't get it to work properly. I tried this Extract<ColumnDef<MyType, any>[], string>; but it just returns undefined

stormy-gold

2/16/2023

Only return filterFn for columns where I provide a filterFn in the columns definition

Is there a way to only show filters for the columns where I provide a filterFn

extended-salmon

2/15/2023

losing focus on rerender

How do I prevent this? https://github.com/TanStack/table/issues/1346 I read these issues and the solutions don't work for me It's important to point out that this only happens if I call setSomeZustandState(value), if I call it with null, I keep the focus ...

dependent-tan

2/14/2023

Creating specific data-testids for buttons that render in one column of the table

Hello! I am trying to test the table I created in react with jest and react testing library, and one of the columns for the table renders a button that will navigate to a specific page depending on the row that the button is located. The buttons for this column are all named "Edit" and so I can't use getByText(), and for some reason the button doesn't show up when I do getByRole(). I noticed that each id of the buttons have unique names (i.e row#_edit) and so I would like to test it through that but couldn't find any way to do so with jest/react testing library - so I'd like to see if I could create a data-testid that will also be uniquely named similarly to the id. Thank you very much !...

extended-salmon

2/13/2023

Setting Context for Nested Components

Hello! I have a table context related question. Nested inside of my column definition, I have a dropdown menu consisting of three options. I'm wanting to maintain the state / context of that dropdown select menu during pagination rerendering. It doesn't seem like there is any way to set the context for those cells individually. The context is set when the table is created with default values, but I am unsure how to update its persistent state afterwards. I've created a high order component,...

conscious-sapphire

2/13/2023

Build creating pages with nullish coalesing even though Typescript target is ES6

I'm using @tanstack/react-table in my project, and found that between 8.5.11 and 8.5.15, whenever I call next build I seem to still get nullish coalescence in the build, even though the build target in tsconfig.json is ES6. This is something I want to avoid as I have to target Chrome 68 for an application iframe. Is there a reason that the project targets ES2020 instead of ES6?

sensitive-blue

2/13/2023

hello guys please see this question and help me

https://stackoverflow.com/q/75435639/16852814

genetic-orange

2/13/2023

How do I hide a column by default setting in v8?

I would like to provide a list with columns that are hidden by default, unless enabled, in v8. There is a const [columnVisibility, setColumnVisibility] = React.useState({}) but I do not know if I can add stuff in here to make it hide certain columns or perhaps in the columnHelper.accessor...

stormy-gold

2/10/2023

How can I get "selectedflatrows" from SubComponent Table

I am rendering Sub Components instead of subRows because of different headers. Now I want to get the details of SelectedFlatRows of the main Table + SubComponent Table. I have to do it manually or Is there any prop that can handle. Any help will be highly appreciated...

secure-lavender

2/10/2023

Initial data refresh

I have [“todos”] and [“todo”, id] [“todo”, id] initialData = function: cache [“todos”].findById(id) When I update [“todos”] with updated todo, [“todo”, id] is not updating until I update [“todo”, id] with todo data....

xenial-black

2/10/2023

Column Display Accessor for Vue 3 (TS and Options API)

Hello, I am trying to use Tan Stack tables with Vue 3 with Typescript and Options API. I can not seem to figure out the display column accessor for an actions column where I need to add a button with a pencil icon, that can redirect page to an edit page for a given row. I can not insert html elements as `cell: <button>Click here</button>. while defining the columns.

extended-salmon

2/7/2023

Table not updating when column def changes

We have a v8 table which displays a list of objects and the name of the user who created said object. The users are kept separately from the objects and in the accessorFn we find the correct user in the array and display their name. The issue we're having is that the users array isn't populated the first render, and the table is not updated on subsequent renders. Is this new behaviour in v8? This works fine in our v7 tables. Is the recommended approach to make sure all data required is sent in as "data" instead? EDIT: After some more debugging I found that "cell" will update the table, but not accessorFn...

wise-white

2/7/2023

Select All + Infinite Scrolling

Hello! I'm trying to create a table which has inifinite scrolling (with virtualized rows) and selections state. I've got it mostly working by combining the infinite scrolloing and row selection examples however the 'select all' checkbox will only select the rows currently loaded. I would like to select all possible rows (including ones which are not yet loaded) I am able to load an ID for every possible row which can eventually be loaded which should be enough to store the selection state but I'm wondering if anyone has any ideas for how best to approach this?...

equal-aqua

2/4/2023

How to apply enableSortingRemoval = false to only 1 column?

This property is a table wide property, applying to all columns. I would like it to only apply to specified columns in the Column Defs. Is that possible?

rival-black

2/3/2023

What is the "size"'s unit?

In the docs https://tanstack.com/table/v8/docs/api/features/column-sizing, I'm not sure what the numbers are supposed to mean?

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