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
How to create custom persister using realm ?
I'm replacing the redux/redux-offline/redux-persist with react-query in my react native app to manage serve side data. Since we are currently using Realm to offline first implementation, though we do have
createAsyncStoragePersister but is it possible to create custom persister using realm ?row index
Hi every one.
I want to add row index to table in columns array. How can i do that?
{
id: 'index',
header: 'index',...
How to pin column and scroll the rest of the table?
Hello people,
Given a Tanstack table with several columns in a React application.
As a user I'd like to see at all times the first column (e.g. ID) while I horizontally scroll the rest of the table (more columns than the screen can fit).
In Tanstack table there's the concept of pinning here:...
can I merge cells from the table body on V8?
I have 9 columns, but on a specific case, I need a row to be full width, aka, merge the 9 cells. I would normally do:
<tr>
<td colspan="9" />
<tr>...
filterValue.toLowerCase() is not a function
Hi all,
I'm using
@shadcn/ui 's Table component, and I'm getting the error filterValue.toLowerCase() is not a function. I'm not entirely sure where the issue is coming from, as one filter works but this specific one doesn't.
I'm filtering two different columns, brand and zone. Both are string values, but only brand works....
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[];...