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
Column Display Accessor for Vue 3 (TS and Options API)
Hello, I am trying to use Tan Stack tables with Vue 3 with Typescript and Options API. I can not seem to figure out the display column accessor for an actions column where I need to add a button with a pencil icon, that can redirect page to an edit page for a given row. I can not insert html elements as `cell: <button>Click here</button>. while defining the columns.
Table not updating when column def changes
We have a v8 table which displays a list of objects and the name of the user who created said object. The users are kept separately from the objects and in the accessorFn we find the correct user in the array and display their name. The issue we're having is that the users array isn't populated the first render, and the table is not updated on subsequent renders. Is this new behaviour in v8? This works fine in our v7 tables. Is the recommended approach to make sure all data required is sent in as "data" instead?
EDIT:
After some more debugging I found that "cell" will update the table, but not accessorFn...
Select All + Infinite Scrolling
Hello! I'm trying to create a table which has inifinite scrolling (with virtualized rows) and selections state.
I've got it mostly working by combining the infinite scrolloing and row selection examples however the 'select all' checkbox will only select the rows currently loaded. I would like to select all possible rows (including ones which are not yet loaded)
I am able to load an ID for every possible row which can eventually be loaded which should be enough to store the selection state but I'm wondering if anyone has any ideas for how best to approach this?...
How to apply enableSortingRemoval = false to only 1 column?
This property is a table wide property, applying to all columns. I would like it to only apply to specified columns in the Column Defs. Is that possible?
What is the "size"'s unit?
In the docs https://tanstack.com/table/v8/docs/api/features/column-sizing, I'm not sure what the numbers are supposed to mean?
Listen for table state changes ( like sorting, filters etc )
Hi, is possible to create a useEffect that triggers each time the state of the table changes?
Save column filters externally
Hi, I wanna save column filters in an external variable ( to put those on URL )
I've tried to read columnFilters from the state but I always get an empty array.
```ts...
Pivot table / has_many relationship
Hey all. I have a table that is structured as:
```
create table Question {
id uuid,...
Autofill cell values by dragging a handle across multiple cells
Hello,
Is it possible to have autofill by dragging a cell value like in excel?
Here's an example of what I mean
https://handsontable.com/docs/react-data-grid/autofill-values/...
Type error, No Overload matches this call
In the following sandbox it's not obvious to me why I'm getting an type error on line 58. I'd expect there to be a value in "getValue". Info is typed as
info: CellContext<TComicBook, unknown> which seems wrong.
https://codesandbox.io/p/sandbox/wizardly-gates-svrzc9?selection=%5B%7B%22endColumn%22%3A6%2C%22endLineNumber%22%3A78%2C%22startColumn%22%3A6%2C%22startLineNumber%22%3A78%7D%5D&file=%2Fsrc%2FApp.tsx
Additionally on line 85, I'd like to access the 'header" value but there doesn't appear to be a way. Just the id...How to assign value to subrows in react table v7?
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/expanding?file=/src/makeData.js
Reference to this example. It is showing the subrows data in the table.
Everytime sub rows data should be on exact same name as subrows ?
How can i assign values to subrows directly instead of mapping all the data again and rename it to subrows....
How can I add sub rows and access the desire data to show under
data = [
"id": "90e361ec-9245-4bae-bfe1-7afdb0ff5742",
"product_id": "afaf sd fgd",
"name": "Item no 3 edited after this sd safa",
"product_type": "item",...
column fixed width
can anyone point where to put
size?: number to have a specific column with a fixed size?What is the correct way of using useInfiniteQuery?
const [pagination, setPagination] = useState({
offset: parseInt(router.query.offset as string) || 0,
limit: parseInt(router.query.limit as string) || 10,
});
const [pagination, setPagination] = useState({
offset: parseInt(router.query.offset as string) || 0,
limit: parseInt(router.query.limit as string) || 10,
});
How can I prevent Display Column from re-rendering?
I have an action button in my display column which trigger a drawer. I don't want this column to re-render and close my drawer when I update a state which trigger the table to re-render.
How do I set the default column to sort?
Hi, I'm making a table for a log of user infractions and im wondering how I can make the items sorted by the caseId in a descending
```ts
let defaultColumns = [
columnHelper.accessor('caseId', {...
Using Table as a Scoreboard
I am using Tanstack Table v8 as a scoreboard in a table format.
Each row in my table represents a competitor in the competition with a score column. I am wanting to display a gold, silver, and bronze star next to the rows in 1st, 2nd, and 3rd place.
My table allows for sorting and filtering. ...
How to set filter function on a column after useReactTable hook ?
This snippet doesn't work
```
const table = useReactTable<TableType>({...})
table.getColumn("date").columnDef.filterFn = () => {...
rewriting my table to react table
Hi! I have my current table but I wonder if its possible to make it work with react table. Im mostly concerned about one part because currently I have a little small icon that let user add Item to favorites (i use trpc to handle that on click)
```
Tbody
Items.map(Item => (<ItemComponent Item={item}/>)
Tbody...