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

afraid-scarlet
afraid-scarlet1/29/2024

StripedRows

Hello everyone, I was wondering if there is a css class or something to add stripedRows style on the table? every even rows are white and odd ones are grey? Thanks a lot!
absent-sapphire
absent-sapphire1/29/2024

Search with manual pagination and filtering

Hello I have datatable component that i use to render my data. Most of things are handle manually. I use Tanstack Query to fetch the tableData. I have a search state that i pass down to my table and i have two problems: 1. When i search i want to reset the pageIndex to 0. When doing this a re-render happen for every keypress. Also when doing this an extra request occurs for pageIndex = 0. 2. When typing (searching) the table components re-renders for every keystroke as the search value (prop) is changing. ...
flat-fuchsia
flat-fuchsia1/27/2024

Remove NaN columns

How can do I conditional hide a column with the columnhelper? Like for example if all values in a column is nan, null and undefined, then hide the column
rare-sapphire
rare-sapphire1/25/2024

Help with CSS for resizing columns

edit: repro: https://stackblitz.com/edit/tanstack-table-7djbwc?file=src/main.tsx Anyone mind taking a look With this resize in SS #2 you can see the columns sizes are off. The internals are { actions: 1165, firstName: 0, nickName: 817 } but you can see firstName is not the 60px width....
No description
pleasant-yellow
pleasant-yellow1/23/2024

Custom GetFacetedRowModel/getFacetedUniqueValues

Hey TanStack champs, I have a table that has objects as cell values ( eg. url to render Avatars) because i have not only string/numbers, my js-objects are not correctly recognized as unique (enclosed screenshot of the facets, from (const facets = column?.getFacetedUniqueValues())) ...
correct-apricot
correct-apricot1/23/2024

Column Resizing: Header Width Not Matching in Browser

Hey everyone! 👋 I'm currently facing a bit of a challenge with react-table and was hoping to get some insights. I'm encountering an issue where the widths I've set for my table headers in react-table aren't matching up with what's actually being rendered in the browser. It's a bit perplexing, and I've been scratching my head trying to figure out what might be causing this. ...
rising-crimson
rising-crimson1/22/2024

I cannot underline the rows of this table after some indentation

I underlined the entire header of the table with a line, but I cannot underline the rows of this table after some indentation (as shown in the photo). Please help me solve this problem
No description
unwilling-turquoise
unwilling-turquoise1/21/2024

Angular adapater need help

Hey all, I have created some examples in angular using tanstack, you can check at https://jrgokavalsa.github.io/angular-tanstack-table/ and need some help in PR for angular
like-gold
like-gold1/20/2024

Getting column filter initial state

So I currently have this config for my table (which is its own component): ``` export const DataTable = <TData, TValue>({ data, columns,...
stormy-gold
stormy-gold1/19/2024

order of selected items

Hello, how can i get the order of selected items?
absent-sapphire
absent-sapphire1/18/2024

Access types of the cell value

First time really taking a look at tanstack table. I'm trying to get off of muix-data-table potentially to use some of the (should be free features) like row pinning etc. Currently have a semi working table in my react app working with data the looks like this ```js export interface TransformedTableRow {...
rare-sapphire
rare-sapphire1/18/2024

Migrating to v5

In my project, I'm needing to point to SystemJs or UMD min file in my project, but I'm not able to find it. I tried /build/modern/index.js, but wasn't sure if that's correct.
like-gold
like-gold1/15/2024

Column Visibility Type issue

Hi all, I have this table which I can set the column visibility. However, I can't fix the ColumnDef type for this specific table. I was wondering if you can help me here:...
absent-sapphire
absent-sapphire1/10/2024

Simple table issues

Hi all I'm having a terrible go at creating a table. I have a data model that looks like ```json { id: 'eb4a87e1-a55b-49c3-97b9-72efaae0c868',...
deep-jade
deep-jade1/9/2024

Best way to reset rowSelection on data change

👋🏽 Hey, I wonder what is the best way to reset the selected rows when the data changes (server side-sorting, or server-side pagination). Initially the rowSelection should not be reset! Is this the way to go? ```javascript...
deep-jade
deep-jade1/9/2024

How to implement tanstack/core with pagination & sorting?

Hi I want to create tanstack/core table in JS. Right now, I'm fetching data from api (paginated) and upon recieving its response, I'm creating the table object with its options & rendering the header and table cells. But I dont think thats a good approach as the state resets to initial if pagination or sorting changes. If someone has idea about it, please guide me through this. (Adding the tag for solid as there's no "core" tag)...
vicious-gold
vicious-gold1/8/2024

How to rotate the table in Tan-stack

Hi, want to rotate the position of table that header in the column position like this. Does anyone has solution for me
No description
like-gold
like-gold1/5/2024

row.getCanExpand() always false on expanding table

Im trying to make a expandable table but when I try customizing the cell for the expandable column, the row.getCanExpand() always returns false. I find no way to make it return true This is my comun def ```ts...
sensitive-blue
sensitive-blue1/5/2024

How to create a reusable table component in Vue

I am working with Vue and Typescript, and I am having issues passing columns and data from a parent component into a table component. Does anyone have a working example of a child table component that accepts columns and data as props? Or, is there a more idiomatic way to accomplish a reusable table component that might involve column definition from within somehow?...