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

sunny-green

6/25/2024

row selection checkboxes as the last column

I wanted to know whether it's possible to get the row selection checkboxes as the last row.

passive-yellow

6/21/2024

Does subrows must be of the same type?

Hello, I have a deeply nested object. Something like this ``` [company => { facilities => Facility[] groups => Group[...

other-emerald

6/20/2024

Is not sorting by cell content possible?

I have table where a column is filled with dates as strings. I get the dates from my backend in the ISO 8601 format as strings. Now I have a function, that converts them into the new format 'DD.MM.YYYY hh:mm:ss'. With that new format the sorting doesn't work anymore as I want (obviously because it is first sorting by the Day and not by year and then month). So is it possible to sort by the ISO format, but display the other format? In addition to this I have a global sort, which should use the new format and not the ISO one. I know this is maybe really tricky and not expected to work like that, so if this is not possible I fully understand, but it would be great if there is a solution to this....

fascinating-indigo

6/19/2024

Table Reactiveness

Hi, I am writing a data table using Tan Stack Table within a Next.js application. The problem I am having is with having the table react to a deletion of a row or multiple rows, or understanding how to do this properly rather. The initial data that populates the table is retrieved in a server component and then passed down to the table (client component) as a prop. I have a useState variable created, which when the component is mounted, is set to the data passed from the server as a prop. Is the right thing to do to make a request for the data from the server and set the data accordingly?...

exotic-emerald

6/14/2024

Can I pass a callback prop to columns if they are defined in their own file?

I am using an example mostly from the shadcn/examples/tasks file. I want to have a dialog that pops up for a couple actions. I don't want to render the dialog on every row, so I have been adding the <Dialog/> component to my Table, and then passing a setOpen callback to the prop. How can I pass a prop like this if my columns are defined in a separate file, that doesn't use hooks? GPT gave me this, is this correct? ```typescript...

national-gold

6/14/2024

Dynamic Checkbox Options Update

Hello. I have a table with a sidebar that has checkboxes to filter the table. The checkbox options are created dynamically based on the table's data. For example, "DC-DC Converter" appears because it's in the table. I made a custom filter, and it works. My problem is updating the checkbox options after filtering. If "DC-DC Converter" is no longer in the filtered table, it shouldn't be in the checkbox options anymore. I tried using table.getRowModel().rows to get the filtered data, but it didn't work. I want client side filtering for this since the table doesn't have lots of data....

xenial-black

6/13/2024

Filtering data without using a column

Hey there! I know there's probably a bunch of different ways to do this but I have a table that's essentially this one: Example: https://ui.shadcn.com/examples/tasks Source: https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/tasks/components...

exotic-emerald

6/13/2024

onSortingChange: undefined gives a manual sorted table

Hi! I have a custom Table component that I would like to use for tables with and without manual sorting. I expected that this would give me a table without manual sorting ``` manualSorting: false,...

flat-fuchsia

6/12/2024

onColumnFiltersChange problem

Hi guys can see this Q&A and help me ? https://github.com/TanStack/table/discussions/5002...

other-emerald

6/11/2024

getVisibleLeafColumns and getVisibleCells count mismatch

Hey. So when calling getVisibleLeafColumns k get expected number of columns (after holding columns) but when calling row.getVisibleCells it returns all the cells and doesnt exclude hidden cells...

quickest-silver

6/9/2024

adding new rows

i want to add an add more rows feature so i have extanded the table options and table instance i have add the setData function and i have give it a default function if no setData is passed as option ...

genetic-orange

6/8/2024

Table columns typing issue

Hi people, It's my first time using typescript on a big project, and especially because I generally don't use many component packages, so I'm really just confused on what type I should be using. ``` const columnHelper = createColumnHelper<Case>(); ...

exotic-emerald

6/8/2024

grokking deeply nested table data structure

I think i'm close but not getting any rows to render the values. I'm using the DataTable shadcn component. I have this deeply nested object that comes back with all the data about a tables fields: flat array of the columns...

rival-black

6/7/2024

getCoreRowModel not found in @tanstack/react-table

Hello, I am very new to using this library, and have been working through some issues using it. After uninstalling and reinstalling all libraries due to a duplicated instance of react, I am experiencing the following error: export 'getCoreRowModel' (imported as 'getCoreRowModel') was not found in '@tanstack/react-table' (possible exports: flexRender, useReactTable) I have searched the error code to little success. I have tried to uninstall and reinstall @tanstack/react-table using npm install @tanstack/react-table and also not gotten any results....

xenial-black

6/6/2024

Select all rows in a group if any subrow is selected

I have a simple requirement but can't seem to find a solution. I have a table with grouping, and the data already has an id field. I need all the subrows in a group to be selected/deselected if the user selects/deselects any single row in the group. In other words, it should not be possible for the user to select any individual row, only the whole group. The data is grouped by the batchId field, and I can use it in the function getRowId, but then React complains that the rows are not uniqu...

ratty-blush

6/4/2024

change column filter dynamically

I seem to be able to do this for global filters, as well as initialzation time (by setting filterFn in column helper), but I can't figure out how to do it on the fly. Any help appreciated I'm sure this is an easy one.. (BTW looking for custom filter functions here)

robust-apricot

6/3/2024

How to prevent column growth?

I try to create responsive table with pinned column. I also use size in columns def `accessor("actions", { header: "",...

broad-brown

6/3/2024

How can I filter data using date?

hello, so i've been having a hard time on how can I filter data using date, This is my data looks like ```...

quickest-silver

6/2/2024

Stop table header shifting ...

Hey all, I just wondered what strategies people were employing to stop table headers from shifting so much when loading in data ... I'd be curious to see what people are employing ...

conscious-sapphire

6/1/2024

Fetch next page

Hello, how to implement fetching data when trying to get next page?

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