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
Tips on typing ColumnDef for a table with expandable rows
Hey folks - I'm currently implementing a table with expandable rows and looking to see if anyone has a decent pattern for typescript. Basically, my parent rows have a type of
Parent and the child rows Parent['children'][number]. They will both display their name in the name column but each type uses a different key for that data. Also, most of the columns will be dedicated to child row data.
Unfortunately, typing the columns like ColumnDef<Parent> results in TS assuming every row implements the Parent type. Does anyone have a good idea for this besides massaging the data and using a discriminated union?...Will invertSorting work for server-side sorting (manualSorting : true)
Will
invertSorting work for server-side sorting (manualSorting : true)Row Selection not reactive
Hi again
I have tried following the row selection guide (https://tanstack.com/table/v8/docs/guide/row-selection), however I'm not able to get a simple checkbox to correctly work with the indications at the end of the guide.
What should be the correct way to get reactive stores (or similar) using the alpha release?...
Is there any theming or styling system to just plugin some existing styling?
Ideally looking for things to look nice using bootstrap without much manual styling required
Styling thead and tbody depending on groups
I am trying to style a table according to the groups the data is divided into. I need for example, the top row which shows group names to be white and then the actual column names to be a different colour(blue-grey). But also only to show some group names. This is what I have come up with and it seems to work but seems a bit hacky. Is there an easier way using TanStack Table?
``` const getGroupNameFromId = (headerId: string, headerGroupId: string) => {
if (headerGroupId === "0") {
const parts = headerId.split("_"); // Split the id by underscores...
Dynamic getGroupingValue - trigger re-grouping
I have a date column where I want to support grouping by year, quarter, month or date.
Whenever the grouping type changes I need to set a new getGroupingValue function to get correct grouping.
However, setting this new function does not trigger a re-grouping of the rows.
Is there a way to trigger a re-grouping of the rows?...
Aggregating on subRows
I have a use case where the parent row is an aggregation of the child rows. I'm reading the docs on aggregations but I can't find any examples of leaving child rows to render themselves, but aggregate the parent column. As a result, my current accessor is very complicated. e.g.
```
columnHelper.accessor((row) => row, {
id: "profit",...
How to disable sort on subRows?
The docs talk about sorting in expanded rows and states that it's the default sorting strategy but it does not say how to disable the default: https://tanstack.com/table/latest/docs/guide/expanding#sorting-expanded-rows
In my case the order of the sub rows is important and I do not wish to sort them. It also complicates sorting my parent rows.
Has anybody figured out how to do this?...
Drag n Dropping Grouped Table Headers
Is there a way to reorder/drag header group columns around?
DND works with single header rows, but doesn't seem to reorder if depth is more than 1...
Why tanstack-table doesn't follow rules of React? What is the best practice around it?
Basic memoization breaks this library. For example this component will never re-render, because table reference never changes, full example - https://codesandbox.io/p/devbox/quizzical-elion-v8dgdf?workspaceId=431a9e26-3dfd-482b-b3a3-641002cbf4d6
```typescript
const RowsMemo = React.memo<{ table: Table<Person> }>(({ table }) => {
return table.getRowModel().rows.map((row) => (
<tr key={row.id}>...
Rendering cells that include input - v7 to v8 migration
Hi folks!
I'm having a small problem migrating the table to v8.
I have some wrappers around the basic
useReactTable, and I've migrated the columns and the markup and everything that's needed, and it works well for the most part.
I did everything according to the migration manual....Unreactive sorting
My sorting isn't updated reactively and I'm guessing it is because it is not based on the row object itself changing, but rather external variables.
The cell value is reactive and works perfectly fine.
I'm guessing the cell value updates when the accessor function triggers it (which is a
computedRef in my case), but the sorting function is only based on the row object changing....generic column cell helper function
is it possible to have a type-safe cell helper function like this? so that it does getValue() for me and I can access it more easily
```
function cell<TData, TValue>(
f: (value: TValue, orig: TData, props: CellContext<TData, TValue>) => any...
is @tanstack/react-virtual necessary to build a table in CRA environment?
when do i need @tanstack/react-virtual ? I know it is required when to enhance performance. but what else? Is it necessary even though performance isn't important at all?
Global filter function not being invoked
Looks like even if I create a custom globalFilterFn, nothing is being invoked when the the setGlobalFilter is changed. I don't have any nulls in the data, I've tried removing the globalFilterFn, I've tried a custom filter function and console logging inside of it. That is not being logged. The global filter state does update when I look at the table state. Any help is so much appreciated 🙏
Possible to get custom/dynamic cell data in the sortingFn?
I've got a column that dynamically renders content based on the column accessor (it's a unique value that I'm passing to a query inside of the
cell render function.
Is is possible to grab the value that's actually rendered, and sort based on that? Right now it's only filtering based on the value from the column accessor, and I need it to sort based on the text that's actually rendered....Grouping data but keeping select column first
Hey, I am using the group feature of the table, but I have a select column which I would always like to have first instead of the column which is currently grouped by. How can I do that?
Table internal state vs external state
I am using Next with tanstack table and holding filters in page search params. Using nuqs library for this. All filtering is done through an API, no client side filtering.
Does it make sense to keep column filters and global filters internal and then sync when changed or just disable all internal table state and just change out the data?...
Anybody having issues with getting the header to stick?
For some reason the
TableHeader won't stick even though the table has a height to it. Getting confused. Been trying a bunch of different stuff.
```js
<ScrollArea
className="h-full"...