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

fascinating-indigo

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

stormy-gold

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

flat-fuchsia

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?

afraid-scarlet

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(() => {...

afraid-scarlet

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

coming-scarlet

4/24/2024

[SOLVED] getFacetedUniqueValues() not working for date objects?

Hi, here is my code:

const uniqueValues = table
    .getColumn('EstimatedTimeOfDeparture')
    ?.getFacetedUniqueValues();

...

desirable-aquamarine

4/22/2024

Types for table

```tsx import { Table as TTable } from '@tanstack/react-table'; interface DataTableProps<TData, TValue> { columns: ExtendedColumnDef<TData, TValue>[];...

fair-rose

4/19/2024

Real time updates

Hey there, I'm using table in a collaborative context where cell values are being changed by other users. Is there a canonical way to have these updates propagate? Currently not getting any change coming through since the data array is a stable list of references, with only the properties of each row being changed in this use-case. I'd also like to avoid re-rendering the whole table in this case. When other users add or delete rows, those changes are propagated since the data array changes....

fair-rose

4/19/2024

Add additional records/data to filtered table

Hello! I just want to ask how or is it possible to have additional data for filtered table? Like for example by default my table is filtered by hiring manager but I also want to see the other records like Activity type = "Subscribed" but it doesn't have a hiring manager...

eastern-cyan

4/17/2024

Is there an existing pattern for reusing columns on many tables in a project?

My project has many tables, many of which have name and description columns for example. I've tried two different ways to make a reusable column but both throw errors in the columns I've included both ways with notes in the code...

adverse-sapphire

4/17/2024

How to filter by items and subItems

My data model is: { "id": 1, "name": "Pilot", "site_url": "products/pilot",...

xenial-black

4/17/2024

Can I apply the global filter on visible columns only?

I'm using the columnVisibility state to select which table columns are displayed. I'm adding an additional globalFilter to the table, but want it to apply only to visible columns - otherwise rows will be shown based on invisible columns and it won't be clear why. Is there any easy way to do this with the existing Table API?...

sensitive-blue

4/16/2024

Check if column exists to render filter

Hello. In my custom table i have some quick filters in the table's toolbar. To show the i have something like this:

table.getColumn('status') && <TableStatusFilter/>

table.getColumn('status') && <TableStatusFilter/>

...

foreign-sapphire

4/16/2024

Table cell which is Combobox causing re render

Need Help Issue - Table cell which is Combobox causing re render which is closing the popover and user is unable to use input field. As per doc- 1) We have Memoize column and data both, ...

national-gold

4/16/2024

row.original vs row.getValue

Hi everyone, I am wondering what is the best practice when getting the value from other columns. Only difference I see is that type when accessing value with row.original is infered while row.getValue is not.

genetic-orange

4/15/2024

Creating Multiple ColumnDefs for one data type and How to access them in other React Components

Hello! Came from Shadcn-ui's Data Table Component Tutorial, I would like to ask if it's possible to create multiple ColumnDefs for a Data Type? For example:...

national-gold

4/13/2024

accessor values

how do i access these values? ```js export type ColumnsPartnerDef = { userID: string; data: {...

national-gold

4/13/2024

custom logic on columns.tsx

So i have my table rendered and I pass in data to the table that looks like this as u can see, for some objects, there is a userID field. I want to basically make it, if their is a userID on the object, then display a checkbox that is checked as true, if there isn't make a checkbox that is check as false. i got this part figured out....

rising-crimson

4/12/2024

Virtual infinite scroll cell width

Is there a way to fit cell width when using virual infinite scroll table? Because row has position absolute it seems only possible to set cell width individually in pixels, but then width of table doesn't expand to width of page. Thanks...

magic-amber

4/11/2024

Can someone please explain to me the faceted values? Broken documentation page.

Documentation on the official page is 404. https://tanstack.com/table/v8/docs/guide/faceted-values...

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