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

adverse-sapphire

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

extended-salmon

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

sunny-green

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?

afraid-scarlet

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?

absent-sapphire

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

xenial-black

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

extended-salmon

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

fascinating-indigo

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

noble-gold

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

ambitious-aqua

1/17/2023

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

Question Provided in Title

exotic-emerald

1/16/2023

Cell formatting

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

ambitious-aqua

1/14/2023

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

anyone have a best practice example ?

flat-fuchsia

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

deep-jade

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

eager-peach

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

afraid-scarlet

1/11/2023

How to convert the column filter state into the format that the backend is excepting?

I'm trying to implement server-side column filtering for a table in my React app, but I'm having trouble converting the "ColumnFiltersState" object that I'm using on the frontend into the format that the backend (which uses the "nestjs-paginate" library) is expecting. The "ColumnFiltersState" object contains a "value" field that can be of type "unknown" and I'm not sure how to handle it. I have a couple of possible solutions in mind: One solution could be to use the "filterFn" property for each column, and pass in the filter operator that the backend is expecting (e.g. '$eq', '$gt', etc.) along with the value. Another approach would be to define a separate mapping function that maps the "ColumnFiltersState" object into the format that the backend is expecting, using the appropriate filter operator and value for each column, but then how we would know witch operator to use, maybe add custom meta prop to the coulmnDef. Can anyone provide some guidance on how to correctly map the column filters for the backend, and which solution would be the best approach? I would really appreciate any feedback or advice on the best approach, and even better if there is an example code to help me understand the solution better....

adverse-sapphire

1/11/2023

[solved][v8] pagination is driving me crazy

Hello, I'm using react-table v8.5.22 trying to develop a custom design system table component with optional features depending on passed props. My goal is to implement a main table component and a dedicated pagination component, controlling the main table pagination. One of the main pagination feature requested is to get/set url query params synched with the pagination state....

rival-black

1/9/2023

How to handle dynamic types for table rows (columns can be added or removed)

I am implementing tables in react with https://tanstack.com/table/v8. To create tables (and make the most use of v8's ts capabilities), I need to create the table with the column types. This works well when the table has a fixed number of columns with fixed types. However, I am building a table where you can add and remove columns and change their types (similar to Notion tables). So in this case, the type of the columns will be stored in the db and change over time. In the examples in the docs, we have the following type - ``` export type Person = {...

foreign-sapphire

1/8/2023

Module parse fail React-Table v8. Additional loader onStateChange required.

Hey. Can anybody help resolve this issue please ?

plain-purple

1/6/2023

Handle column visibility from a dedicated component

How can we create a ColumnVisibility component that lives as a sibling of the component creating the table? I tried creating a context in the parent component, getting the reference to the table in the ColumnVisibility component and readapting the code form the example but the checkboxes I use to determine what is visible don't get checked/unchecked until I close and reopen the column visibility dropdown.

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