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

wise-white

5/13/2024

WCAG / Keyboard navigation

could someone share solutions for integrating table accessibility?

old-apricot

5/13/2024

Filter matching highlighting "cell" columns

Hi, so if i use simple columns like this:

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

...

like-gold

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.

optimistic-gold

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!

adverse-sapphire

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

relaxed-coral

5/10/2024

_features, acccessorFn and typing

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

narrow-beige

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", {...

conscious-sapphire

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

compatible-crimson

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

genetic-orange

5/9/2024

Nested Objects Woes

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

optimistic-gold

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 !

correct-apricot

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

foreign-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) ? ``` {...

national-gold

5/6/2024

Global Filtering not working

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

genetic-orange

5/3/2024

Matrix table

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

foreign-sapphire

5/2/2024

How to limit the row of table being shown?

Is there a way to limit the rows being shown in my website? The problem I have is the default value rows i 10, it is possible to limit it to 5? I'm following this tutorial provided by shadcn-ui https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx...

quickest-silver

4/30/2024

Prevent using <any> in custom sort function

Below custom sort function in isolated file fuzzy-sort.ts works as expected. My question: any pointers on how to replace the <any> type on line 5 with something more strict? ```ts import { compareItems } from "@tanstack/match-sorter-utils";...

other-emerald

4/27/2024

Search by name and email

I have a Name column in which I have name and email, Can anybody tell me how to make search by name and email?

fascinating-indigo

4/25/2024

How can I typecast these original rows

I am trying to calculate total number of persons when a filter changes, but im running into TypeScript errors, saying that .totalPersons : Property 'totalPersons' does not exist on type 'TData'.ts(2339) This is my code: ```ts useEffect(() => {...

fascinating-indigo

4/25/2024

[SOLVED] Want to pass a refetch from an useQuery to an action in a column helper.

I have an useQuery in a parent component that I destruct refetch() from. i now want to pass it to the table so i can use it in my column definition. so far this is what i have: ```ts // parent /w the useQuery above {data && ( <BookingTable...

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