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

afraid-scarlet

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

fascinating-indigo

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.

continuing-cyan

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

adverse-sapphire

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

like-gold

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

automatic-azure

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

flat-fuchsia

9/15/2023

How to get Column and Row indices when mouseMove event is on the DOM

I want to add a cells highlight feature to my table but I don't want to add the event handlers to each cell, I want to add it to the Body DOM element, what will be an idomatic way to do is in ReactTable so that I will be able to retrieve the column and row indices.

flat-fuchsia

9/15/2023

API Hooks

How do I extend the functionality of v8 tables, v7 had plugins which helps you access the api and modify the behaviour, how can that be done in v8

optimistic-gold

9/15/2023

Resizable columns with table-layout: fixed

I need to make cells that can be horizontally scrolled. I learned that table-layout: fixed is making it possible. But now with table-layout: fixed , resizing one column of the group also resizes all its siblings. (See my codesandbox, and try to resize the Visits column) ...

solid-orange

9/12/2023

ColumnOrder, ColumnPinning, ColumnVisibility

Hi. I'm using 8.8.5 version of tanstack/react-table. I have a bug with columOrder, columnPinning and columnVisibility; When I'm not using id in columnDef and using accessorKey my columnOrder is shuffled. And it's shuffled exactly when some columns have accessorKey like someKey and others have some.key. In my component I have a mapper that takes all accessorKeys and sets them into useTable state. As a result - expected order is not applied, columns have shuffle order. If I change accessorKey to one format - everything works as expected. ...

wise-white

9/12/2023

mobile overflow issues

I asked this yesterday but maybe in the wrong channel so I’m going to share a link for ease. https://discord.com/channels/719702312431386674/1003326939899113492/1150770706502664242 Has anyone encountered an issue like this before? No matter what I try the overflow seems to persist....

ambitious-aqua

9/12/2023

client side filter

Hi there I’m starting to learn tanstack table. I saw that we can use getFilteredRowModel to get filter function on a column. However, for number filter it seems there is only a min max filter available. Is it possible to get rid of mix max and just have one search box seaching the exact value? Thanks...

wise-white

9/7/2023

Data Reversing

I've implemented getSortedRowModel, and set my table headers to toggle the sorted/unsorted states of data, which is currently sorting my items alphabetically, but what I really want is to toggle the reversal of the data listings in the table when the first header of the first column is clicked (bottom listing becomes top, and vice versa). How can I implement this toggle functionality?...

flat-fuchsia

9/5/2023

Why is the column value type unknown?

The type of the column value is inferred in createColumnHelper, but why is the value type in columnDef definition as unkown? ```typescript export type ColumnHelper<TData extends RowData> = { accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never>(accessor: TAccessor, column: TAccessor extends AccessorFn<TData> ? DisplayColumnDef<TData, TValue> : IdentifiedColumnDef<TData, TValue>) => ColumnDef<TData, TValue>;...

foreign-sapphire

9/4/2023

Exporting a table containing custom component cells into an XLSX file

Hi! I adapted some code I found online [https://pastebin.com/jJq5b26R] to export a table created using useVueTable. It works for simple tables, but fails when I try to export tables containing cells rendered using custom Vue components. What do I need in my custom components to be able to get a string when I try to export a table? I'm fairly new to this, so any suggestions are welcome.

correct-apricot

9/2/2023

I am using Tanstack table in ReactJS (useReactTable), I want to first set column filters then apply

I have multiple column filters. and I am applying filters using <TABLE_INSTANCE>.getColumn("team").setFilterValue(team) <TABLE_INSTANCE>.getColumn("user").setFilterValue(team). But it will re-render the table 2 times. I want to render the table one time only like just set filterValues first then apply the filters I want function/API which will first apply the filtervalue then apply the filters on table so that I avoid unwanted re-renders...

correct-apricot

8/30/2023

Common filter for all my table instance

Use-case : I have different data base on country but columns remain same. For example : data1 is data from india with columns : personName, age , gender, data2 is data from USA with same columns : personName, age and gender. I want to display all table in one view with one common column filter for personName I have created two instance of table, : indiaTable and americaTable using same column Defs (since columns are same) using useReactTable...

vicious-gold

8/30/2023

Dynamic colspan on table body cell

Is this scenario possible I have a flexible data structure currently trying with type of data ```typescript const apiData = [ {...

correct-apricot

8/30/2023

How can I filter by comma separated values?

Hi team. I need to be able to search for item 1, item 2, item 3 instead of just item 1. I created a new filter for this but it's not working. Here's what I have tried so far: ```react...

rising-crimson

8/29/2023

passing arguments through to group?

I am trying to implement grouping on a Date column and I want to be able to provide options to group by month/week/year/day/hour etc... It should be easy to do by manipulating the getGroupingValue to format the date. Does anybody know if there is a way to create a grouping function (not an aggregation function) similar to how the FilterFn provides access to the filterValue?...

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