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

frail-apricot

7/27/2023

FilterFns declaration for one table forces its usage in other tables

Hello guys, I used example from the github for custom filter functions. However, declaring custom filter functions in FilterFns interface makes filterFns required in other tables, so I need to pass it to tables, where don't need filters at all. Or do the casting like that:

filterFns: '' as unknown as Record<keyof FilterFns, FilterFn<any>>

filterFns: '' as unknown as Record<keyof FilterFns, FilterFn<any>>

Is there another way to deal with it?...

fascinating-indigo

7/27/2023

Passing columns as props to a React component

What is the correct type for columns definitions when passing them as props? I am using ColumnDef<unknown>[] but I cannot pass column definitions I have defined in other component. ```tsx export type PlainTableProps = { columns: ColumnDef<unknown>[]; // <<<<<<<<<<<<<< I want to pass columns as props...

conscious-sapphire

7/27/2023

Using tRPC inferred types with Tanstack Table?

Hey all!!! I am currently trying to use tRPC to grab a sample of data from my backend to use in tanstack table I had a previous verison of this working where I used an explicitly types API route, however I want to be able to infer the type of the route and use it as the type for the column defs...

like-gold

7/26/2023

svelte 4 support when?

Just asking when can be the table be updated to be compatible with svelte 4?

conscious-sapphire

7/26/2023

Example Table in Vue with Filtering?

Hello! I'm trying to make a table with filtering in Vue and am running into issues. An example project would be great to look at! The following is my ColumnFiltering.vue file ```v...

rival-black

7/26/2023

Failing to make Tanstack Table Columns Resizable

Hi, I am using Tanstack Table v8 + ShadCN UI to create a data table. I am trying to make columns resizable but failing to achieve that. I am new to tanstack table, so any pointers on what I am missing will really be appreciated. I have tried to follow the sample code for column resizing but it does not work as expected. My Code is in the "data-table" branch of this repo: https://github.com/tanushm31/test-ui-nextjs/tree/data-table P.S. Not posting any code snippets following the community guidelines. But let me know if I need to add some screenshots....

optimistic-gold

7/26/2023

Using @tanstack/react-table with @tanstack/react-virtual

Hello. There is an example (https://tanstack.com/table/v8/docs/examples/react/virtualized-rows) of using react-virtual on your site. Can you make a sample usage with your new version of the library - @tanstack/react-virtual ?...

foreign-sapphire

7/24/2023

When does the _valuesCache under row object are updated?

I have an issue with this cached values. The row.original is being updated but the _valuesCache still with the old values which makes the getValue function to always retrieve the cell old value. I've made a custom cell edit and when the save button is clicked, it sends the new data to an API and then useTable data is updated with the request response. As I said before, the row.original is being updated properly, but the _valuesCache still with the old values. Is there a way to force this cache to be updated?...

rare-sapphire

7/24/2023

Detached column filters.

Hi everyone, I want to create a detached from the table multi-select column filter for my table. I am trying to create a generic usable table, on top of the table I need to have a bar with a search bar (already implemented) and next to it I want to be able to choose which columns will render a dropdown with all the faceted values for the user to choose from. So atm reading the docs, I have it that under each header I can have the dropdown, The question is how can I move it away from the header, and just attach it to that column and of course get the column's values to populate the dropdown. ...

flat-fuchsia

7/22/2023

Single row selection not working

I've been trying to implement single row selection using the v8 of the table, but I'm unable to do so. I'm using radio buttons which ideally should allow me to select a single row, but I'm able to select to multiple rows. I've tried various solutions but none of them seem to work. Can someone please help me with it ```tsx...

conscious-sapphire

7/21/2023

ReactTable size independent of split-pane Pane parent size; how to fix?

Hello. I have a ReactTable inside a Pane (from react-split-pane), and want to get the resulting table to conform to the size of the Pane that it is nested in. I've noticed that although it's possible to override the table's height with an absolute value, overriding with a percentage doesn't seem to work. Is there some quirk I am missing?

stormy-gold

7/19/2023

Svelte selection

I have a config with, following an example of react in Svelte ```ts const defaultColumns: ColumnDef<MedicationRow>[] = [ {...

equal-jade

7/17/2023

How to get all unique values of a given columnId?

Hi all, I'm building my own filters to be something like the following where the dropdown is supposed to show all unique values: ...

stormy-gold

7/17/2023

How to stop table overflow on mobile

I am using Table after going setting it up from shadcn and it works beautifully on all screen sizes except mobile where there seems to be a really weird issue with overflow scroll on the screen. I do have 2 screenshots but I will only share them if it is okay to do so after reading the guidelines. Also not wanting to post a big wall of code either unless someone is happy to debug it with me and then I can share more details 🙂 Sadly, the code is within a private repo and I do not know how to set it up correctly within a code sandbox....

fascinating-indigo

7/13/2023

(V8) Triggering a, per row, function from one column to another.

I'm not sure if this is possible but lets say I have a two column table. 1) An action column where I want to trigger a function e.g. 'rename' on a input field. 2) An input component, which changes from a span to an input box....

conventional-tan

7/12/2023

Sorting middleware

Hi! I would like to call a middleware before (if it would be after, I could probably use the onSortingChange property exposed by the API) the sorting function (I only use the built-in ones) are called in a table. What would be the easieast way to do so?

extended-salmon

7/11/2023

Example how to virtualize columns?

There is an example in the docs about how to virtualize a table's rows. Is there an example how to do that with columns? Row example: https://tanstack.com/table/v8/docs/examples/react/virtualized-rows...

unwilling-turquoise

7/9/2023

Sort by datetime

I have columns that are being sorted using this how can i make a column sort by date time instead of if the field is true or not https://github.com/shadcn/ui/blob/main/apps/www/app/examples/tasks/components/data-table-column-header.tsx https://github.com/shadcn/ui/blob/main/apps/www/app/examples/tasks/components/data-table.tsx https://github.com/shadcn/ui/blob/main/apps/www/app/examples/tasks/components/columns.tsx...

correct-apricot

7/7/2023

default UI?

Is there some default UI or component library I can use for a table? I do not want to build the entire UI from scratch so hoping there’s some template I can use

foreign-sapphire

7/7/2023

How to render default filters outside of the table in v8

In table v7 I used following code to render filters defined in columns outside of table headers: {headerGroup.headers.map((column) => ( column.enableFilter && ( <div className="col-md-2" key={column.id}> <div>...

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