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

spiritual-aqua

6/8/2023

Defining columns inside function components

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md when I am trying to define my column array inside a function component, whereas in the examples the columns are defined inside the function component, https://codesandbox.io/s/gallant-austin-kn24pq?file=/src/main.tsx:701-723...

national-gold

6/7/2023

How can I add a boolean checkbox that corresponds to react query data in a react table column?

I have a react table mapped to an array of objects that contains a boolean field, I want to be able to toggle that field within a react table column. What's the best way to approach this? I also want to add a handler to the checkbox if possible.

secure-lavender

6/7/2023

React Context Menu

Does anyone have any good resources for creating context menus on right-click? I couldn’t see anything like this covered in the docs for tanstack table

afraid-scarlet

6/7/2023

vue table

Hi , in vue i am getting prop.renderValue is not a function , what might be the case

deep-jade

6/7/2023

Display Cell Metadata

Hi, I am trying to add some metadata to individual cells that can be displayed e.g. in a Popup. Think of a Popup that gives the user information of the source of this particular data point. I was wondering, how/where I could store and access such metadata to individual cells. The documentation does not make this obvious... Thanks in advance!...

xenial-black

6/5/2023

Render partial change (Solidjs)

Is it possible to use Store (createStore) as the source of data and reactively track the partial changes? I did not find a way to make it work. There are samples only with createSignal. In this case, rendering happens only when you replace the whole table data. Thanks....

fair-rose

6/3/2023

Render dynamic data

I have an API requesting some data, i send the data through props to another function(Table) in a different file. I get the <thead> columns but the <td> doesn't render. When I log out the data its getting passed through at the time of execution inside of the mappings but just doesn't render. My guess is on the final render the data isn't accesible by the table so it doesn't render but I'm not sure. If I use a non state variable and pass it to the <Table/> it works fine however. Anyone know what'...

harsh-harlequin

6/1/2023

General approach to learning tables

Hi, what is the best way to understand how to use tables? Because I just discovered it and thought the Guide would be an incremental code-along thing which explains what is happening, but right at the first intro of code in Colum Defs, there are RowActionsand columnHelper.display which are not explained and cannot be found in the Basic example either. I'd love a recommonded approach to this, since I am a bit confused her. Not blaming the docs, more like admitting that my coding experience isn't high level enough to easily grasp this, so looking for help 🙂...

adverse-sapphire

5/30/2023

Get the index of a row as "natural" order (order displayed on the table)

I'm trying to implement "row navigation" with the keyboard, so whenever you press the ArrowUp or ArrowDown the row right above/below the currently selected row is selected instead. However I'm not sure how I can get the index for the "natural" order, ie the order the rows show up in the table, as that depends on its state. As an example: if rows are sorted but not grouped, table.getSortedRowModel() works well, but not if they are grouped. If they are grouped and not sorted table.getExpandedRowModel() works well, but then if they are both sorted and grouped/expanded, this also doesn't work. Is there any model I could use that gives me rows in the actual order they are displayed on table?...

sunny-green

5/29/2023

How to turn off fuzzy

Hi I've build my table based on React filter example: https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/filters?from-embed=&file=/src/main.tsx 1. How can I turn off fuzzy filterin globalFilterFn and instead use a typical exact match filter? 2. What code to add in order to have the matches highlighted in the ? (different color background for matches found in the table)?...

absent-sapphire

5/29/2023

How to integrate Algolia React Hooks with Tanstack Table v8? (just a global filter is enough)

I am trying to figure out how to put together the search hooks from react-instantsearch-hooks-web package, into the example of filtering https://tanstack.com/table/v8/docs/examples/react/filters The Algolia hooks provide something like: import { useHits } from 'react-instantsearch-hooks-web'...

adverse-sapphire

5/28/2023

Static row id

Hey, not familiar with usememo, i have sortable table. I need static id numbers, first row always start from 1. After every rerender table. ```{ id: "Row", header: "#", cell: (row) => {...

variable-lime

5/26/2023

Persist filter state on local storgae

Hi everybody! Is there a native way to persist the filter state on the local storage? I'd like to save that information in a variable when my users refresh the page. Thnks in advanced ❤️...

flat-fuchsia

5/26/2023

material-react-table versus react-tables

Hello I use React tables with MUI v5. All works fine with my customisations The problem is that one developer wanted to install Material React Table over the original react tables. ...

exotic-emerald

5/25/2023

V7.* and how can I only get the "off" or unchecked check boxes?

I have an issue with a "select all" functionality I am trying to implement.. The problem arises because my data is not fully loaded all at once. I only load the pages the user goes to. So, I check for the selectAll prop, and then toggleAllRows... but, when a user "unchecks" one, it sends up all the checkboxes that are checked. I know I can do an xor or something like that, but its becoming unwieldy. I don't want that. I only want what is "unchecked", so I can create an exclusion list. Is there a way to know "when" a row is "clicked" and if checked is false, I can fire an action and send it up to the parent. So, any way to get the unchecked checkboxes for the current display data?...

sensitive-blue

5/25/2023

keep table size with empty rows

When the number of rows is less than the page size, how to insert blank rows so that the height of the table is fixed and there is no blank space, similar to minRow = pageSize in the previous version

foreign-sapphire

5/24/2023

FilterFnOption does not pick up keys in FilterFns from declaration file

I'm using createColumnHelper to create columns, and for one column im trying to use a custom filter function. I do have this filter function registered in my Table, so table knows how to invoke it correctly. However when i go to build, i get this typescript error that its not assignable Type '"numberInRangeOptional"' is not assignable to type 'FilterFnOption<FooBarItem> | undefined'. Does anyone have any tips here? In my filter render i do check the column definition's filterFn for a render logic thing, but could change that to depend on meta.filter if needed....

equal-aqua

5/23/2023

Optimistic update with a patch method

Hello there, i'm trying a optimistic update (patch), it look like working good but I don't really know if my code is good for that. The goal is to update the status of my users. If anyone can tell my if the I do the thing are good or not. I'm wondering too if is normal that i can't get the total info of my user in the 'previousUser' ? It look like it return nothing....

code_update.txt

national-gold

5/22/2023

Implement @tanstack/virtual-core into @tanstack/table-core

Hi, is there anyone here using @tanstack/table-core along with an implementation of @tanstack/virtual-core to virtualize the table rows?

spiritual-aqua

5/22/2023

Passing props to table cell

Hey guys just started using react-table can anyone help me with how to pass the props to the table cell?

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