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

deep-jade

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

evident-indigo

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

genetic-orange

4/9/2024

How to render dynamic columns based upon the data

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

like-gold

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

manual-pink

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

foreign-sapphire

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

foreign-sapphire

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?

dependent-tan

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, {...})...

stormy-gold

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

useful-bronze

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

harsh-harlequin

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

sensitive-blue

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

generous-apricot

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

conventional-tan

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)

...

conscious-sapphire

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: '' },...

flat-fuchsia

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

extended-salmon

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

adverse-sapphire

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

unwilling-turquoise

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

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