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
Look up row index from ID
How can I look up the actual rendered row index (after sorting, filtering etc) for a row?
I can't see any other solution than calling (a potentially slow) findIndex on table.getRowModel(), since the index field on the row unfortunately corresponds to the index in the original passed-in data array.
Is there no API for this?...
Is anyone using the alpha version with svelte?
Is anyone here using the alpha version of tabel with svelte 5? I switched to alpha because I am using svelte 5 but all the discussions on github are old, is it stable enough to use? has there been any updates lately?
The latest issue I am running into is that I am rendering my headers like this
```svelte
{#each table.getHeaderGroups() as headerGroup}...
Why AppFieldExtendedReactFormApi type is not exported?
While we have fieldComponents & formComponents, we might need also formCallbacks or at least exported AppFieldExtendedReactFormApi type.
In our application form has effect in whole page, so in v0 of Forms i put created form to a context and used in many places, avoiding prop drilling.
Now useAppForm returns value of AppFieldExtendedReactFormApi type. And I need to redeclare it locally. What was the reason to not exporting AppFieldExtendedReactFormApi?...
Filter columns based on the value of a formatted cell.
Hey all, using shadcn table for a side project. Having some trouble with filtering a column that has been formatted as the value within in each cell is pretty different from the default. Is there a property im missing here? I would ideally like to filter based off the formatted value and not the original.
Updating ColumnDefs question
Hi, our ColumnDefs change as a result of a state change - useReactTable does not seem to be applying the new ColumnDef instances after the initial create.
What is the recommended way to apply updated ColumnDef settings.
I could store as a custom property on the meta and and provide a setter for this. a sample setting is if the column is editable or not....
Anyone know how to stop flexRender from messing up Shadcn dialog/form tab order?
If I place my column header or cell impl directly in the table the tab order isn't messed up. I asked a similar question in Shadcn general: https://github.com/shadcn-ui/ui/discussions/7325#discussioncomment-13045899
Selecting rows with keyboard
If I want to allow shift/ctrl-arrow etc to select one or more rows in a TanStack Table, are there any goto libraries for that? Or should I just roll my own?
Column dynamic width
In these docs (https://tanstack.com/table/v8/docs/framework/react/examples/virtualized-rows) columns resize depending on width, but when I copied entire snippet to my project it doesn't? I'm ending up with what you can see on the screenshot. I'm using same version as in the docs. What I need is table which takes full width with certain columns wider than the rest
Disable auto resetting pageSize (similar to page index, but only for page size)
It appears that on data change, the
pageSize is automatically reset to the initial state. Is theer a way to prevent this, similar to the autoResetPageIndex option?
Thanks!...Help me please understand how to populate faceted filters on first render
Hey there. Im struggling to make react-select to work with faceted filters on the first render. When app loads options from faceted filters from the table computation are not present in react-select. Once refresh table (re-render) clicked the options show up. How can I make it so it they will show in 1st render too.
https://codesandbox.io/p/devbox/zen-joana-rz6fg5?workspaceId=ws_G2A9pv9f8cYKfsXyvYJaKX...
custom filterFn typescript type
How do I extend filterFn types with my custom filter?? i defnied my new custom filter in filterFns but typescript yells at me when I use it in the column definitions. Nothing in the docs shows how to exted the interface.
How to Retrieve and Set a Consolidated Schema for User action in Table for Filters, Sorts and more ?
I wanted to check if it's possible to define a table schema that captures all user interactions such as filtering and sorting for each column. Specifically, in scenarios where users apply both sorting and filtering across multiple columns simultaneously, is there a way to retrieve a complete and structured summary of all the actions performed—per column?
For example, if a user filters and sorts on the "size" and "name" columns, I'd like to receive a consolidated schema or data object that includes the applied filters, their logical connectors (e.g., AND/OR), and sorting directions for each column.
[...
Dynamic column minSize?
Hi all, I'm looking for a clean way to have dynamic minSize across my table, working along with resizing. Basically I want columns to have a certain minSize based on the container and never letting it go below that point, if larger then overflow no problem. Would be great if someone could give a pointer on how I could approach this.
Integrate Nuqs with Pagination
If I need to control my pagination with
nuqs I need to enable the manualPagination?Custom setup v8 in Svelte 5 (or just wait for v9)?
Tanstack installation docs:
https://tanstack.com/table/latest/docs/installation
NOTE: There is not a built-in Svelte 5 adapter yet, but you can still use TanStack Table with Svelte 5 by installing the @tanstack/table-core package and using a custom adapter from the community. See this PR for inspiration....
What is the best way to detect an empty table header for accessibility purposes?
It's an accessibility rule that all table headers (th elements) must contain text. If you have a header that is blank, it should be rendered as a td instead, so as not to mislead/confuse screen readers. Unfortunately, it seems like I have to explicitly set
header: '' on my column definitions to achieve this. Otherwise, the libray seems to set a default header function that checks if the column is an accessor column before returning null for the header.
It would be great to have some sort of utility header.isEmpty() or something to that effect; I am not sure how I can check it otherwise. Even the output of flexRender is non-null for empty headers, again unless the column def sets an empty string. I just want this to work by default so developers don't have to remember to set the header as an empty string.
Any suggestions?...Grouping / Expanding features
Hello, I'm currently looking to implement a feature where I need to expand some data. I've tried to achieve it looking at the documentation without success.
I'm trying to do something similar to this: https://glin.github.io/reactable/articles/examples.html#nested-tables
My table have rows and nested rows but the parent row does not have the same format as the children rows. It is mostly like having a nested table inside each expanded rows. In all the example I've found the parent rows mostly have the same structure as the children. (even with a similar structure the parent row displays columns that does not match with the children)...
Column Groups Bug
Hello guys I'm trying to use group columns but somehow this is the result. How to solve this, and each child be under his parent?
How to make reusable columns
Hello, i'm facing a bit of a problem trying to make my own column helper type deal since a lot of my headers are reused or are slight variations of each other.
I can't seem to make a function with generics that I could then customize:
```...
Reset Pagination manually
Hello! I'm using a server-side manual pagination. There are also search and filter forms, which which change what data the table receives. This works fine now, but whenever a user interacts with the pagination, and then interacts with filters or the search (say, user is on page 2/20), the tables pagination won't reset. So the pageIndex will remain the same. And I don't know how to reset the index.
I'm aware that there are methods for this case exactly, but I have a container component which is concerned with data fetching, and a table component which contains the tanstack table. So I can't really call
table.resetPagination() from the event handler that handles the search form submit.
What is the right way of triggering a reset of the table from outside?...