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

fair-rose

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

graceful-blue

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

sunny-green

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

harsh-harlequin

1/8/2023

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

Hey. Can anybody help resolve this issue please ?

xenial-black

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.

harsh-harlequin

1/5/2023

How to pass custom data to a row object in react table?

Hi all! I have a question: Is it possible to pass custom data to a row object in react table? And how can i do it?

fascinating-indigo

1/5/2023

How to implement TanStack table using API in react?

hello, I'm new in tanstack table! I can't understand the flow of this table! Can anybody tell me that, how can i implement tanstack table using an API? my goal is: I'll collect data from api and then according that api I'll show data using a tanstack table!...

continuing-cyan

1/5/2023

Is it possible to configure NoDataComponent on V8?

This is an option with V6 API, I want to do the same thing with V8 - is it still possible? If not, what's the recommended way of doing it?

quickest-silver

1/4/2023

getCanSort() returning false

I have a simple table built by passing in a data and column object from json data to useReactTable in the TableWidget.js file there are two // todo - ... comments outlining issues I'm having the first and main one being that I am unable to sort any of the columns as canGetSort is retunring false ...

wise-white

1/4/2023

Transpose column and row

Hey guys is that possible to transpose column and row as i would like to view the data as column and row as the key .

flat-fuchsia

1/3/2023

How to get total size for table when paginated?

Hello, Does anybody know how I can get the total row-count for a paginated table from the table object? If i call:...

xenial-black

1/2/2023

How to calculate a cell value that depends on other cells in the same row that are populated async?

I have a table who's cell values are calculated asynchronously. Each cell has a component which takes cares of fetching the correct data based on the accessor key. I'm now trying to add in other columns which don't do anything other than take some of those cell values and do some math on them, for example: There is a budget and a revenue column who's render value gets populated asynchronously. I want to add in a "ROI" column that should display the result of (row.revenue / row.budget) * 100. I'v...

xenial-black

12/28/2022

Integrate Tanstack table with array of array

Hi everyone. I got a type error when I tried to implement a table with an array of array data. The typescript error message is as follows: ``` Type 'Bids' is not assignable to type 'Bids[]'. Type 'number[]' is not assignable to type 'Bids'....

stormy-gold

12/27/2022

columns from array of users

if i have a data structure like this: ```ts type Data = { name: string, users: User[], }...

flat-fuchsia

12/27/2022

Svelte Table

Hey everyone I have some questions for working with Svelte I am trying to do onMount and fetch the data back and use the data as defaultData, but I couldn't make sure the createSvelteTable runs until data is ready. Is there any way I could make sure my data is ready before running createSvelteTable? thanks in advance...

quickest-silver

12/27/2022

Global search in Row Example not working

Does anybody know why the Global Search is not working for the Row Example?

quickest-silver

12/26/2022

Why isn't the Global Filters accurate?

As you can see in the image, entries that don't contain the search words are returned

conscious-sapphire

12/24/2022

Row DnD on Mobile devices

So I was wondering if it is possible to make the Row DnD work on mobile devices? I currently have a similar implementation as is in the example, but when I switched to test it on mobile I noticed dragging does not work. Then I tried the example and I saw it does not work there either? Anyone got an idea to make it work on mobile devices, as the desktop implementation does work perfect for what I want!...

fascinating-indigo

12/24/2022

How can I prevent refetching

Hi guys I am using the tanstack with trpc but currently it refetches if I revisit the page, is there a way to prevent that? Currently fetching like this: ```ts ...

rare-sapphire

12/24/2022

How to use colspan or something like that?

Is there a way to use colspan? Or use column group but with only one header? Doc example: https://tanstack.com/table/v8/docs/examples/react/column-groups...

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