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

extended-salmon

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

correct-apricot

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?

absent-sapphire

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>([])

...

adverse-sapphire

8/4/2024

How to remove border outline from cells?

See example

genetic-orange

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

exotic-emerald

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 ?

rival-black

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

absent-sapphire

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

correct-apricot

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

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

magic-amber

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

sensitive-blue

7/19/2024

[SOLVED] date range with ShadCN

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

plain-purple

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

correct-apricot

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"

...

adverse-sapphire

7/17/2024

Is it possible to search by multiple accessorKeys?

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

conscious-sapphire

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

metropolitan-bronze

7/14/2024

getPageCount doesn't return the correct number on the initial load when using manual pagination

Hi, I have a Vue DataTable component that I want to be configured to fit both server & client cases using manual pagination. Everything is good; however, there is an issue with the initial load when the data is empty at first, and the table renders 0 pages. However, when data is fetched, the data is updated, but the total page is not updated. I am using a trick with isMounted ref like this to prevent rendering the table before data is fetched from the server....

extended-salmon

7/14/2024

Svelte Table data not reactive

Hi, i want to make sure if data on @tanstack/svelte-table is reactive or not. Because when I try the columns not update when @tanstack/svelte-query has been response with new data. I using writable like basic example. And now i just update the data with $. Just tell me if I must include link to Svelte REPL

unwilling-turquoise

7/13/2024

How to use grouping manually in material react table

I have a ReactJS project in which I'm creating a table using Material React Table library and there I want to manually handle the grouping thing. How can I do it?

deep-jade

7/12/2024

navigate to x clicked anywhere in row and navigate to y clicked on button in the row

I have a problem in tanstack table navigate to page x clicked anywhere in row and navigate to page y clicked on button in the row but it is navigating to both pages when clicked on the collect fee button

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