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
Custom sorting fn and undefined values
Hi, I am trying to implement a custom sorting function on categorical values but I have not succeeded so far.
I've put together the simple codesandbox below, where I'd like the undefined values to always show up at the bottom of the table, be it ascending or descending on the
status column.
Am I missing something in my implementation? Looking forward to any pointers, I've really spent way to much time on this issue...
Thanks
...Dropdown menu Filter for a table
How do I filter the dropdown menu items based on a search query before filtering the table itself?
Example of what I am trying to achieve.
Here I can search for a "Status" or "Priority" value and the list is getting filtered based on my search query without affecting the actual table. I have gone through the code of this specific UI but unable to figure out how the filtering in the drop down menu is handled.
...
Tanstack Virtual and Tanstack table
Hi guys, has anyone implemented virtual tanstack with tanstack table but with subComponents?
How to implement a controlled sorting-state?
Hey 👋🏽 ,
if I want control the sorting state of a
table v8 in react. Is this the approach to go?
```javascript
function MyTable({ sorting, data, onSort }) {
...Tables freezing once interacted with
Hi
I’m having an issue with tanstack tables, being freezing of the whole React application/browser after having a row selected, attempts to sorted, writing in search bar for filtering or navigating pages. Any ideas?
Thanks...
Changing cells based on state of another cell
I would like to change the content displayed in a cell based on the content in another cell. I'm not looking for a full or even partial code solution, I was just hoping someone might be able to point me in the right direction (e.g., is this something that can be done out-of-the-box?).
I've described what I want to do to below, but if you have any questions, please let me know 🙂
Use Case...
table.options.meta Typescript definition
Is it possible to define meta Typescript definition only for one table and not on global level how it is shown in documentation?
https://tanstack.com/table/v8/docs/api/core/table#meta...
2 expand columns to show 2 different sub-rows value
I have table with "name, email, A, B"
A and B are clickable to expand subrows. But I want to show different value for those. If I click A I want to show Image, and when I click B I want to show another image. Both can be expanded in the same time.
How to do that?...
error when accessing accessorKey
Hello, Im tryng to get the accessorKey property from each row and i get the following error:
though in the docs it says that its accessible, here is my code:
```...
Property 'accessorKey' does not exist on type 'ColumnDef<TData, unknown>'.
Property 'accessorKey' does not exist on type 'ColumnDefBase<TData, unknown> & StringHeaderIdentifier'.ts(2339)
Property 'accessorKey' does not exist on type 'ColumnDef<TData, unknown>'.
Property 'accessorKey' does not exist on type 'ColumnDefBase<TData, unknown> & StringHeaderIdentifier'.ts(2339)
How to prevent double click event when rows per page item has been clicked?
Hi everyone,
I'm using Tanstack Table to display a list of portfolios. Below the table I have an option to change the number of rows per page. When I change the number of items, the same click is also handled by the row item, which routes me to the portfolio that was behind the rows per page modal.
Below is a screen recording of the described issue...
OR condition on a globalFilter
How can I use a OR condition in my globalFilter?
I'm getting it like this
const {...
columnDef id and accessorKey
Hey guys! 👋
I'm trying to create a table with sorting and toggling column features.
so in my columnDefs I define the header component to enable sorting and hiding....
Toggle enableColumnFilters from initial options
There is this feature that needs to be implemented in a table component which allows to show or hide all column filters. Initially each column filter is rendered using "column.getCanFilter()" and we are able to set table.options.enableColumnFilters to false but trying to set it back to true is not working.
Is there any way to achieve this?
Any suggestion?...
Rows are not updating
Current i have a table that receives updates by a websocket, but my rows are not updating. (I can see the rows updates if i do for example a JSON.stringigy. Any ideas ?```{table.getRowModel().rows.map((row, index) => (
<SelectableRow
key={row.id}
$isInterleaved={index % 2 === 0 ? true : false}
>...
Making a rusable table column generic
Hello guys, I am trying to make a reusable table, but having a hard time making the columns props it takes a generic i've tried something like this ```type TableProps<
TData extends Record<string, unknown>,
TValue extends Record<string, unknown>
= {data: TData[];...
How to make one of the column not sortable?
I want to make column on the left ("#") is not sortable, how to do it?
How to filter table based on query params
Hi everyone, I'm having a difficult time trying to filter a table based on a
filters query parameter and am wondering if anyone has done this before?
My thinking here is that the filters will be passed in as props to my table component and it will filter automatically. There may be instances where the table will need to be filtered by one than one filter too.
I'm not even sure if this is possible or if there is a better way to do this, any advice would be appreciated. Thanks 🙂...React - How to Access Original Flat Row Data When Self-Managing Row Selection State
I have a table component where I have both the hook and the JSX to render the table. However, I want to be able to manage the row selection state outside of this component and have it in a parent component. I want to manage the state in a parent component so I can access the data of the selected rows, specifically the original row data for the selected rows in the parent component.
In the code below, I pass in getter and setter of the row selection state (
rowSelection and setRowSelection) to my Table component. When I access the rowSelection state in the parent component after I select the first row I get this: {0: true} . This isn't helpful to me. I want to be able to access the original data for that row.
I understand that from the table hook instances I can use getSelectedRowModel().flatRows to access the original data, but as I said before, I want to be able to access this data from a parent component, not in my table component where my table hook is currently....Set column filter state in the url
Hello guys, just trying to get the column filter state to and from the url.
Is there a way to do this without state syncing a useState hook? Anytime I try to pass the url params as the state when using useReactTable I get an infinite loop.
Also I have used zod to validate the URL params but even when I don’t use zod and i just cast them I get the same issue. I don’t think that’s the problem. ...
get enableRowSelection
Is there a way from the
table object to get whether enableRowSelection was set to true or false?