foreign-sapphire

Combine columns into single column

Is it possible to achieve the following CSS layout using TanStack tables? In particular, I'm referring to the song artists being listed underneath the song title like in the included screenshot. In my data, the format is an object as follows:

[
  {
    id: number; 
    title: string;
    composers: [...{}];
    ...
  },
  ...
]

[
  {
    id: number; 
    title: string;
    composers: [...{}];
    ...
  },
  ...
]

5 Replies

generous-apricot•3y ago

For that particular column alone, you could render custom cells using your ColumnDefs

generous-apricot•3y ago

https://tanstack.com/table/v8/docs/api/core/column-def#cell

ColumnDef | TanStack Table Docs

Column definitions are plain objects with the following options: Options

generous-apricot•3y ago

Inside, the render method, you can get access to the full row details, and then display it in a component accordingly. I've done something similar below. https://github.com/SeanCassiere/nv-rental-clone/blob/master/src/pages/AgreementsSearch/AgreementsSearchPage.tsx#L84-L109

GitHub

nv-rental-clone/AgreementsSearchPage.tsx at master · SeanCassiere/n...

Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.

unwilling-turquoise•2y ago

Is there any way to combine real columns? The above works fine is most cases, but you lose sorting and filtering on those values

generous-apricot•2y ago

You could use the accessorFn to combine the column values into a single value (without doing the combing in JSX) and then your filters would then be run on that returned value. https://tanstack.com/table/v8/docs/guide/column-defs#accessor-functions

Columns | TanStack Table Docs

API Table API

Gaming

Programming

Combine columns into single column

Did you find this page helpful?