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
one of columns in my table show delete button. And I want to pass row data to this button
```jsx
export function DataTable<TData, TValue>({
columns,
data,
}: DataTableProps<TData, TValue>) {...
ColumnHelper docs?
So I'm reading docs on Column Defs and I see they use the ...
createColumnHelper to create their columns.
Docs: https://tanstack.com/table/v8/docs/guide/column-defs
const columnHelper = createColumnHelper<Person>()
const columnHelper = createColumnHelper<Person>()
How to handle pagination outside of the component `table` is defined in?
I just started using tanstack table today. Mostly going from the example on https://ui.shadcn.com/docs/components/data-table
However I'm having quite some trouble making it re-useable for more than just a single table...
I would like to turn it into an API like this:...
Example with Django Rest Framework
Currently I am using a stack of a Django backend and a Next.js frontend.
I'm trying to implement a Table component with custom pagination, ordering, filtering and searching by the API endpoint. This can be done with e.g.
api/products/?search=foo, api/products/?ordering=created_at,-name or api/products/?color=blue, or all together forming a query together.
I cannot seem to figure out how to combine this with the useTable hook. Any help welcome! I am using shadcn's Data Table for UI if it is worth noting: https://ui.shadcn.com/docs/components/data-table#pagination...Sorting with Headers generated from an Array
Hello! I'm currently learning how to implement a tanstack-table and I think I hit a wall. The app is basically a stat calculator and stat viewer for a game (Fire Emblem). I would love to know how to properly create a sort function from headers generated from an array.
So my data has a CharData[] type.
```ts...
Struggle to build filter outside the table with setFilter.
I am trying to hook up a few selects outside the table and when I try to pass the table to my component, the table itself doesn't have setFilter on it.
I am referencing some examples like: https://codesandbox.io/s/react-table-filter-outside-table-bor4f?file=/package.json:296-307 and https://github.com/TanStack/table/discussions/2181 but I am struggling to make it work...
"@tanstack/react-table": "^8.5.11" this is the version that I am on. Any tips are appreciated....
How to add unit text to the end of a cell that is a number, while not having that text affect filter
Lets say I have a table with fields name age and weight. I would like to add years and lbs to the end of the age and weight fields respectfully, but I don't want the text to affect the sort and filter functionality I have in react tables. So both sort and filter should essentially only be looking at the numbers not the appended text.
ReactTable Pivot
It's possible on react table to have pivot data view? Or what do you guys use for pivot data? Thank you.
I cannot use @tanstack/react-table in NextJS 13
Hello! I cannot use @tanstack/react-table in NextJS 13.
I get this error;
```
./node_modules/.pnpm/@tanstack+react-table@8.9.0_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-table/build/lib/index.mjs...
Vue Tanstack Table help with sorting
Is there someone who could help me with Vue tanstack table since documentation is lacking Vue examples... I want to have my own sorting - sending query parameters to backend fetch function. How can I achieve that this is my current implementation
Keeping table settings between page navigation/sessions
Hey all. I’ve put together a Table component with React using this library. It lets the user reorder columns, show/hide columns, pin, sort etc. As per the examples, I initialise the state in the (generic) table component and pass it in to the useReactTable hook.
However, I want a users preferences (e.g. their column order, or what is pinned or visible) to be kept when they navigate to a different page and back again, or even between sessions. I know I’ll need to use something like redux for the former and local storage for the latter, but does anyone have any advice/suggestions on implementing this as I’m not exactly sure how to?...
Custom way to hide column, is it a bad practice ?
Hello everyone,
I have an accessor cell that display multiple content, it must display within the cell
a name, email, an organisation type(enum) and badge that inform confirmed account or not (boolean)
...
De-select all will unselect disabled rows
So here's a bit of an issue. I'm wondering if there's a way to get around this.
I have a conditional row selection enabled. The condition is that if one of the attributes of the row is present, it will disable the row.
The user experience is something like this. The first step is to check off entries of the table. Then they batch them all together into one state, and after they're batched they can no longer be de-selected. What it ends up looking like is this:...
sorting
I have a table and i request a data from parent component.
I request 10 items, and then use pagination to request more 10 in another page.
How can i create a sort, that i send to backend a queryParams, with table headers title and a boolean with true = asc and false = desc with react-table?...
setPageIndex() works on button event but doesn't work in useEffect
it only updates and rerenders the table if I wrap setPageIndex with a setTimeout.
filter rows based on the row.original?
Is there a built-in way to filter the rows based on a value not visible in the table?
My rows have a
revokedAt column which isn't part of the columns, but i want to be able to toggle whether i show them or not. I did it the react way like this but it feels very hacky, is there a built in for this?'
afternote: this breaks a lot of other stuff so feels way wrong...how does `sortUndefined` work?
I have columns with
sortUndefined: 1 and I expected it to always sort undefineds to the bottom regardless of sort order, instead it sorts it as if undefined is the maximum value. So, when the sort is reversed it's at the top of the list.Accessing nested values
Is there a way to access nested data from a object within table v8?
The data I am accessing is within an array and is an object itself. An example similar to this would be:
{...
How to set initial page size
Hellow, I'm trying to set initial page size to differnent value than 10.
If i'd try to do table.setPagesize(5) returning component it rerenders too many timez, can I put it somehow in the useReactTable object?...
Defining columns inside function components
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md
when I am trying to define my column array inside a function component, whereas in the examples the columns are defined inside the function component,
https://codesandbox.io/s/gallant-austin-kn24pq?file=/src/main.tsx:701-723...