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
prevent crash with large data set (~2 mil entries)
I'm trying to get a virtualized table to work with a data set of around 2mil entries, but as soon as
table.getRowModel() gets called the tab crashed. Now i was wondering if there is a approach that would work in my case, or any other suggestions.
repro: https://stackblitz.com/edit/tanstack-table-fcnlfz7l?file=src%2Fmain.tsx (example from the docs with data size increased to 2mil)...custom row selection state
hey. is there any way to get the whole row data object for the selected row in row selection state? row selection state defaults to index of the row or we can change it to
row._id. But i want to get the row selection state just like how AG-Grid returns it, that is, array of objects, where objects correspond to the row data for each selected row.Server-side Pagination
I have the following setup at this moment
```ts
// Async component to load data
...
🤔 Architecture Question: Using React Table for non-table filtering?
I'm building an analytics page with multiple charts and graphs, and I need global filters that apply to all visualizations (date ranges, status filters, custom fields, etc.). I'm inclined to use Tanstack Table, but would like your input.
Here's the context:
- Already using @tanstack/react-table extensively for our main data table
- Have a sophisticated filtering system with URL state sync, custom field support, and reusable filter components...
Sveltekit tanstacktable sizing
Would like to ask about svelte implementation of tanstack. I can't set columns to specific width nor can I implement user column resizing. Is this just not ported to svelte implementation?
Race condition when updating table data
Hi!
I have a rather basic shadcn styled table that shows info from a database. Before the table is a dropdown to select an infoset.
The data itself works well, editing works, pushing changes to the server works too.
But showing info only works initially. When I show table and want to select a different dataset, it fetches it and then sets a
useState variable which holds the shown data. But it just does not re render for some reason. ...Override table.defaultColumn’s custom cell renderer at the column-definition level.
I have a table to which I pass a
defaultColumn option with a default cell render. In this simplified example I'm just making it so that each value is rendered as a red div.
But then, in certain cases, I want to wrap this default cell render with my own component to extend it. But I can't figure out a clean and good way to do this. Essentially what I want to achieve is this:
```tsx...Row expanding with different data set
Does tanstack table support row expanding feature were the child rows are of different type than the parent type ? Something like a nested table within each row ,,
Why does `useReactTable` need `columns` and `data` to be mutable?
I was trying to use tanstack table for the first time, and my API is typed as deeply
readonly, and I'm surprised tanstack table seems to require "write permissions" on the data and columns arrays
```ts
const { data } = useQuery(...)
// ^? readonly Foo[]
useReactTable({...Column Filtering: when column is an array?
Example Data:
```ts
export const data: TeamMember[] = [
{...
Good Server-Side DataTable Component Examples? (no nuqs)
Has anyone come across some really neat datatable components out there? I'm trying to implement a potentially complex server-side version of ShadCN's data table (that uses TanStack) and the best examples I can find are OpenStatus (https://data-table.openstatus.dev/) and Dice (https://www.diceui.com/docs/components/data-table) and while they're both SO good, they rely on nuqs and my app is basically an SPA as it has no routes etc. but there are going to be multiple data tables
Resizing with flex containers
In Tanstack Table, here is basically what I want to do. I have a table like UI using divs. Each row is a flex container. This way I can say how much space a column should take relative to others. I want to introduce column resizing. So what I want to do is when initially rendered, the columns should take the width according to flex rules and those columns must be able to be resized later. The problem is when both width and flex properties exist on the same element flex takes over and the column...
Enable sorting on a column level
I am using tanstak to build a table and I want to including sorting on specific columns. What I want to do is disable sorting globally but then enable it at the column level.
I have set
enableSorting: false in the useReactTable hook which turns off sorting for everything as expected. But when I go enableSorting: true for a column, it doesnt enable the sorting but still uses the tables default.
Is there something I am missing or do I have to do it the other was and disable sorting on columns I dont want to sort. Ideally I dont want to do this as there will be more columns disabled than enabled so I would rather enable the ones I want sorted rather...Accessing filtered rows in column defintions
What would be the best way to access the filtered table data in the column definitions. For instance, imagine I want one of the columns to show a count for the number of subrows that it contains which match the current filter. How would you do this? Do you have to manually do this within the table component itself in order to access the filtered row model or can you do some trick?
how to get current filterFn (filtering algorithm name)
Hi! I need an urgent help!
How can i get current filterFn for column? (Current filtering algorithm name)
i need to get a filterFn name to send to the server....
customAggregation
Hey anybody can you help me explain how to make work custom aggregation fn ?
aggregationFns: {
myCustomAggregation: (columnId, leafRows, childRows) => {
console.log(columnId, 'yolo');...
Should I use TanStack Table to handle my custom "row" components?
I want to layout my table data into a list of components that look like the attached picture. And I was wondering if I should or shouldnt use tanstack table to help me give this list/ grid of items filtering, pagination, and sorting.
Is it a sin to use tanstack table on something that doesnt exactly look like a table with rows?...
Update options.meta
The meta never updates / rerenders when using the table.setOptions function``` header: ({ table, column }) => {
const loadUnit = table.options.meta?.loadUnit;
return (
<div className="flex items-center gap-2">...
Table doesn't scroll vertically
I'm using tanstack table, but unless my table is the direct decendent of a view with a predefined height it does not scroll. Creating a div with some elements inside of it does scroll, but using tanstack to manage the state for that same exact grid prevents scroll. I'm assuming this is a known behavior, I'm just not sure how to address it haha.