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

narrow-beige

10/24/2023

How to make one of the column not sortable?

I want to make column on the left ("#") is not sortable, how to do it?

future-harlequin

10/21/2023

How to filter table based on query params

Hi everyone, I'm having a difficult time trying to filter a table based on a filters query parameter and am wondering if anyone has done this before? My thinking here is that the filters will be passed in as props to my table component and it will filter automatically. There may be instances where the table will need to be filtered by one than one filter too. I'm not even sure if this is possible or if there is a better way to do this, any advice would be appreciated. Thanks 🙂...

helpful-purple

10/19/2023

React - How to Access Original Flat Row Data When Self-Managing Row Selection State

I have a table component where I have both the hook and the JSX to render the table. However, I want to be able to manage the row selection state outside of this component and have it in a parent component. I want to manage the state in a parent component so I can access the data of the selected rows, specifically the original row data for the selected rows in the parent component. In the code below, I pass in getter and setter of the row selection state (rowSelection and setRowSelection) to my Table component. When I access the rowSelection state in the parent component after I select the first row I get this: {0: true} . This isn't helpful to me. I want to be able to access the original data for that row. I understand that from the table hook instances I can use getSelectedRowModel().flatRows to access the original data, but as I said before, I want to be able to access this data from a parent component, not in my table component where my table hook is currently....

unwilling-turquoise

10/18/2023

Set column filter state in the url

Hello guys, just trying to get the column filter state to and from the url. Is there a way to do this without state syncing a useState hook? Anytime I try to pass the url params as the state when using useReactTable I get an infinite loop. Also I have used zod to validate the URL params but even when I don’t use zod and i just cast them I get the same issue. I don’t think that’s the problem. ...

continuing-cyan

10/18/2023

get enableRowSelection

Is there a way from the table object to get whether enableRowSelection was set to true or false?

national-gold

10/18/2023

Svelte-Table Column Resizing

I would appreciate if someone could steer me in the right direction.

graceful-blue

10/17/2023

Is there a way to apply offset to pagination ?

Hey ! 🙂 I am currently working on an app where the back-end have pagination starting at pageIndex=1 but tanstack-table starts with pageIndex=0. It creates few issues when trying to access last page. I am wondering if there is a way to deal with that ?...

national-gold

10/17/2023

how to sort columns in a table so undefined vals are always on bottom regardless of sort direction?

Anybody got a good solution for this? Thanks!...

xenial-black

10/16/2023

Filter out a row

I want to filter out (hide/not show) a specific row in table based on a specific condition - one of the cells in the row matches a specific pattern. How can I do that?

inland-turquoise

10/15/2023

Filtering column outside of table

I am so lost with the TanStack documentation on filtering, it's is utterly confusing and I want to do something that is other wise incredibly simple. Out side my table I have a checkbox. Assumer there's a boolean state [checked, setChecked]. When it's checked, the table should filter out any rows with row.original.status === 'completed'. Simple? I cannot for the life of mew figure out how to do this. Any help and example would be appreciated 🙏🏼...

fascinating-indigo

10/11/2023

Svelte Tanstack Virtual ctx[34] is undefined

When I try to use the proper length of the rows, it breaks table and gives ctx[34] error is undefined. projectTotalRows does contain a value. Verified through console logging and even an if statement for it existing. This works ```typescript $: visualizer = parentElement...

yappiest-sapphire

10/10/2023

Can I import a CSV File or do I need to convert it completely to dict?

I want to import a CSV file into a table, and the CSV might be several GB large so converting to dict may take a while. I think virtualized would be good to use too? Using Tauri with Next.js if that's helpful.

graceful-blue

10/10/2023

How can I hide column based on a specific breakpoint ?

Hey, I want to hide columns based on some breakpoint. What are the best practices to implement such feature ? I see few potential way of implementation: ```tsx...

ratty-blush

10/10/2023

Unable to get globalFilter to work

Hello everybody, I'm trying to add a globalFilter on my react table ("@tanstack/react-table": "^8.10.6"), but it seems impossible to do something, the filter does not seem to apply If anyone has any suggestions or solutions, I'd greatly appreciate it. Thank you ! Here is my code, I'm not using TypeScript...

message.txt

conscious-sapphire

10/9/2023

Include hidden data id in table data

I am trying to figure out how to include a hidden data id in my table data. I'm thinking it would be a seperate column. The reason being is that I want to check that value on each row and if it equals a passed in state id, highlight the row.

conscious-sapphire

10/4/2023

How to lift up 'toggleAllRowsSelected' to a parent component?

I have a table build with react-table with row selection enabled. So the user can check a box on each row to select that row. Now I have some buttons above the table to do things with selected rows like archive or delete. When those options are clicked, I want to deselect all the rows. However, those buttons are in a component above the table. I've only seen ways to call 'toggleAllRowsSelected' from the component with the table.

like-gold

10/4/2023

onStateChange is not getting called

Hello, I'm unable to listen to table state chnage. ```js const [state, setState] = useState<any>() console.log(state) const table = useReactTable({...

ratty-blush

10/3/2023

Types Playground

I would appreciate any help to fix the type issues in these files: utils/table-columns.tsx hook/useTaskVerses.tsx components/table.tsx pages/attendance...

conscious-sapphire

10/3/2023

If I make the row clickable then buttons in the cells stop working

I have an expandable row that I would like to expand when I click on the row. I tried doing this through onClick in the row (<tr>) and it works as expected, however, the buttons and checkboxs within the row now do not work. I tried changing the z-index and I also tried event.stopPropagation() on the onClick handler, but none seem to work. Any ideas?...

blank-aquamarine

10/2/2023

Reusable cell renderer without 'any' type

Hello, I was unable to find any post or issue on this, but probably I was searching for the wrong keywords, as I can't believe, that anyone else had this problem :D I have a function for rendering dates into a readable format in cells, like this:...

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