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

ambitious-aqua

8/12/2024

Updating props not updating table data

Hey all, I have a bit of a problem. When I am passing data as a prop from a parent component to my useReactTable hook the initial render is fine. However when the prop data changes the data within the table context remains the same. ...

conscious-sapphire

8/9/2024

Apply aggregate function to column

I noticed that there are aggregate functions that I think work on rows but are there any examples out there that use table footers for the sum of a column?

conscious-sapphire

8/9/2024

Duplicate subRows

I need to set up a drag and drop with rows and subRows, and I'm having problems, it's duplicating the subrows, how can I avoid it? See the photos, so you can understand the context, any light? please

ratty-blush

8/8/2024

Looking for example of Table and useWindowVirtualizer

Tanstack has this example: https://tanstack.com/virtual/v3/docs/framework/react/examples/table. It's a fixed height table with a scrollbar on its parent container. I'm looking for an example where the window is the scrolling element (using useWindowVirtualizer)...

ambitious-aqua

8/7/2024

Table Virtualiser with Resize Full width

Hey all, I have been struggling for two days to try and create a table whose columns stretch to full the available space of the table as seen in this example: https://tanstack.com/table/v8/docs/framework/react/examples/full-width-resizable-table And merge this capability with of the table virtualiser as seen in this: https://tanstack.com/table/v8/docs/framework/react/examples/virtualized-rows...

flat-fuchsia

8/6/2024

Controlled filtering

I want to use the filtering feature, but I only want the filter to apply when I click the "apply filters" button. Is this possible?

unwilling-turquoise

8/4/2024

[SOLVED] Computed column in Table

I'm replicating older code from Nuxt/Vue where I have a running sum column to sum values from each row with its preceding row's value. I am able to do this without TS Table, but would love to use TS Table to reduce code and overhead. I have a runningsum function that I apply to the initial state, so when the table is sorted, the runningsum do not change. Is there a right way to inject a calculated column in TS Table? Or a good way to inject the updated state with the new value?
I'm following the docs for the basic sorting:

const [sorting, setSorting] = createSignal<SortingState>([])

const [sorting, setSorting] = createSignal<SortingState>([])

...

wise-white

8/4/2024

How to remove border outline from cells?

See example

conscious-sapphire

8/2/2024

Can't access accessorKey when mapping ColumnDef array

Trying to map over columns to change the cell property based on a selected value in the component but the accessorKey property isn't accessible. If I log the items out while mapping, there's clearly an accessorProperty. I read the reason why it's not but I'm not sure what to do. Is there a better way to do this? Am I supposed to be doing this in the component rather than the columns? I feel like I should be able to render the content dynamically via the columns property. Is my only recourse to u...

fair-rose

7/29/2024

RowSelectionState change is not persisted after row selection

When I select a row, the selection state seems to be refreshed, anyone have encoutered a similar issue ?

extended-salmon

7/29/2024

Storing `rowSelectionState` for multiple tables in parent component

Hi i am trying to have a component which stores the rowSelectionState of multiple tables, so something like: ``` const [rowSelections, setRowSelections] = React.useState<Record<number, RowSelectionState>>({}) const [selectedIndex, setSelectedIndex] = React.useState(0) const updateRowSelectionState: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {...

exotic-emerald

7/25/2024

table.nextPage() not doing anything for me

```tsx export const TaskTable: FC<Props> = observer(({ tasks }) => { const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 10,...

extended-salmon

7/25/2024

How to use manual grouping in react -table V8.

How to use manual grouping in react -table V8. i need an example also. In documentation there is no clear example and explanation for that....

rival-black

7/25/2024

Table gets stuck when adding new data from API on scroll.

This only happens when i use any styled component or a custom component to render in a cell. The page gets freezed and unusable when the data is being updated. When i dont have any custom component things work fine. Can anyone help?...

inland-turquoise

7/19/2024

How to show multiple grouped cells on a single row?

A table with columns A. B, C, D E and grouped by A and B (potentially more). B is always 1 group under A. Currently a reorder|false groupedColumnMode will have a row for each group. The table always shows the expanded state using expanded: true....

quickest-silver

7/19/2024

[SOLVED] date range with ShadCN

The way i work it is... ```jsx // columns.jsx ...

curious-teal

7/18/2024

Tanstack Table & Suspense

Hi. I have my Table component wrapped with a server component, which is wrapped with a <Suspense> with a key, which is URL searchParam. I'm trying to implement column selector, but i'm struggling with implementation when switching pages (when key of Suspense changes and server component re-fetches). Does anyone have any experience with this, or any ideas? Thanks

unwilling-turquoise

7/18/2024

table.getRowModel throwing error

0: "reading and writing module 1"
1: "reading and writing module 2"
2: "math module 1"
3: "math module 2"

0: "reading and writing module 1"
1: "reading and writing module 2"
2: "math module 1"
3: "math module 2"

...

afraid-scarlet

7/17/2024

Is it possible to search by multiple accessorKeys?

Like being able to search from all keys or an array of keys.

harsh-harlequin

7/14/2024

My virtualized Table renders terribly slow. I can't delete an item because it takes ages

https://stackblitz.com/edit/vitejs-vite-mwwcvr?file=src%2FTable%2Findex.tsx What can I do to further improve the performance of the table? The requirement is to handle about 3000 row without pagination but it works terribly slow...

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