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

criminal-purple

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

fair-rose

3/30/2024

Render multiple cols in one cell

What if i dont want to render 2 diff columns 'name' and 'phone' but wanna render a single column with a cell like <div>{name}<br />{phone}? How can i get the both values for the cell?

flat-fuchsia

3/28/2024

What is the best way to include "external data" into an accessorFn

As a bit of a contrived example. Imagine you have a a table of numbers and you want to add some value to all of the numbers in the accessor? ``` //NOTE: I know this isn't how accessors work, but this snippet might help get my idea across helper.accessor( ({value}, external_value) => value + external_value, {...})...

correct-apricot

3/28/2024

Multisort with Row + Subrows not wokring

Hi! So I want to keep the sorting of the grouped row whenever I sort the subrows. So in the table below, I want the dates to still be sorted when I sort the names in descending order for example. I have a custom sorting updater function like this to always have the sorting of the rows in the state...

like-gold

3/27/2024

accessor function returning number gives Typescript error

The weight is a number, If I have this column: ``` internalSchemaClassesColumnHelper.accessor("weight", { id: 'weight', header: 'Weight',...

foreign-sapphire

3/27/2024

Get table header inside the cell

Hello, I would like to show the table header inside the cell. I'm trying to do something like this but I get a typescript error Also, I don't know if this is the way or it's a better one. Thank you. ```ts Expected 1 arguments, but got 0.ts(2554)...

vicious-gold

3/27/2024

Fixing column width on Shadcn

I am using Shadcn and I am not able to set the columns width, no matter if I try to do it through tableOptions.defaultColumn or individual column defs! Can anyone help me here?...

multiple-amethyst

3/26/2024

Is it possible to have a full width table when using sticky?

Hi! My problem is that when I use the sticky column I need to use fixed width columns, but this way "table.getTotalSize()" calculates the fixed width columns but if it won't fill the total width because if I have 3 columns and 150 fixed width then it will calculate 450px. How can I get sticky to work and set a full width table? Since I can't set a dynamic value for the size because by default all columns will be 150, is there a workaround? ...

harsh-harlequin

3/25/2024

How to type meta with Generic

I want to pass react hook form useForm return to the meta of the tanstack table. Doing this ```ts...

absent-sapphire

3/25/2024

dynamically changing options

I noticed the setOptions method that the table instance returns in the docs. Am I able to use this method to dynamically change options? Or is controlling the options directly the best way. If I wanted to setup options directly like so:

const [tableOptions, setTableOptions] = useState({...})
const table = useReactTable(tableOptions)

const [tableOptions, setTableOptions] = useState({...})
const table = useReactTable(tableOptions)

...

constant-blue

3/24/2024

Filtering By Two Columns

Anyone could help with filtering? Basically, I have two columns, but at the moment they filter like AND operator, where both have to match in order to show the row. I need them to act like OR operator, where if either the first or second column matches to show that row. ```js const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([ { id: 'fullName', value: '' }, { id: 'email', value: '' },...

optimistic-gold

3/23/2024

Filtering column of cells that contain multiple values

Hey, I'm trying to wrap my head around how to filter a column of cells that their data is an array of strings. Each cell is an array of these strings and the same strings can appear in many cells. I'm following the "Tasks" example from shadcn-ui (https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/tasks), but in this example each cell has a single string value, and the example uses 'getFacetedUniqueValues'...

fair-rose

3/22/2024

What's the purpose of on[State]Change functions passed to the useReactTable() hook?

I can't wrap my head around this. In the docs it's said (https://tanstack.com/table/v8/docs/framework/react/guide/table-state#individual-controlled-state) that if we want to control a specific piece of table state, WE NEED TO BOTH pass in the corresponding state value and the on[State]Change function to the table instance. But, as I can see, if I pass in ONLY the state value to the table instance with NO on[State]Change function, or even an empty one, the table state is updated all the same....

genetic-orange

3/22/2024

Row wrapping

I cant seem to find a way to prevent the row wrapping and overflow hidden the content. Or A way to spread out the content to fill the full height of the row and then do flexbox justify around so it spreads them out evenly. https://gyazo.com/020348afc15ad92b2c15f00f8c594841...

conscious-sapphire

3/20/2024

Disable Active Sort

I allow users to edit the cells of the table but I don't want sorting to happen automatically once an edit is made. I want to disable the active sorting that occurs once a user changes a field in a column

typical-coral

3/20/2024

api to select a row by id in a table

I have been scanning the API documentation and could not find a simple function like selectRowById Is there a simple way of doing that or I should filter the row from getCoreRowModel?...

variable-lime

3/20/2024

App getting unresponsive when uplifting the useReactTable hook use

Context My application/ page is laid out like this ```js function ComponentA {...

tame-yellow

3/19/2024

React-Table V7.8 How to access other columns data

Hello, I am using react-table v7.8, I believe now it is TanStack. My question is I have several columns that depend on another column's value. Such as a progress bar depending on ETA and stage columns. How do I access the value of other columns? I tried looking online and as far as I can see I only see you being able to have one accessor...

rare-sapphire

3/19/2024

Is it possible to async fetch subrows?

For a project with a lot of layering it would be nice if I can fetch the subrows asynchronously. Would this be possible? I can't find an example for it. I was thinking about using either a custom component for the subrows that does its own data fetching or manipulating a cache for the entire table. Does anyone have experience with this? @Tanner Linsley maybe:)?...

conscious-sapphire

3/19/2024

manualSorting not picking up on my data sort order change

I have a table that is using grouping and when the grouping changes the data is sorted again and given to the table. I have manualSorting: true defined as well as the state: { sorting } and the onSortingChange: setSorting as per documentation (https://tanstack.com/table/v8/docs/guide/sorting#manual-server-side-sorting). However, on the initial load of the table, the groups and data are sorted as expected; once I change the group by value, I get a completely random sorting of groups and rows in my table. The data is sorted on the select callback of a react-query useQuery and I confirmed that the data given to the table actually is correctly sorted. Any suggestions what the culprit may be?...

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