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

national-gold

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

ratty-blush

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

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

sensitive-blue

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

stormy-gold

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([ {...

absent-sapphire

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

foreign-sapphire

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

stormy-gold

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(() => {...

firm-tan

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

correct-apricot

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.

sunny-green

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?

metropolitan-bronze

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

vicious-gold

11/22/2022

Filter Functions

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

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

metropolitan-bronze

11/22/2022

Use expanded with both initialState and state

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

afraid-scarlet

11/21/2022

Table with different columns in sub row

Hello everyone, is it possible to make such a version of the table using react-table? [React table v8] So that after clicking on the cell table, a table with additional information opens, with its own header and content that does not look like the main table...

afraid-scarlet

11/18/2022

Additional keys in ColumnDef object

How to add additional key in ColumnDef object, I have been trying to go through meta property but didn't able to get any success so far any help would be great

foreign-sapphire

11/17/2022

[v8][react] Client-side column sorting across all pages (pagination & filtering also client-side)?

Hi, I have a TanStack v8 React table that's too large to fit on one page so I added pagination. But sorting a column only sorts the current page, not all the data. Client-side filtering (via text input search bar) on the other hand correctly filters across the data across all pages. How can I fix this? Thank you!...

conscious-sapphire

11/17/2022

Multiple column groups + toggle visibility

Hi 🙂 We are working on a big admin table. In the design we have some of the columns that have a toggle button in the headers which should show/hide 1-3 additional columns to the right of the clicked column. ...

correct-apricot

11/17/2022

2 buttons in a column

How do I do this?

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