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

sunny-green

10/18/2023

Svelte-Table Column Resizing

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

genetic-orange

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

other-emerald

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

rising-crimson

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?

foreign-sapphire

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

ambitious-aqua

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

metropolitan-bronze

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.

genetic-orange

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

flat-fuchsia

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

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

frozen-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({...

foreign-sapphire

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

extended-salmon

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

foreign-sapphire

10/2/2023

Column type

I have this function to define the columns of a table. ```typescript export const getAttendanceColumns = (data: AttendanceTableData) => { const columns: ColumnDef<data>[] = [];...

foreign-sapphire

10/2/2023

Column Type

I have this function to define the columns of a table. ```typescript export const getAttendanceColumns = (data: AttendanceTableData) => { const columns: ColumnDef<data>[] = [];...

equal-jade

10/1/2023

I have an app where I would like to stream Table data updates (add additional rows & update cells)

Displayed table data only updates when data changes reference. In other words, the table does not visually change despite table.options.data being reactive and up-to-date with changes. I've taken the Vue basic example and forked it to demonstrate periodically adding a new Person to the table data. https://codesandbox.io/p/sandbox/admiring-hypatia-hgsgwt ...

rising-crimson

9/30/2023

Using tanstack table for real time data

Hey guys I am about to start a project in electron js using react, most of my tables receive real data, I tried to implement a POC using documentation and well I saw that table rerender completly instead of only the cell or the row and perfomance is bad, so I have a couple of questions. Is tanstack table recommended for tables that use real time data? and if yes, does anyone knows a good example/documentation where I can start taking a look?

variable-lime

9/29/2023

Creating dynamic columns from API response

Hello! I have a problem that is driving me crazy and I wasn't able to find a solution in the docs. Let me explain it: An endpoint returns me an array of objects with the following shape:...

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