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

automatic-azure

7/7/2023

How to get selected rows data outside Table component?

Hi, I'm having trouble with getting selected rows data outside Table component: My table component looks like on the image. Do you have any idea how to access it in parent component ? Thank you for attention.

flat-fuchsia

7/6/2023

How to interpret the sizing options

Hi all, I'm looking at how to set sizing of columns. Somehow I feel that the minSize, maxSize and size all basically do the same thing, it just finds the lowest value of all 3 and then ignores all the rest. Reason I'm thinking this is after looking at the source code:...

wise-white

7/6/2023

Can someone explain why getSortedRowModel() is firing over and over again?

I have a table with data on it in my electron app, but for some reason as soon as I add getSortedRowModel to my useReactTable, my console shows that the table is firing getSortedRowModel() over and over again, making it impossible to actually do anything and causing a memory leak. my useReactTable(): ```typescript...

compatible-crimson

7/5/2023

Can table be used for building product lists with filters and sort?

I wamt to build a product list with advanced filtering and sorting. Is table component can be used for such a thing with similar ui like this?

national-gold

7/5/2023

Default sorting icon

How do I set a default sorting icon? I've seen some ppl suggest using canSort in an operation but it doesn't seem to exist in v8? I'm using the default sorting code w/ bootstrap icons ```...

ambitious-aqua

7/5/2023

PageCount not reactive

When I change the pageCount of my parent component, the tables page count .getPageCount()does not represent the current state: I already tried to explicitly set the page count through an effect but that does not work as well. ```ts const table = useVueTable({ get data() {...

extended-salmon

7/3/2023

Resizeable columns jump to maximum available width

I have this issue that can be seen on the video. I wonder if there is a way to make the table and columns keep their original uncontrolled widths when toggling the resizeability. I would want to have the table keep its initial design (which is solely determined by a hard-coded table width) when resizeability of columns is enabled. Does anyone have a good idea as to how I should go about this? Thanks!

afraid-scarlet

7/1/2023

When added new Row SubRow need already opened

1. Hello, added dynamic a new row to the table and me need already opened sub row. 2. I fined example when we use getToggleExpandedHandler() but I didn't understand how implemented if we have data=[{isOpne: true, name: "adasd" ... }] show sub row Thanks for your attention. 👀...

extended-salmon

6/29/2023

How do I set the isPlaceholder property?

I want to set a couple of header placeholders, but I can't seem to figure out where I can set them to true. Does anyone know the answer? The documentation just says there is an isPlaceholder property on the header but no API description is available. Thanks!

deep-jade

6/29/2023

How to make the width and layout of a table when loading data with skeletons?

How when using TanStack (React) Table can I load data using skeleton loaders, but have it so that the width of the columns and the layout of the table is the same whether it has the real data populating it, or the skeleton? I want it to be like this (img 1) when the skeletons are being used, but currently it's like this (img 2) - and I have no idea how to make it the same width 🤔 Any help would be very much appreciated! Thanks a bunch....

fair-rose

6/29/2023

Sticky rows @ top/bottom

Is there a(n easy) way to put rows on a fixed index position? I want to create a datatable with sorting but keep the row + subrows on a fixed position. Because the row also have subRows I cannot use the footer for it right?...

other-emerald

6/28/2023

Conditionally render tooltip dependant on state

I have a table and would like to conditionally render a tooltip on hover of a cell. Is this possible? My content is conditionally rendered outside of the table, but won't work when adding to the cell....

evident-indigo

6/27/2023

Calculate aggregated cell value based on parent row and child rows

Good day everyone, i have a problem to migrate my aggregation function from v7 column definition to v8 column definition. My main problem is, that if the aggregationFn runs I need to know about my position (row) to decide if it makes sens to calculate a cell value or return a default value. In addition, if I decide to calculate the cell value, I need to get values from my direct parent row. Example:...

extended-yellow

6/27/2023

Good expanded row examples

Having a tough time with the docs here. Surprise since the query docs are so great! I'm looking for a good codebox example that allows grouped rows with more cols than the table....

flat-fuchsia

6/27/2023

Table Cell backgroundColor depending on a number value

Hello, How to set the color of a number (eventually the backgroundColor) in a column depending on his value? I'm search a lot but there are very poor documentation especially for the old version 7.

{ Header: 'Bank balance',...

national-gold

6/26/2023

sum rows of some columns

I would like to add the values of the lines of some columns and add them below the header or in the footer, how can I do this?

magic-amber

6/26/2023

Filtering based on object

Hello, i'm trying to filter this column

``js
columnHelper.accessor(
      row =>

${row.piiData.phonePrefix.phonePrefix} ${row.piiData.phoneNumber}`,...

xenophobic-harlequin

6/25/2023

Filter by multiple tags (array) ?

Hello everyone, I'm reaching out because I'm new to tanStack/react-table and I'm seeking guidance on implementing a specific feature. I would like to enable users to filter contacts based on multiple tags. To illustrate, if a user selects [tag1, tag2], I want to retrieve all contacts that have both tag1 and tag2. Unfortunately, the documentation doesn't provide clear instructions on how to achieve this. I would greatly appreciate any assistance you can offer regarding this matter. Thank you! ```js...

ambitious-aqua

6/23/2023

Get highest value in column

This probably isn't that hard, but I can't seem to figure it out. I don't want to change the order the rows by the value, I'm trying to style the cell that has the highest value in one particular column.

xenial-black

6/22/2023

one of columns in my table show delete button. And I want to pass row data to this button

```jsx export function DataTable<TData, TValue>({ columns, data, }: DataTableProps<TData, TValue>) {...

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