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

adverse-sapphire

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

unwilling-turquoise

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

complex-teal

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?

ratty-blush

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

ratty-blush

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

correct-apricot

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

adverse-sapphire

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

solid-orange

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

genetic-orange

9/21/2023

Hide group column

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

exotic-emerald

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

afraid-scarlet

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

helpful-purple

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

narrow-beige

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

helpful-purple

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

frail-apricot

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

exotic-emerald

9/19/2023

Is react-table tree shakeable?

Hey I was running my bundle analyze for my Next.js application and was seeing a ~50kb bundle for react-table. Is this an expected size? I would think it would be much smaller, though I am importing quite a few function. Lmk if I'm being unreasonable or missing something. It's just the only modules in my project that end up being that large are ones that have known issues tree shaking like react-icons or react-spring.

conscious-sapphire

9/19/2023

Type 'Set<string>' can only be iterated through when using the '--downlevelIteration' flag or with a

I'm getting and error during "next build" at ./node_modules/@tanstack/table-core/src/features/Pinning.ts:220:18

narrow-beige

9/19/2023

Unsure why sorting is not working

Hello, as the title is saying, I'm not sure why is sorting not working in my table implementation. Here are the definitions ``` const columnHelper = createColumnHelper<Visa>(); const columns = [...

sunny-green

9/19/2023

How to implement row span on Table component?

I would like to use dynamic rowspan based on the repeated data on the particular column. I do not see any example or docs explaining the process of row span on react-table. Do anyone have idea???

correct-apricot

9/19/2023

Why is causing re-rendering on my Table component?

Basically this hook is causing re-render on my Table component.. and I don't know why ``` function useColaboradoresTable(): [Table<TColaborador>, boolean, FirestoreError | null] { const [sorting, setSorting] = useState<SortingState>(DEFAULT_SORTING);...

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