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

foreign-sapphire

10/15/2022

Multiple Values in 1 cell

Hi guys, I need to map array of objects and render multiple values in one cell. The only way is to access props.row.original with needed array and iterate it? Like props.row.data.map(el => <span>{el.name}</span>) or there is something else?

rare-sapphire

10/15/2022

React Table v7 - Expanded rows

Hello, I have implemented expandable rows in my react component with 2 levels nesting; something along the lines of rounds > groups > matches So what i ended up having is a table rendering rows of individual rounds, and whenever i click one it will expand and a row of the relevant group will show up and so on...

sunny-green

10/14/2022

useSortBy sets descending on adjacent column not column that is clicked

Hello, I am using react-table to create a basic datatable with column sorting. I am adding an aria-sort attribute to the column headers (<th>) tags. What I am trying to do is make sure that when someone decides to sort a specific column, when isSortedDesc is true, the aria-sort attribute should get set to aria-sort='descending' otherwise it should be set to aria-sort='ascending' and if isSorted is true then set aria-sort='none'...

like-gold

10/13/2022

How to update table's data in vue-table?

Hi, recently I started a new project and we're using vue for it. I wanted to use vue-table since I've used react-table in the past... but I can't figure out how to update the data inside the table. Here's a snippet: ```typescript const table = useVueTable({ data: props.data, getCoreRowModel: getCoreRowModel(),...

foreign-sapphire

10/13/2022

How to type this case correctly?

optimistic-gold

10/10/2022

No results screen

How do I create a "No rows found" screen in table v8?

jolly-crimson

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: [...

subsequent-cyan

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?

xenial-black

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...

correct-apricot

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

equal-aqua

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 ?

absent-sapphire

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

equal-aqua

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

wise-white

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...

rising-crimson

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;...

fascinating-indigo

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. ...

deep-jade

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?

deep-jade

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?...

Previous Next

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