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

genetic-orange

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

xenial-black

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.

xenial-black

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

unwilling-turquoise

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

flat-fuchsia

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

quickest-silver

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

deep-jade

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

sensitive-blue

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

ugly-tan

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

rival-black

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.

equal-aqua

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

equal-aqua

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

molecular-blue

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

xenial-black

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

afraid-scarlet

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

afraid-scarlet

8/28/2023

Custom filter outside table tanstack table V8

I want to create custom column filters in outside tables like floating filters and dropdown filters with tanstack table V8 Is there any way I can achieve this functionality, ???...

sensitive-blue

8/27/2023

Unable to set undefined to pagination state

Unable to set undefined to pagination state although typescript said i can

multiple-amethyst

8/26/2023

Unable to search data in nested html elements inside react-table cells

A table has a few cells with simple text in the name and age columns and a few with text inside HTML elements in the details column. The code in the link can search for texts in the name and age columns, but not in the details column. I want to make it possible to search the cells with HTML elements too. Please help me to solve this issue....

magic-amber

8/25/2023

Migrating from v6 to v8 - best practices/styles

I'm trying to migrate an application's tables from v6 to v8 - I've mostly got a handle on the API changes for things like columns, but I'd like to try to find some pattern to make the migration easier from a styling/rendering perspective. I don't really love the idea of taking the six or seven places where I've got: ```ts ReactTable...

fascinating-indigo

8/19/2023

Shadcn Table - Adding rows to table body causes table body to overflow past max height in layout

I have a dynamic data table component. I would like it to take fill in a parent layout and would like the table body to be scrollable while the footer should remain on the bottom of the page. The page should ultimately not have any scroll behavior, only the table body.
However, whenever I add additional rows using the shadncn table component /pagination https://ui.shadcn.com/docs/components/table, all of the rows in the table body cause the entire html page, which was 999px in height, to expand with a table body with all the rows rendered. For the sake of example, i applied a max hieght of 800px to try to constrain the table body I am following the shadcn data table as well....

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