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

metropolitan-bronze

5/18/2024

Group by row using shadcn tanstack table

I couldn't find any good docs or example to build this kind of table, can anyone please help me

ambitious-aqua

5/17/2024

import {useAsyncDebounce} from '@tanstack/react-table' not exported from node modules

I just upgraded to verion 8 from version 7, we were current using useAsyncDebounce in our filter section. In version 8 it seems that it doesn't have this function in the nodeModules/@tanstack/react-table/index.tsx. Was this upgraded to something else or do we need to make a custom function to debounce?

optimistic-gold

5/16/2024

Connect parts of table state to redux state

Hi, I want to connect e.g. the columnVisibiliyState to my redux state. The "problem" is the onChange functions, that are typed as OnChangeFn<VisibilityState>. I understand that this is basically the same as the useState's setState function. But i cannot figure out how to replicate this function when using a redux store. Currently I have it like this, but I do not really like the solution much: ``` // column visibility...

ambitious-aqua

5/15/2024

defaultColumn not seeing state changes

I'm defining a column renderer using defaultColumn, it works great. I have some state containing an array of selected rows (selectedRows), and I want to display an <input> if the cell being rendered is in a row within selectedRows. However, when selectedRows changes, the cells are not updating as they should. I think this might be due to defaultColumn being memoised internally (https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table.ts#L411), but I'm not 100% sure. ...

metropolitan-bronze

5/14/2024

How do I get all rows value including the paginated one

```typescript const orderFrom = table.getRowModel().rows?.length ? table.getRowModel().rows.map((row: any) => ({ value: row.original.orderFrom.country, label: row.original.orderFrom.country,...

tame-yellow

5/13/2024

WCAG / Keyboard navigation

could someone share solutions for integrating table accessibility?

metropolitan-bronze

5/13/2024

Filter matching highlighting "cell" columns

Hi, so if i use simple columns like this:

{
        accessorKey: "name",
        header: "Name",
},

...

ugly-tan

5/13/2024

Passing filter value.

Can someone help me on passing the the filter value, the value I passed to set filter is different from the value I get from custom filter fn.

rare-sapphire

5/12/2024

Universal Table

Hey folks! I just started using tanstack-stable. I'm using Typescript and I have a database with tons of different tables, all of them have different column names and don't look like eachother. Will I be able to create a universal table that automatically adjusts to the parameters of the incoming GET/table request object? Or should I try using a different library for this? Thank you so much!

sensitive-blue

5/12/2024

Should the initial sorting state include the unsorted option

Hi : D I'm trying to control the initial state of a table with query params in a NextJS project. I can control the page and the rows per page no problem with query params passed in as props with default value fallbacks but something like this: ```...

sunny-green

5/10/2024

_features, acccessorFn and typing

https://github.com/TanStack/table/discussions/5541 Xposted from the github...

stormy-gold

5/10/2024

When I select a row, the whole table rerenders.

I have a table and when I select a row the table gets rerendered. That is not a problem for me until I have to do a api call to get the data for a cell and it keeps calling the api when I select one row For example this is a column helper ```js columnHelper.accessor("website", {...

like-gold

5/9/2024

Table with virtualized columns and dynamic column width

Hello, I'm involved in a project using the Tanstack Table and Virtual to create a table with N columns. We follow this example - https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-columns. It worked flawlessly, even when dealing with over 3,000 columns. However, this table has a behavior that allows users to toggle between showing and hiding the entire width of the columns. Initially, when a user chose to display the full width, we set all columns to the same width. You can observe this behavior in the attached video....

modern-teal

5/9/2024

custom sortingFn problem

How can I implement custom sorting logic where: Numbers are sorted numerically. Empty strings are placed at the end. For example:...

rival-black

5/9/2024

Nested Objects Woes

I have an object thus: ``` const getGanttRowLabels: TGanttData[] = [ locationDetails: { locationId: 0, locationRoleName: "TEAM LEADER",...

fair-rose

5/7/2024

Group rows by date

Hi all! I'm having a hard time trying to figure out how to group rows by date, following this Figma design that I have. Any help will be much appreciated !

absent-sapphire

5/7/2024

Table Form validation

Does anybody did this? I have a tanstack table, which has several columns, every column is editable: text input, select dropdown etc. Also there are some rules applying to entire table. For example, project members table, with ability to edit member role -- only one manager could/should be set, etc. Currently I'm trying to incorporate React Hook Form into Tanskack Table, but its unclear where to pass what. Has anybody did something similar, could you please share your experience. ...

conscious-sapphire

5/7/2024

Filter not working properly

Hello, So i'm trying to filter a date, but the problem is, the date is a string and not an actual date (image sample) the main question I want to ask is, is there any possible way that I can get the value and convert it to a date before passing it to the DataTableColumnHeader (from shadcn) ? ``` {...

sensitive-blue

5/6/2024

Global Filtering not working

Everything else is working... ```ts const [globalFilter, setGlobalFilter] = useState(""); const [pagination, setPagination] = useState({...

quickest-silver

5/3/2024

Matrix table

How I can better create table with same column and rows? Like matrix table

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