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

fascinating-indigo

2/3/2023

What is the "size"'s unit?

In the docs https://tanstack.com/table/v8/docs/api/features/column-sizing, I'm not sure what the numbers are supposed to mean?

other-emerald

2/3/2023

Table with Vue 2.7.X

Has anyone managed to use the table with VueJS 2.7.x?

fair-rose

2/2/2023

Listen for table state changes ( like sorting, filters etc )

Hi, is possible to create a useEffect that triggers each time the state of the table changes?

fair-rose

2/2/2023

Save column filters externally

Hi, I wanna save column filters in an external variable ( to put those on URL ) I've tried to read columnFilters from the state but I always get an empty array. ```ts...

inland-turquoise

2/1/2023

Pivot table / has_many relationship

Hey all. I have a table that is structured as: ``` create table Question { id uuid,...

foreign-sapphire

2/1/2023

Autofill cell values by dragging a handle across multiple cells

Hello, Is it possible to have autofill by dragging a cell value like in excel? Here's an example of what I mean https://handsontable.com/docs/react-data-grid/autofill-values/...

like-gold

2/1/2023

Type error, No Overload matches this call

In the following sandbox it's not obvious to me why I'm getting an type error on line 58. I'd expect there to be a value in "getValue". Info is typed as info: CellContext<TComicBook, unknown> which seems wrong. https://codesandbox.io/p/sandbox/wizardly-gates-svrzc9?selection=%5B%7B%22endColumn%22%3A6%2C%22endLineNumber%22%3A78%2C%22startColumn%22%3A6%2C%22startLineNumber%22%3A78%7D%5D&file=%2Fsrc%2FApp.tsx Additionally on line 85, I'd like to access the 'header" value but there doesn't appear to be a way. Just the id...

optimistic-gold

2/1/2023

How to assign value to subrows in react table v7?

https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/expanding?file=/src/makeData.js Reference to this example. It is showing the subrows data in the table. Everytime sub rows data should be on exact same name as subrows ? How can i assign values to subrows directly instead of mapping all the data again and rename it to subrows....

optimistic-gold

1/31/2023

How can I add sub rows and access the desire data to show under

data = [ "id": "90e361ec-9245-4bae-bfe1-7afdb0ff5742", "product_id": "afaf sd fgd", "name": "Item no 3 edited after this sd safa", "product_type": "item",...

fascinating-indigo

1/31/2023

column fixed width

can anyone point where to put size?: number to have a specific column with a fixed size?

generous-apricot

1/30/2023

What is the correct way of using useInfiniteQuery?

  const [pagination, setPagination] = useState({
    offset: parseInt(router.query.offset as string) || 0,
    limit: parseInt(router.query.limit as string) || 10,
  });

  const [pagination, setPagination] = useState({
    offset: parseInt(router.query.offset as string) || 0,
    limit: parseInt(router.query.limit as string) || 10,
  });

...

decent-aqua

1/30/2023

How can I prevent Display Column from re-rendering?

I have an action button in my display column which trigger a drawer. I don't want this column to re-render and close my drawer when I update a state which trigger the table to re-render.

absent-sapphire

1/29/2023

How do I set the default column to sort?

Hi, I'm making a table for a log of user infractions and im wondering how I can make the items sorted by the caseId in a descending ```ts let defaultColumns = [ columnHelper.accessor('caseId', {...

rare-sapphire

1/28/2023

Using Table as a Scoreboard

I am using Tanstack Table v8 as a scoreboard in a table format. Each row in my table represents a competitor in the competition with a score column. I am wanting to display a gold, silver, and bronze star next to the rows in 1st, 2nd, and 3rd place. My table allows for sorting and filtering. ...

fair-rose

1/27/2023

How to set filter function on a column after useReactTable hook ?

This snippet doesn't work ``` const table = useReactTable<TableType>({...}) table.getColumn("date").columnDef.filterFn = () => {...

rare-sapphire

1/25/2023

rewriting my table to react table

Hi! I have my current table but I wonder if its possible to make it work with react table. Im mostly concerned about one part because currently I have a little small icon that let user add Item to favorites (i use trpc to handle that on click) ``` Tbody Items.map(Item => (<ItemComponent Item={item}/>) Tbody...

correct-apricot

1/25/2023

Enums

what is the recommended way to use an enum in one of the columns?

conscious-sapphire

1/25/2023

How do I optimize the table for lots of row?

There are 2000 data to render with react-table and the table is very slow. How can I optimize this table?

optimistic-gold

1/23/2023

Mark Initial value of Checkbox Checked of a single row of a table.

I am using checkbox that can select only a single item from the table and now i have got the selected item ID from an Api in another component. Now I want to show the table again but with checkbox marked checked OR How can I mark a specific row checkbox checked while all other checkboxes unchecked. ...

conscious-sapphire

1/23/2023

Add lazy loading to subrows with maintaining parent child relationship of data

Using the react-table v7 library, I'm making a table. The data I'm supplying in this table is prefetched and saved as JSON. This JSON file has the formatting that react-table requires. But My data is very vast and has numerous deep hierarchies. Expanded option tables are what I'm making. When I feed this data into a react-table, the rendering takes too long, which slows down the application's overall speed. ...

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