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

like-gold

2/22/2023

Get previous rows and parent row from cell rendering

Hello, I would like to know if it was possible to get the previous rows from the CellContext (which expose cell's row) and also get it's parent if it has one Thanks!...

conscious-sapphire

2/21/2023

How can I access data without column?

I made simple example to help you understand my situation. There are 3 properties in data. ```ts {...

constant-blue

2/20/2023

Best Practices Tailwind CSS Mobile Responsive Tables

Hey everonye, I am trying to build a mobile responsive table and was wondering if there are any thoughts or best practices on how to build mobile friendly tables. I am having three ideas for now: 1) Tailwind media queries with hideen state. In the cell render function I will simply hide or display the cell rendering. E.g. since I am mapping I will hide all the columns, but the first one and push all values into a custom format that displays on mobile....

exotic-emerald

2/20/2023

How to add initialFilters that will not persist during re-renders?

Hey, I added some filters by passing the option to useTable but I want to clean up those filters when a button is clicked. However, button click re-renders the table and initial filters come back again. How can I make sure that initialFilters applies only in the first render?

stormy-gold

2/20/2023

How to keep specific rows at the bottom of the table, when sorting by column?

Hello. I couldn't find any information in the internet about creating custom sorting functions in react-table v7, so i will try to ask here. I have a lot of tables, and all of them are sortable by all columns. Almost all tables always have specific rows, that should be displayed at the bottom of the table, even when user decides to sort rows by sepcific column. How can i achieve this custom sorting? UseTable setup: `const table = useTable(...

funny-blue

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

fascinating-indigo

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

eastern-cyan

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

like-gold

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

conscious-sapphire

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

other-emerald

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

wise-white

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

vicious-gold

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

fascinating-indigo

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

graceful-beige

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

fascinating-indigo

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?

ratty-blush

2/13/2023

hello guys please see this question and help me

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

fair-rose

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

foreign-sapphire

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

vicious-gold

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

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