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

mute-gold

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

rare-sapphire

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 = () => {...

modern-teal

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

typical-coral

1/25/2023

Enums

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

frail-apricot

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

frail-apricot

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

noble-gold

1/21/2023

Add new Rows inside table at a position

Evening everybody. So I’m trying to create this UI with react-table. I got it up and running. What I’m trying to figure out is there’s four groups(scales,chords,songs,techniques) if I click on the plus depending which plus it is I want to add a new row under that groups names. So if I click on plus next to scales a new row should be added at the top of the scales group and if it’s songs a new row should be added at the top of the songs group. Anybody know if this is possible with react-table?

ambitious-aqua

1/20/2023

Creating a pivot table

Is there an example available of creating a pivot table? I can see on Github that pivoting is "coming soon". Do we know when, approximately, can we expect pivoting to be released?

fair-rose

1/20/2023

[v7] Upgrading from React 17 to React 18 - how to use strings as Cells?

Hi all, I'm currently in the process of upgrading a project from React 17 to React 18 and I'm running into an issue where previously, I was able to render strings as Cells for my column definitions. E.g. ``` { Header: t("common.from").toString(), accessor: (rentalOrder) => WDate.toSortString(rentalOrder.from), Cell: ({ row }: CellProps<SearchResultRentalOrder>) => WDate.toShortString(row.original.from)...

conscious-sapphire

1/19/2023

What is Placeholder in header ?

So I have 2 questions. I have been searching through the official docs but no luck. 1. How do we set the isPlaceholder as true or false for particular header ? 2. What is placeholder header used for ? I am guessing its used for not rendering any specific content or keep the header blank ? I am defining column like this. How do we set the header as placeholder header so that while rendering actual table header.isPlaceholder can be evaluated as true....

frail-apricot

1/19/2023

Select row if it is enabled for selection

Can someone help how should I select the row if my enableRowSelection criteria is fulfilled and vice versa and also the user can deselect the selected row. I tried this ``` useEffect(() => { table.getRowModel().rows.forEach((item, idx) => {...

sensitive-blue

1/18/2023

Manual Filter by clicking in buttons outside the column rendering

Hello everyone!! Just a quick question. Imagine we have 3 fixed filters. We can filter (example) every person who earns MORE than $ 10.000; another filter which shows those who earn less than $4.000; and the last one shows people older than 30y. I'd like to present this 3 options, so the user just need to click on any of these options, and the table will be filtered. How can I implement this scenario? Just reading the documentation does not made it easy to figured out....

fair-rose

1/18/2023

Need help on creating table with react

Can someone help me convert this table to tanstack table(react js with javascript not typescript) with filteration , pagination and search . thanks ``` <table className="table table-striped"> <thead> <tr> <th scope="col">Course Code</th>...

genetic-orange

1/17/2023

what's the use of flexRender ? how does this function work

Question Provided in Title

fair-rose

1/16/2023

Cell formatting

How do I write this column ```{ header: 'Link', accessorKey: 'url',...

exotic-emerald

1/14/2023

infinite scroll with server lazy loading and virtualization (react-window)

anyone have a best practice example ?

ratty-blush

1/13/2023

How to group columns dynamically?

Hello every one! I'm trying to group a set of movies by genre and then display in each row the main actors of the movie. But in my use case I need the group names and the column names to be dynamic, so if my backend just send me set of movies that just are: horror and action I should only see two groups called horror and action, then the movies of that genre and finally in the rows should appear the actors of that movie. This is what I got so far: https://codesandbox.io/s/focused-ives-gem5nr?file=/src/main.tsx...

foreign-sapphire

1/13/2023

Rowspan in react tanstack table v8

How can we set rowspan attribute for a td in react tanstack v8 ? In documentation we can clearly find examples for column group - https://tanstack.com/table/v8/docs/examples/react/column-groups but couldn't find any examples for row group. Would need to create something similar to the one shown in screenshot

fair-rose

1/12/2023

is there a way to extend CellContext/HeaderContext types

I want to add some information to the context, so that the function in cell/header can use it. in my specific case the table is operating on item ids only, and I'd like to get the item when I render the row and pass it to the cell render function...

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