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

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

stormy-gold

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

equal-aqua

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!

fascinating-indigo

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

equal-aqua

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!

complex-teal

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

flat-fuchsia

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

constant-blue

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

conscious-sapphire

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

eager-peach

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

exotic-emerald

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

absent-sapphire

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?

metropolitan-bronze

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}`,...

absent-sapphire

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

other-emerald

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.

correct-apricot

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

adverse-sapphire

6/22/2023

ColumnHelper docs?

So I'm reading docs on Column Defs and I see they use the createColumnHelper to create their columns. Docs: https://tanstack.com/table/v8/docs/guide/column-defs

const columnHelper = createColumnHelper<Person>()

const columnHelper = createColumnHelper<Person>()

...

adverse-sapphire

6/21/2023

How to handle pagination outside of the component `table` is defined in?

I just started using tanstack table today. Mostly going from the example on https://ui.shadcn.com/docs/components/data-table However I'm having quite some trouble making it re-useable for more than just a single table... I would like to turn it into an API like this:...

eastern-cyan

6/21/2023

Example with Django Rest Framework

Currently I am using a stack of a Django backend and a Next.js frontend. I'm trying to implement a Table component with custom pagination, ordering, filtering and searching by the API endpoint. This can be done with e.g. api/products/?search=foo, api/products/?ordering=created_at,-name or api/products/?color=blue, or all together forming a query together. I cannot seem to figure out how to combine this with the useTable hook. Any help welcome! I am using shadcn's Data Table for UI if it is worth noting: https://ui.shadcn.com/docs/components/data-table#pagination...

sensitive-blue

6/21/2023

Sorting with Headers generated from an Array

Hello! I'm currently learning how to implement a tanstack-table and I think I hit a wall. The app is basically a stat calculator and stat viewer for a game (Fire Emblem). I would love to know how to properly create a sort function from headers generated from an array. So my data has a CharData[] type. ```ts...

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