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

other-emerald

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>[] = [];...

other-emerald

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>[] = [];...

national-gold

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

unwilling-turquoise

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?

sensitive-blue

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

quickest-silver

9/29/2023

Filter table by more than one column

Hi everyone, I'm looking to filter an existing table by more than one column. At the moment I have the following Input component that filters the table by the UPN column: ``` <Input placeholder='Filter by UPN'...

fascinating-indigo

9/29/2023

Default filterFn

How can I avoid having to specify "filterFn: customTextFilter" on each column, I want it on all columns that have "showFilter: true" ?

extended-salmon

9/26/2023

Can't I use the column Dnd (drag and drop) feature in vue3?

In react, there are examples that utilize the react-dnd library to provide this functionality; is it not available in vue3?

metropolitan-bronze

9/26/2023

Table Sorting not working if the table body cell has different icons

Is there any way to sort icons in react-table. I'm kinda stuck that if the table has different icons and I wanna sort icons just like we sort text. In the following code I've icons in column 3.

`const Row = (allTopic || []).map((topic) => { return { id: topic?.id,...

like-gold

9/25/2023

React table filtering

Hi im using "react-table": "^7.8.0" with global filtering, how can i apply a custom filter that will treat dots and commas as the same ? Also how can i do this if i have a filter on all of my columns ? '''' function GlobalFilter({ preGlobalFilteredRows,...

other-emerald

9/25/2023

Attendance table PROBLEMS

Hi everyone, I have attendance data that looks like this (in the image), I want to create an attendance table on the front-end, do you think it's better to make the date of the attendance as a header or the student name. if I choose the attendance date as a header that means that everyday the columns will increase one, and if I choose to make the student name as a header that means that I want a table that looks like this below, and I don't know how to implement it. name | name2 | name3 ...

quickest-silver

9/22/2023

Trying to access a column titles to populate a dropdown

I'm fairly new to TanStack table so please forgive me if this is a simple thing to achieve. I'm having trouble accessing a column's title to populate a dropdown menu which will toggle that columns visibility. At present I pass in the title to a DataTableColumnHeader component through the header property of my columns definitions object: ```...

foreign-sapphire

9/22/2023

Which vars to watch as dependencies for a 'table updated/sorted/repaginated' useEffect?

I have a paginated, sortable React (NextJS) table listing 500+ items. And I want to make a secondary, expensiveAPI call for only the 50-100 visible rows in the table each time it re-renders, then augment the table with this extra data. Currently I'm only watching pagination in the dependency array because it seems that sorting also triggers pagination. However, this approach logs the visible rows twice in quick succession....

judicial-coral

9/21/2023

Hide group column

How do I hide a group of columns? Do I need to implement custom logic?

equal-aqua

9/21/2023

expanding rows

Hey I’m using Vue, want to do something like this, https://codepen.io/metamet/pen/MjgMyj Finding it tricky though with this loop. Is it possible with Tanstack? Thanks...

flat-fuchsia

9/21/2023

Global filter, column filter in vue-table v8

This is my first time using tanstack-table +vue3. However, I couldn't find many tutorials and documentation for vue that tanstack provides or tutorials from the internet. Below is the code I am using to use table-tanstack. I haven't done the column filter yet because I don't know how to set it up and use it. I have the following request: - I have a data input. When I press the search button, I will perform a column filter from that input box to the "title" column. My code is below: const columnsTable = [...

hilarious-sapphire

9/20/2023

Hide Column in react-table v8

I try to hide a column, by using this in my columns definition: ```tsx columnHelper.accessor("lastName", { enableHiding: true, }),...

unwilling-turquoise

9/20/2023

Cannot listen to order change

I have a component outside of the component where the table is rendered that is using a table instance. It is controlling table columns visibility and sorting. When columns visibility is changed, I can see the changes in the component and the table as well, everything is working as expected. When I try to reorder the columns I don't see the changes in the component. Table changes the columns order but the component controlling it does not (what I mean the list items you can drag are keeping the same order as before). I used same dnd library as in the example, how can I listen to that change in external component?...

hilarious-sapphire

9/20/2023

global filter ignores other columns

I am using react-table like this: ```tsx function Table({ data, columns }) { const [sorting, setSorting] = useState<SortingState>([ {...

vicious-gold

9/20/2023

Table cell`s value not updating with useState

Hello everyone. I made a table based on the example from the React. The data for the table comes from useState, which is periodically updated via websocket. In the <td> cell, data is set using the flexRender function: flexRender(cell.column.columnDef.cell, cell.getContext()). There is also a separate columns object in which columns are formed using createColumnHelper: each uses the cell field to generate data, for example:...

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