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
Seeing header but not rows
The code below gives me a table with a header row, but no rows below it with data. I've confirmed that the data variable is populated correctly. Can somebody tell me what I'm missing please?
```type Subject = {
_id: String
subject: String...
Table customization
Hi guys, I have a question about Tanstack React Table.
I need to change the way the date appears in the cell.
For example, I want to change the Date 2021-02-10T17:12:09.987826 to Feb 20, 2021, 05:12:09 PM. How can I do this?
Without using any other 3rd party libraries....
I'm using a custom table feature to add an attribute to a cell, but the row doesn't reflect changes
As stated, I'm using a custom table feature to add the "pendingValue" attribute to cells. When I update the pendingValue and I look at the cell object, the pendingValue is what I set it to, as expected. But if I do cell.getRow().getAllCells(), the same cell doesn't have my updated pendingValue - it has the default value (blank). Why is it that the cell itself is updating the custom attribute, yet the row and table doesn't see that change?
handling nested values
I have an array of objects, they have nested objects insides them, how to handle displaying them in the table, knowing that they for example differ in the number of activeIngredients they have.
```typescript
type DrugItem = {
id: string...
Getting rendered value of cell
I need to get an array of all rendered values of a column in order to populate an autocomplete component.
My problem is that the rendered values for the column in question are derived via a
cell function, i.e.
```...Cannot drag column after apply column filter
Hi, the issue with not being able to drag after applying a filter in some cases might be related to how the drag-and-drop context or references are managed in relation to the filtered data (use dnd-kit lib to implementation drag feature).
React table filtering and column date sorting
can someone help me with column sorting and month filtering in react/tanstack table
how to use resize in Vue3
Hi all,I tried to use the resize method as described in the document, but it seems to have had no effect😠. Please forgive my inexperience; I'm quite a novice. I would greatly appreciate any guidance from the experts.
This is a reproduction of the issue in CodeSandbox, please help me out.
https://codesandbox.io/p/devbox/resize-didnt-work-rnpmnz?file=%2Fsrc%2Fcomponents%2FTanstack.vue%3A26%2C45...
Single input field to filter multiple columns
Hi all, I have been trying to filter multiple columns from a single input field, but am unable to get it to work. Below is how my table is initialised.
```
const table = useReactTable({
data,
columns,...
how to set colspan from createColumnHelper.
Just started with tanstack table, so far I'm really liking it. But I want to set a colspan of 4 or 5 on the first column of my table. I'm not able to find out how to do this just yet, so wanted to ask. I've tried using "size" in the column, but it doesn't seem to affect colspan, and typescript complains if I try to pass in an arg of colspan
```
const columns = [
columnHelper.accessor('title', {
id: 'title',...
Is it possible to filter numbers based on a partial match
Hi, I want to filter numbers based on a partial match using
I'm also struggling with filtering number type using
onColumnFiltersChange. For example, when the data's like {"name": Bob, "phone_number": 123456}, I wanna be able to display this data by filtering with 123 as a number type. Now I'm able to filter it by the exact same number like 123456 , but would it be possible?I'm also struggling with filtering number type using
onGlobalFilterChange. It seems like when I try to onGlobalFilterChange with the type of number, an error occurs in @duckdb/@tanstack/table-core/src/filterFns.ts like TypeError: filterValue.toLowerCase is not a function
.
...Updating table data
I am having a problem with updating data to table, it doesn't get reflected/rendered correctly.
I am fetching data from my server, then I get data, I put it inside useReactTable hook - all good.
Next thing I've done is creating a handleScroll function to run whenever I scroll the table, when i get to the bottom, I send request to my server, which brings me items of page number 2, which then I update state of data thus I am expecting useReactTable hook to run again and give me the old+new items, however this isn't happening.
I can see in my own state that I do have the correct items and updated object but when i do:
table.getRowModel().rows....
How do I keep a group of rows permanently at the top?
Hey all,
I'm making a table of transactions. Some transactions have the status "Pending" and I want to group all of those transactions at the front of the list. Ideally, all column sorts applied to the table would sort this pending group within itself and then all other transactions for the rest of the rows.
Sorting doesn't seem like the right answer, because there are statuses before and after "Pending" in the alphabet. And filtering neither, because I want rows with all statuses to display, just the pending ones first....
Complex filters
Hi,
I have a complex filter (consist of a string - search phrase and a boolean - toggle).
I would like all of the columns to be filtered by default filterFn (I believe
I would like all of the columns to be filtered by default filterFn (I believe
includesString) apart from one column that would be filtered by that toggle(it is not simple match of boolean values)....What approach would you use in this case?
Hi!
I am building a table for logistic transports in our app, and one of the requirements defined by the product manager is that the transports should be grouped in the table when they belong to the same group.
How would you achieve this? Can I use the grouping API that the library offers, or is it more focused on grouping columns instead of rows?...
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.
Does subrows must be of the same type?
Hello, I have a deeply nested object. Something like this
```
[company => {
facilities => Facility[]
groups => Group[...
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....
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?...
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...