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

quickest-silver

1/9/2024

How to implement tanstack/core with pagination & sorting?

Hi I want to create tanstack/core table in JS. Right now, I'm fetching data from api (paginated) and upon recieving its response, I'm creating the table object with its options & rendering the header and table cells. But I dont think thats a good approach as the state resets to initial if pagination or sorting changes. If someone has idea about it, please guide me through this. (Adding the tag for solid as there's no "core" tag)...

conscious-sapphire

1/8/2024

How to rotate the table in Tan-stack

Hi, want to rotate the position of table that header in the column position like this. Does anyone has solution for me

sunny-green

1/5/2024

row.getCanExpand() always false on expanding table

Im trying to make a expandable table but when I try customizing the cell for the expandable column, the row.getCanExpand() always returns false. I find no way to make it return true This is my comun def ```ts...

foreign-sapphire

1/5/2024

How to create a reusable table component in Vue

I am working with Vue and Typescript, and I am having issues passing columns and data from a parent component into a table component. Does anyone have a working example of a child table component that accepts columns and data as props? Or, is there a more idiomatic way to accomplish a reusable table component that might involve column definition from within somehow?...

crude-lavender

1/5/2024

cell hover event not getting triggered

Column def: ` columnHelper.accessor((row) => row, { id: "email", cell: (row) => { const member = row.row.original as User;...

quickest-silver

1/4/2024

Cannot assign columns

Hello I am very new to tanstack tables so this might be a dumb question but I am not able to assign the column definitions to the table. I am getting the following errors on vscode: ```err Type 'ColumnDef<{ name: string; quantity: number; amulet: number; }>[]' is not assignable to type 'ColumnDef<unknown, any>[]'. Type 'ColumnDef<{ name: string; quantity: number; amulet: number; }>' is not assignable to type 'ColumnDef<unknown, any>'. Type 'ColumnDefBase<{ name: string; quantity: number; amulet: number; }, unknown> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<unknown, any>'....

afraid-scarlet

12/31/2023

Header is there but the data is not loaded to the cell

Hi Everyone. I just explored tanstack table using sveltekit, i had a problem where the header is there but the data is not loaded into the cell i suspect either my writable code is not correct or the defaultColumn is not correct...

page.svelte.txt

extended-salmon

12/30/2023

Refresh datatable after delete from dropdownmenu

Hi i currently have a project where i use tanstack table, but ive run into an issue as i dont know how to refresh the table after i have deleted a entry from my table, i use a api call for deleting of the entry and question is what to do next? Data is fetched from my api . ``` await auth.deleteGroup(id); // group gets deleted by id, ...

multiple-amethyst

12/28/2023

horizontal scrolling

how to implement in react native?

optimistic-gold

12/26/2023

Access row data not defined by column

I am very new to TanStack Table -- sorry if this is a noob question... I have row data that contains stats about files: ```ts...

eastern-cyan

12/23/2023

Visibility

I cant figure out how I can hide an entire group column...

foreign-sapphire

12/23/2023

Column virtualization

Could somebody help to virtualize columns of this example? It seems that table renders all columns instead of visible. I tried to use rangeExtractor unsuccessfuly https://stackblitz.com/edit/github-ei2kl4-mlj26c?file=src%2Fmain.tsx...

optimistic-gold

12/22/2023

Disable horizontal scrolling by keyboard keys

Hi, does anyone know if its possible to disable that the keyboard keys scroll (left and right) horizontally through the table? I have not found an option to do so

harsh-harlequin

12/21/2023

Default sorting function puts number strings after alphabetical strings

why does the default asc sorting function put strings starting with numerical characters after strings starting with alphabetical characters??

optimistic-gold

12/21/2023

How to render cell based on condition

One of the columns i have is Status which can only be number 0 , 1 , 2 and so on and i would like to render the description based on the number where 0 will be showing pending on the table 1 will show approved and 2 will show done, How can i achieve this ? ```ts const columns = [ columnHelper.accessor('firstName', {...

eastern-cyan

12/20/2023

hide group

How can I hide a group column??

xenial-black

12/20/2023

How can I add filters like (equals, starts with, ...)?

Hi, how can I create filters such as equals, contains, starts with, ends with, between, greater than, greater than or equal to, less than, and less than or equal to?" Does anyone have an example repository? The docs are not helpful. like this:...

exotic-emerald

12/19/2023

how to type columns when using createColumnHelper

Hi, I recently asked a question on Github https://github.com/TanStack/table/discussions/5218 about typings for columns when using createColumnHelper(), does anyone know how it could be properly typed without using any?

plain-purple

12/17/2023

Svelte RenderComponent

Hi, I am rendering fine another component inside a cell in my table ``` cell: (info) => renderComponent(TokenLogo, { name: info.row.original.name,...

adverse-sapphire

12/15/2023

Lazy loading for expandable rows

Hello everyone, great days for all, my question is: if we have any guide how to implement lazy loading for expandable row ? I am trying to implement to by this guide https://github.com/nafeu/react-query-table-sandbox/blob/main/src/ReactTableExpanding.jsx it work but it makes subRows in my clicked parent row and i doesnt see subRows in table , when i examine in console, by table.getRowModel().rows method, see my rows in image 1, in row 1, in subRows i have my data but in row 2 with id: 1.0 my su...

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