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
Server side filters circular issue
In React, I'd like to collect columnFilters into an object that I use to fetch data from the server. However, to do that, I need the
table reference from useTable(). Now, in order to useTable(), I need to have data fetched (data: prop is required). But in order to have data fetched, I need columnFilters to make filters for server-side fetch.
Is there a good pattern of doing this, or maybe am I missing some part of the API?
I don't see server side filtering in docs examples either; seems like there is only client side examples....global filtering with svelte table
I need some help implementing global filtering and sorting using the svelte table adapter. There's no example for global filtering, and i'm trying to follow the sorting example but typescript isn't playing so well with it, now throwing alot of "any" around.
Virtualized table column size changing on scroll
Hello!
I am using the React Table v8 Virtualized Table example to set up a table in my app. I have set the
size of each column to 250 (also minSize and maxSize to the same value). Despite this, the columns resize on scroll. This behavior is not present in the example - but I am struggling to see the discrepancy between my code and the example code. The table has a fixed width set by table.getTotalSize() (behavior is present with or without this).
I have done some googling/ stackoverflowing and checked the GH issues but have not found an answer that is current/ sufficient. ...how do i get the resolved data?
Is there a way to get the raw data that the table has resolved? I'm trying to get the data to be able to create an excel export
header style
what is the appropriate way to add a style/classname to a column header? Does that go in the column def somewhere or do i need to do that myself in the markup?
url to image?
How to best transform a URL from db to render an image?
This it failing on my column definition. Do I need to add the transform differently?
```html...
Table State in URL
Anyone have a code sandbow for filter state im the URL? Im having a lot of trouble with this
Basically i want my URL query to be the source of truth for my tables filter state...
How would I open modal on table row click the easy way?
When user clicks a row, modal should pop up with data passed to row.
With react-hook-form?
Trying to build a table-form, and am wondering if anyone already did a good integration.
react-virtuoso + react-table (v7) - re-renders after initial mount
Hello everyone!
Does someone have
table-virtuoso + react-table (v7) setup without re-renders after initial mount?
I googled vurtuoso instructions - they give example of NON-inline declaring mui-table components
https://codesandbox.io/s/virtuoso-mui-expandrows-remounting-forked-89dzq?file=/App.js:3087-3096
and here is their INLINE example of react-table integration https://virtuoso.dev/react-table-integration/...Is there no 'maxWidth'/'minWidth' for columns in react-table@v8
Previously when building a react table with fixed-width + flex layout, we set proper min and max widths for each column, depending on the known requirements for each data type, which allowed us to have a flexy width that grows to fill the screen, while making sure that columns that have minimal max size don't hog the screen.
Are there no similar controls for tables in react-table@v8?...
Are there any plans to write JS examples to match the TS examples?
I'm trying to understand the examples, but because we don't use TypeScript I'm getting really confused and the docs are not helping because it is all written in TypeScript.
Any plans to write comparing versions in JS?...
Is it required to control state to use features?
I'm playing around with react-table 8, specifically sorting, and it seems like it's a strict requirement that I need to control the sorting state in order for things to work properly.
It's not clear to me in the documentation that this is necessary. I originally assumed that if I didn't control the state, react-table would handle it's own internal state correctly and the "useReactTable" hook would trigger a re-render. But my testing is leading me to believe that if I want sorting, I must control the "sorting" state.
Is this true or am I doing something wrong? If so, I'd be curious to know if this extends to all features, i.e. in order to use a feature (ex. column visibility) then I must start controlling that particular state....
Global Checkbox Select After Filter
Is there anything I need to do in order to make a checkbox in the header row work properly after filtering a table? I have a custom select component that filters the table base on unique values in a specified column. After filtering, the checkbox seems to be behaving as if the other rows still exist. I'd like for the table's state to update so that the only rows in the state are the ones shown after filtering.
Nested headers
Pretty much summed here https://github.com/TanStack/table/discussions/2070, is there a way to do this no? Seems like 3 years have passed, perhaps something has changed?
Keeping the URL in sync with the table state
I'm wondering if there is a preferred method to keep the URL updated with the table state. Ideally, I would like for a user to be able to bookmark or share a URL that will allow them to immediately render the table in a specific state. For example, have filters active, columns visible, sorting, etc. I am using Table v8 and Query v4. I am also using react-router but cannot figure out how to integrate the three libraries, in case react-router is the preferred solution.
Thanks in advance....
ColumnDef Spread Operator
What is the purpose of the spread operator on lines just below the "<IndeterminateCheckbox" JSX declarations? I pulled some code from your Row Selection example, and I have never seen the spread operator used in props outside of ...delegated (new to React / Typescript). Thanks for the help!
setAllFilters in column
I want to use "setAllFilters" which comes from the table instance, in one of my defaultColumns Filter component. Is it possible to make it available there easily?
How to avoid Decimal type error
so my
balance is return Decimal type
I want to avoid this error (web is work fine even it's error red line in vscode)...
Column based horizontal virtualisations
I am building a full scale, editable, sortable table using tanstack table. I have already added virtualisation to rows using the example provided at the website. However, I also want to implement horizontal virtualisation, and I am lost on ideas. The only thing that I could think of was virtualising th and elements but that would virtualise the headers and not the entire table. Any ideas on how this could be solved?
Any working examples will be greatly appreciated. Thanks!...