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

flat-fuchsia

11/2/2022

double row selection list

Is there a way in react-table v7 to have a secondary row selection ? e.g. one column to select for purpose1 and one column to select for purpose2 I can't figure out a way to implement that without having huge performance issues...

funny-blue

11/2/2022

Typescript issues

I have this props: `interface TableProps { columns: { title: string;...

flat-fuchsia

11/1/2022

globalFilter that can apply to specific columns

Hi there! I have a feature where I can have the global filter apply to all columns, or narrow it down to specific columns. Was wondering what the best approach would be for implementing this? For example, if I had this table: ```...

other-emerald

11/1/2022

Scroll row into view

Is there a way to scroll into a view a specific row? I have a table with many rows and no pagination and want a way to point people to a particular row, much like you can scroll to a line of code in GitHub using URL query string parameters

rare-sapphire

11/1/2022

Custom rendering of a cell on V7

I'd like to render a cell differently depending on view width and also add a tooltip to it. I am having a hard time finding the solution to this. Thanks for any help

like-gold

11/1/2022

toggle editable

I follow the tanstack example to make editable field, but after using the "cell" to style it but the editable input didn't show up... please help SOQcolumnHelper.accessor((data) => data.item_desc, { header: () => 'item', id: 'item_desc',...

inland-turquoise

10/28/2022

filterFn in column definition not being called

I have a column definition that looks like this: ```ts columnHelper.accessor("type", { header: t("type-grid-column-header", "Type"),...

generous-apricot

10/28/2022

issue with estimateSize

Anyone knows how best to set estimateSize. I have dynamic tables which row sizes are widely different and do not know before hand. Setting estimateSize small works for one but to the other and vice versa. By not working here I meant scrolling display the row wrong. Can any one help? I used a similar implementation in v2 (which does not require estimateSize) and it works....

rival-black

10/27/2022

React filter null value in column

hello i'm on react-table v8 i am trying to figure out how to filter out (or the opposite) null values in a specifique column. I switch mode with a button in the header....

rare-sapphire

10/24/2022

React table value-based styling

I may be confused but it seems to me that in the former react-table v7 version, we used to have more control on the way the rows would be rendered. In the attached screenshot (codesandbox https://codesandbox.io/s/ancient-frog-rsx361), I'd rather have the styling set at the <td/> level, not its child (so that padding would look cleaner). What's the right approach for this with v8 ? Old version (<td/> would get its own cell-value-based styling getColumnProps + getCellProps) ...

sensitive-blue

10/19/2022

Typechecking overwritten ColumnMeta

I have extended the ColumnMeta type as described in https://tanstack.com/table/v8/docs/api/core/column-def#meta, which seems to give me correct autocompletion and typechecking when using column defs, but not when creating them. See: https://codesandbox.io/s/react-table-v8-forked-j74p00?file=/src/columns.tsx In this codesandbox, I have overwritten the types in extend-table-core.ts, and am creating a column definition using columnHelper in columns.tsx....

quickest-silver

10/19/2022

Passing prop for action button on table cell

i know i can render a component as cell by returning the component on cell option inside ColumnDef, but how to pass the props into those component?

flat-fuchsia

10/17/2022

Filtering array of objects

Hello, I currently have a react table v8 with some columns with elements that have arrays of objects. In addition to filtering some of the columns with one object, I need to filter objects of the columns with arrays of objects (filter the objects, not the row). What is the best way to go about doing this?...

generous-apricot

10/15/2022

react table v8 and react-virtual 3.0

is react-table v8 working with react-virtual 3.0. I could not find any example. thanks.

other-emerald

10/15/2022

Multiple Values in 1 cell

Hi guys, I need to map array of objects and render multiple values in one cell. The only way is to access props.row.original with needed array and iterate it? Like props.row.data.map(el => <span>{el.name}</span>) or there is something else?

rare-sapphire

10/15/2022

React Table v7 - Expanded rows

Hello, I have implemented expandable rows in my react component with 2 levels nesting; something along the lines of rounds > groups > matches So what i ended up having is a table rendering rows of individual rounds, and whenever i click one it will expand and a row of the relevant group will show up and so on...

foreign-sapphire

10/14/2022

useSortBy sets descending on adjacent column not column that is clicked

Hello, I am using react-table to create a basic datatable with column sorting. I am adding an aria-sort attribute to the column headers (<th>) tags. What I am trying to do is make sure that when someone decides to sort a specific column, when isSortedDesc is true, the aria-sort attribute should get set to aria-sort='descending' otherwise it should be set to aria-sort='ascending' and if isSorted is true then set aria-sort='none'...

metropolitan-bronze

10/13/2022

How to update table's data in vue-table?

Hi, recently I started a new project and we're using vue for it. I wanted to use vue-table since I've used react-table in the past... but I can't figure out how to update the data inside the table. Here's a snippet: ```typescript const table = useVueTable({ data: props.data, getCoreRowModel: getCoreRowModel(),...

vicious-gold

10/13/2022

How to type this case correctly?

foreign-sapphire

10/10/2022

No results screen

How do I create a "No rows found" screen in table v8?

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