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
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?...Select all table rows with server side pagination
I have table that displays data that comes from an api using server side pagination. How do I mark all rows as selected when the user checks the 'select all' checkbox in header? Because currently, when the user clicks select all, the rows of the entire page are selected, but not from the entire table.
I'm using react-table v7.
Checkbox column:
`{
id: "selection",...
Placeholder column span
Hi, I have a question about placeholder headers.
I have an array of
ColumnDef, containing two simple accessor columns, followed by a group column. When rendering the first (top) header group, I get two "placeholder" headers (one for each ungrouped column), followed by the group header.
I would like/expect to get a single placeholder header, with colSpan: 2 to span both of the ungrouped columns. I only want to render a single th element here, not two. Is this possible, without manually grouping the ungrouped columns?...Accessor for a column which depends on a component
In our app we have a concept of a "run", and I need to sort a table column "duration".
1. If the run is finished, back-end returns
createdAt and finishedAt for which an accessor function is easy to write: calculateDuration(finishedAt, createdAt).
2. The problem is, when the run is ongoing, finishedAt is undefined, and in the table cell, we use a React component which calculates currentTime inside a useEffect and shows the duration differently, using createdAt and currentTime. At no point is currentTime exposed outside this cell component....