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

environmental-rose

12/6/2022

updateData in editable-data example (V8 help)

does anyone understand the updateData function in the editable-data example? Is this actually updating my data array? When I log to console it comes up as a blank array. I'm using the context API to bring in data for the table. It renders fine, but the updateData function doesn't seem to do anything. Am I just looking at this incorrectly?

foreign-sapphire

12/6/2022

How to get custom props in v8 (like getHeaderProps & getCellProps in v7)

Previously, I'd be able to add custom props to a column definition like so: ``` id: 'column-id', Header: ({ column }) => {...

genetic-orange

12/6/2022

How to get center rows height?

Hello, I want to get center rows height for my left/right rows. Any ideas how to do that?

deep-jade

12/5/2022

How to make nested row grouping using react-table please help

I want to create a nested grouped row in react-table can any one help.

ratty-blush

12/4/2022

How to get the data for a specific column

I want to fetch all the data that's present in a specific column

sunny-green

12/3/2022

How do you permanently display an aggregated non-grouped row?

I feel I'm missing something obvious. - It's to do with aggregation, attempting to use the internal aggregation logic associated with sum. max, min, etc. - I basically want to know the most performant (and readable/tidiest) way to permanently display a 'totals' row with the aggregated totals (sum) for specific columns. The only examples I can find are directly linked to Grouping of columns, which then provide the aggregated totals. But I don't need grouping in this instance. The other examples I see utilise the footer option. Here's an example of it in the brilliant material-react-table - thanks @KevinVandy and co. But I don't want this to appear in the footer....

flat-fuchsia

12/2/2022

Making a cell to be a react-router link

Hello, is there a way to convert a cell into a clickable react-router link within the columns definitions? For example, I currently have this: ```ts...

rival-black

12/1/2022

Add extra function to onchange of indeterminate checkbox

Hi guys, I have a question about the v8 Row Selection example for React: In that example a custom component IndeterminateCheckbox is created and then used as the cell value for the columns: ```ts <IndeterminateCheckbox {...{...

jolly-crimson

12/1/2022

What is `isPlaceholder` for? is it required to always check it in table headers?

I see it on every example but its purpose is not clear. All I can find is this: https://tanstack.com/table/v8/docs/api/core/header#isplaceholder

tame-yellow

11/29/2022

Freeze sorting on a column

Hi, I've defined an initial sort for one column in a multisorting table, and I'd like to always keep that column sorted no matter what other columns the user selects (so all other columns are effectively a "secondary" sort). I can get the initial state: ``` const [sorting, setSorting] = useState([ {...

continuing-cyan

11/29/2022

Access table methods outside

Hi, I have created Table component using tanstack-table. The Table component is uncontrolled as it owns all state it passes to useTable options. I would like to call a toggleAllRowsSelected method that above hook returns outside of my Table component. What is the correct way to achieve that? I can pass a ref to my Table component and assing result from useTable and then call it using the ref, but this feels like a hack....

automatic-azure

11/29/2022

React Table Editable example issue + paid help

I am not able to follow the example (https://tanstack.com/table/v8/docs/examples/react/editable-data) since it says I cannot use useState and useEffect as has been shown in the defaultColumn declaration. Feel like I am missing something simple here. This is the error I am getting - React Hook "React.useState" is called in function "cell" that is neither a React function component nor a custom React Hook function. ...

rare-sapphire

11/28/2022

Best way to use checkbox table

I have a global table component with react table checkboxes (child component). I want to use it on a page (parent component) and save the selectedFlatRows in the parent state. this is how I update the state from my table component useEffect(() => {...

optimistic-gold

11/28/2022

Is it possible to group rows by column groups?

Say you have a column group which contains two columns: 'firstName' and 'lastName'. When you group the rows by the column group (i.e. by the combination of firstName and lastName), the default behaviour is a single grouping row for the column group, which cannot be expanded (https://tanstack.com/table/v8/docs/examples/react/grouping). Intuitively I would expect to get multiple grouping rows at depth 0, one for each unique combination of values for the leaf columns from that column group. That is, one row grouping all the John Smiths, another grouping all the Jane Does and so on. Is there any builtin way to achieve this behaviour? It's possible to achieve a similar logical behaviour by grouping each of the leaf columns from the column group sequentially, (instead of the grouping column itself), but that can result in a deeply nested row structure which is quite unpleasant to work with from a UX perspective. In my use case, column groups can have up to 5 or so leaf columns. My current thinking is to take this approach, and wrap the grouped row model to flatten the relevant depths retrospectively....

stormy-gold

11/27/2022

How to set a default sort by using useReactTable?

is there anything I can use to have the initial load sorted a particular way? I checked the docs and could not find anything.

eastern-cyan

11/25/2022

Is there a way to use react table with a date range filter?

Currently looking into filters for my table but not sure how to implement filtering dates. Anyone able to help?

conscious-sapphire

11/23/2022

How to use with a HOC

I am trying to create a HOC for the following Table: ```ts interface DataGridProps<TData> { columns: ColumnDef<TData>[];...

fair-rose

11/22/2022

Filter Functions

Hi 🙂 How I set equalsString in configuration table for globals filter? Thanks 🙂...

vicious-gold

11/22/2022

Controlled Pagination and Selection in react table v8

I'm trying to combine these two examples: - https://tanstack.com/table/v8/docs/examples/react/pagination-controlled - https://tanstack.com/table/v8/docs/examples/react/row-selection I've done pretty much a copy-paste job to implement the combined feature. I'm seeing that the state stored in rowSelection state from the row-selection example is only keeping track of the current page's selections. When I go from page 1 to page 2, the selections on page 1 are still there....

conscious-sapphire

11/22/2022

Use expanded with both initialState and state

state: { expanded: {} } overrides initialState: { expanded: true }

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