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

adverse-sapphire

4/24/2024

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

Hi, here is my code:

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

...

like-gold

4/22/2024

Types for table

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

rare-sapphire

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

mere-teal

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

stormy-gold

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

wise-white

4/17/2024

How to filter by items and subItems

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

wise-white

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

xenial-black

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

...

probable-pink

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

other-emerald

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.

extended-salmon

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

flat-fuchsia

4/13/2024

accessor values

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

flat-fuchsia

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

genetic-orange

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

rare-sapphire

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

optimistic-gold

4/10/2024

Issue with Real-time Table Data not Rendering

Hello there, I'd love to know if there are any references or examples for React with live or real-time table data. I'm bumping into some surprising behavior where I have a setup like so: const data = useData() // updating once a second const table = useReactTable({ data }) const { virtualItems } = useTableVirtualizer({ table })...

deep-jade

4/9/2024

How to render dynamic columns based upon the data

I have data like this ```json [ { "name": "jhon doe",...

quickest-silver

4/6/2024

Virtualized Columns with Column Groups

can some help me merging below 2 examples https://tanstack.com/table/v8/docs/framework/react/examples/column-groups https://tanstack.com/table/v8/docs/framework/react/examples/virtualized-columns...

extended-salmon

4/4/2024

Custom sorting examples

Hi, I'm in the process of converting a set of tables over to Tanstack. Has mostly been going well but I seem to have run up against an issue and I was wondering if there were any examples of how to get a custom sort function working (this may be my relative Typescript newbness biting me). I have tried adding it to the table's sortingFns as described in https://tanstack.com/table/v8/docs/guide/sorting#custom-sorting-functions, but when I add that fn name as a string in my column definition's sor...

harsh-harlequin

4/4/2024

Date range filter

How can i filter the table so that it uses a date range? I've tried to use a bunch of the resources online but I cant figure it out: <DatePickerWithRange onChange={(dateRange) => { console.log(dateRange); const { from, to } = dateRange; const fromDate = from ? new Date(from) : undefined;...

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