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
fully controlled table component that uses react-table.
I created a Generic table component that uses react-table under the hood and takes data as props and builds an editable table that allows users to edit cells and it launches an onChange event on the table component.
problem is, because new data prop keeps updating and everything is being rerendered, the performance is pretty bad. that made me think if there is a way to make a fully controlled table component for forms and such?...
Possible to update state via functionalUpdate by passing in updater manually?
I have a state like this.
```js
// Model
pageTokens: Record<number, string | undefined>;...
React memo with Row selection
Hi folks, I need your help with memorization cells.
I've wrapped cell with React.memo to prevent re-rendering on every render.
```cell: memo(({ row }) => (
<div className="flex items-center">
<Checkbox...
Horizontal Scroll
Hi - is there a way to make a horizontal scrollbar for the table visible at all times, and show immediately below the table (rather than relying on the horizontal scroll being at the bottom of the browser?)
Great Chance
Hello everyone. I'm Senior Software engineer.
I'm looking for a collaborator who can work with me.
Location: From anywhere
Budget: 3000 usd Monthly
working time: EST time zone...
Is making the DataTable a HOC a good idea? - Table is noticeably slow on row selection
```js
interface DataTableContextValue<TData> {
table: Table<TData>;
}
...
Has anyone used Table with graphql-code-generator's client preset?
At work, we use TanStack Table as well as the client-preset from graphql-code-generator. This lets us use fragment masking in our GraphQL queries. Basically, each component defines its own GraphQL fragment, and then it has to use an
useFragment function to get that data from its props.
This doesn't seem to work nicely with TanStack Table. We'll define something like:
```tsx
// UserCell.tsx...Select rows and send to another "selected items" table
I have a table of items and the first column in each row is a checkbox, which when selected, sends that item to another table for "selected items". These will eventually be saved to the database as a personalised list.
The selecting and sending works fine, and I can toggle items between the 2 table, but when I do anything to the main table, like sort columns, it also happens to the selected table. I want the selected table to be independent.
I have created two tables and separated the sorting and columns but it doesn't work:
...
autoResetPageIndex in useVueTable
Hi there
I'm currently in the progress of creating an editable Table with useVueTable but I'm struggling with the autoResetPageIndex. As soon as I edit something the pageIndex gets reseted. Here's my implementation which is inspired by the react example in the docs.
```...
Expanding Rows: how to expand custom data from an expanded row
Hi everyone,
I'm working on a table where I want to expand a row to display additional data. From this expanded data, I would like to allow further expansion to display custom nested data.
For example:...
How to pass external functions to Table Columns
Since tan-stack is saying to have a stable reference to the columns, how to pass external functions like state-setters to the columns, which in turn can be passed to the components used in
cell and header properties.
tried the hooks approach along with columnHelper (to get the correct types.). This resulted in more re-renders.
...implementing keyboard nav perf
i've found the easiest way to add arrow keys and j/k nav to my table is to do it in listeners per row. it is basically just the simplest code to write
i assume there's perf implications to this? attaching this listener per row is probably not a great idea i assume.
am i overthinking the importance of this? or is there a more ergonomic way to handle this?...
dnd disable prop
Hi everyone, I was wondering, how do i disable the dnd feature from the table in the cleanest way possible?
Help needed ðŸ˜: Editable Cells, total calculations, react-hook-form to handle data state
react-virtual table + react-hook-form (useFieldArray)
Link: https://codesandbox.io/p/devbox/vigilant-proskuriakova-w6hspc
Total
I'd like to ask for help: How to calculate the "total" values for rows with the same "category" if the cells are editable? (category is set in data for every item). I tried to use aggregateFn, but couldn't manage it.
Probably using the
useWatch on every "onChange" event to calculate the total is not efficient....Column filter dependant on expanded state?
I am attempting to filter based on a column value but have the filter exclude expanded rows, I was able to get this partially working with a custom filterfn.
The issue I am running into is that when the row is then collapsed the filter isn't rerun filtering the row away, any ideas?...
Virtualized table is laggy on scroll
I have no idea why its so janky - upon playing around with it seems like the height of the table and the estimated size plays some role into it?
This is my setup.
https://pastecord.com/vohogofoge.typescript...
Where to pin a row based on value
I have a requirement that all rows with a certain value are pinned to the top of the table. I'm using Row Pinning and it's all working great. However, I'm not sure where the best place to do the pinning is.
I tried in the column definition's
cell property, i.e.
```
cell: ({ row }) => {...Whenever you change an item on the other pages, it re-renders the table.
Can anyone help me? I have a scenario where I'm using a data table, and the list of items comes from a state and one of the columns is a select with options.
The problem is that whenever I change the information in the select by changing the value of a row that is not on the first page, I need to update the item in the state and with that the table is rendered again and returns to the first page....
next-intl and tanstack-table
Hello guys,
I'm working on a project which uses the
next-intl package and tanstack/table, I want to translate the column names but haven't found a way to do so.
I cannot import getTranslations nor useTranslations since it's a hook and it's used on a top level.
Can anyone look into this and give me directions or some help?...