TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

adverse-sapphire

10/9/2022

TypeScript, how to extend ColumnMeta type?

Hi. I would like to add new properties to the type od ColumnMeta. Is it somehow possible to do so without TS error? ```ts // Example of usage columns: [...

constant-blue

10/7/2022

How to update sorting on button click

heres sand box link https://codesandbox.io/s/runtime-resonance-lv2kj0 Same for group by ....

optimistic-gold

10/6/2022

AccessorKey accessing nested values?

Does accessorKey still support accessing nested values?

like-gold

10/6/2022

columnHelper header type

Hello guys, I am trying to map all my columns headers into array and expect to get array of strings, but this is not the case. Here is the code sandbox repro https://codesandbox.io/s/gracious-dew-ohxds1?file=/src/App.tsx...

harsh-harlequin

10/5/2022

flexRender not updating

So using the solid adapter, the flexRender doesn't update when the table state changes so doing things like changing the column order won't rerender the cells

other-emerald

10/5/2022

Render Image or component in cell or header based on value

I am struggling to find example for svelte, on how to build column definition, and potentially add custom parameter e.g. isImage: true which then when I render a table I can use value as an src for image and render image inside cell or header. How do I approach that ?

metropolitan-bronze

10/4/2022

How to make additional rows

somebody has an idea how to build that? the very first column has 3 other group of rows, object which is parent of security posts, security posts which are parents of users and users

modern-teal

10/3/2022

how to hide a cell excluding headers?

you need to hide only the columns, or rather the cells in the column, and display the headings

genetic-orange

10/3/2022

Row range select

Hi, I'd like to implement range select with shift + click, but I cannot find proper solution for this. There is possible way to modify this part with onChange function but I would like to use more cleaner way.
```cell: ({ row }) => ( <Checkbox checked={row.getIsSelected()} indeterminate={row.getIsSomeSelected()}...

ambitious-aqua

10/1/2022

Correct way to give columns different inputs (server side filtering)

Hello, what would be the correct way to give one of the table columns a different kind of input? For example, how can I make a specific column have a select dropdown, instead of a normal text input? Is this somehow achieved in column definitions? I see that in version 7 it used to be achievable in column defs through

Filter

Filter

which had the capability of returning a JSX component, however I cannot find an equivalent in React table 8? Thank you...

genetic-orange

10/1/2022

Optional Row Selection (passing data back to parent)

What would be the best way to handle rowSelectionChange in the parent when the table is the child? I have a component called table, which is generic and takes all kinds of tables (user, invoices, etc.) ```ts if (props.rowSelection) { state.rowSelection = rowSelection;...

absent-sapphire

9/30/2022

Subrows don't exist for row.getIsSelected()

I'm trying to select subrows when rows are collapsed https://codesandbox.io/s/fervent-meadow-qymqg0?file=/src/main.tsx You can see here, for the purposes of getIsSelected subRows don't exist until expanded. ...

magic-beige

9/29/2022

Paginated table with Remix

So i'm building a table in a Remix application with a select all checkbox, a checkbox per row, & pagination. I just noticed that when I try and select all on a table with 100 rows (in pages of 15), it selects all the rows as expected. But only submits the 15 that a rendered. Any ideas as to how to send all the rows?

magic-beige

9/29/2022

Selecting checkbox not updating row selection state

I'm trying to add a select all option to my table like: https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/row-selection?from-embed=&file=/src/main.tsx But it looks like checking my checkboxes isn't updating the setRowSelection state as logging the rowSelection always returns an empty object. I've attached screenshots of the relevant code below. Do I need to manually call setRowSelection anywhere other than in the useReactTable?...

correct-apricot

9/28/2022

Has anyone been successful implementing rowSelection and selected update on a button click?

I have been mirroring the example for row selection found here: https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/row-selection?from-embed=&file=/src/main.tsx But unfortunately the selected state does not update on button click, however I am able to select a row and view the data in the row, its just the state is always false even though I can retrieve the data and see the index of the selected row in the rowSelection state....

conscious-sapphire

9/28/2022

Can't perform a React state update on a component that hasn't mounted yet

Hi all, I am creating several tables and one is giving me grief. I keep getting the error 'Can't perform a React state update on a component that hasn't mounted yet' no matter how I structure it. Looking in console, I can see that the table renders twice, but I dont know why. The logs show: Creating Table Instance... Warning: Can't perform a React state update on a component that hasn't mounted yet Creating Table Instance......

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs