TanStack

T

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

xenial-black
xenial-black12/20/2023

hide group

How can I hide a group column??
sensitive-blue
sensitive-blue12/20/2023

How can I add filters like (equals, starts with, ...)?

Hi, how can I create filters such as equals, contains, starts with, ends with, between, greater than, greater than or equal to, less than, and less than or equal to?" Does anyone have an example repository? The docs are not helpful. like this:...
No description
adverse-sapphire
adverse-sapphire12/19/2023

how to type columns when using createColumnHelper

Hi, I recently asked a question on Github https://github.com/TanStack/table/discussions/5218 about typings for columns when using createColumnHelper(), does anyone know how it could be properly typed without using any?
genetic-orange
genetic-orange12/17/2023

Svelte RenderComponent

Hi, I am rendering fine another component inside a cell in my table ``` cell: (info) => renderComponent(TokenLogo, { name: info.row.original.name,...
metropolitan-bronze
metropolitan-bronze12/15/2023

Lazy loading for expandable rows

Hello everyone, great days for all, my question is: if we have any guide how to implement lazy loading for expandable row ? I am trying to implement to by this guide https://github.com/nafeu/react-query-table-sandbox/blob/main/src/ReactTableExpanding.jsx it work but it makes subRows in my clicked parent row and i doesnt see subRows in table , when i examine in console, by table.getRowModel().rows method, see my rows in image 1, in row 1, in subRows i have my data but in row 2 with id: 1.0 my su...
Image 1
passive-yellow
passive-yellow12/15/2023

Sticky header

Hi, how do I implement a sticky header? I know about position sticky, but I also have overflow on my table, and that invalidates sticky. The only way I've been able to do it, is by creating a different table for the headers and syncing the scroll, but that is very cumbersome and not very performant. This is more a CSS issue, but would be nice if the library supported this somehow?...
national-gold
national-gold12/15/2023

Customizing sorting in react table. Toggle Sortby

By default, React Table sorts the data in ascending order when the user clicks on a sortable column. I want to reverse the order, instead of sorting unsorted -> ascending -> descending...
No description
conscious-sapphire
conscious-sapphire12/14/2023

Filtering table by status not working properly

As you can see in the image I am filtering my table by status which is a number and its defined in the columns. In columns.tsx ` {...
No description
national-gold
national-gold12/14/2023

How do I filter text inside cell?

My cell has accessorKey of type. It renders title and description transaction-col.tsx ```ts { accessorKey: "type",...
eastern-cyan
eastern-cyan12/14/2023

Showing detail row if expanded

Hi all. I am using the getIsExpanded() function to render/not render a details row. (one details row per table row. In the cell of the name column, I use getToggleExpandedHandler() to toggle the expanded state, which then shows/hides the details row. You can see it in the image below labelled as working. However if I group on a column, that wont work. Expanding the grouped row, will show a details row before it is clicked. You can see this in the second image....
No description
metropolitan-bronze
metropolitan-bronze12/13/2023

Table UI breakdown on data update

Hi there! We have an issue with the TanStack table on data updates. Its core UI structure seems to break down whenever a new row gets inserted into the data array, or the array gets replaced with a new array containing more rows....
No description
conscious-sapphire
conscious-sapphire12/13/2023

Custom filter makes built in filter not work

I have this columns in react-table v7, one with a custom filter and another with a 'between' filter. When I use the custom filter, the 'between' filter stop working. Any ideias why and how to fix it? function multiSelectFilter(rows, columnIds, filterValues) { return filterValues.length === 0 ? rows...
fascinating-indigo
fascinating-indigo12/12/2023

pagination ids

Hello everyone, I have a question, if it’s possible to have pagination id set to a value on TanStack pagination. Wouldn’t it be useful for the testing? If not, is where an example on how to do it with a custom pagination? ...
dependent-tan
dependent-tan12/11/2023

table column fixed size

Your example https://tanstack.com/table/v8/docs/examples/react/full-width-resizable-table I copy table from example above. First column I set fixed width 40px. But really width is more than 100px. why? How fix this?...
harsh-harlequin
harsh-harlequin12/11/2023

How to determine pagination direction

I'm trying to do manual pagination over a collection returned from Apollo GQL using Relay-style pagination. I'm trying to figure out how to determine if nextPage() or previousPage() was called so I know whether or not to call the fetchMore function. When users page backwards, I simply offset the data accordingly
const table = useReactTable({
data: data.slice(pageIndex * 10, pageIndex * 10 + 10),
const table = useReactTable({
data: data.slice(pageIndex * 10, pageIndex * 10 + 10),
...
conscious-sapphire
conscious-sapphire12/11/2023

Objects are not valid as a React child

Hi guys I'm trying to render an arrray of objects in my table, but it return me this error. Unexpected Application Error! Objects are not valid as a React child (found: object with keys {tipoAsistencia, sesion, noExcusado, motivo, id, horaLlegada, horaInicio, horaFinalizacion, fecha, descripcion, bloqueada}). If you meant to render a collection of children, use an array instead....
No description
extended-salmon
extended-salmon12/11/2023

Property 'eventType' does not exist on type 'TData'

Hi, I have a problem where i'm accessing row.optional value that is created earlier with creation of table. I'm getting error that "eventType" (that's my custom column) doesn't exist on type TData. I tried looking and tried various ways of fixing it but was unable to. I read through documentation on TenStack but also couldn't figure it out. So please if anyone can help me with this?...
unwilling-turquoise
unwilling-turquoise12/10/2023

how to get which column sorting changes

how to get which column sorting changes
No description
unwilling-turquoise
unwilling-turquoise12/9/2023

is there any open source project made in react and tanstack table having an example of this table

is there any open source project made in react and tanstack table having an example of this table having sort 2 way sort options and design. for refrence code. OPEN SOURCE EXAMPLE...
No description
sharp-indigo
sharp-indigo12/8/2023

How to get a result for subRows search in a table

I have only 2 columns. I can see the result of the search in a search component (in filter), but when i press on it, the results are not showing up in the table...
No description