T
TanStack•2y ago
jolly-crimson

multiple values in same cell

Hi. I just started using tan stack table. I have something setup. It's displaying data from my database in a table. This part of the table lists 8 fetched items from the database. Rather than each item being in its own cell I'd ike for all eight items to be in the same cell...... Is that possible? 
{
    header: 'Ingredients',
    footer: (props) => props.column.id,
    columns: [
      {
        accessorKey: 'ingredientOne',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientTwo',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientThree',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientFour',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientFive',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientSix',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientSeven',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientEight',
        header: () => '',
        footer: (info) => info.column.id,
      },
    ],
  },
{
    header: 'Ingredients',
    footer: (props) => props.column.id,
    columns: [
      {
        accessorKey: 'ingredientOne',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientTwo',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientThree',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientFour',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientFive',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientSix',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientSeven',
        header: () => '',
        footer: (info) => info.column.id,
      },
      {
        accessorKey: 'ingredientEight',
        header: () => '',
        footer: (info) => info.column.id,
      },
    ],
  },
1 Reply
jolly-crimson
jolly-crimsonOP•2y ago
I think something like this is working:
accessorFn: (row) => ${row.ingredientOne} ${row.ingredientTwo}, experimenting meow this works but puts null in the table if the value is null.... accessorFn: (row) => ${row.ingredientOne} ${row.ingredientTwo} ${row.ingredientThree} ${row.ingredientFour} ${row.ingredientFive} ${row.ingredientSix} ${row.ingredientSeven} ${row.ingredientEight}, final answer: { id: 'ingredients', header: () => '', footer: (info) => info.column.id, accessorFn: (row) => ${row.ingredientOne ?? ''} ${row.ingredientTwo ?? ''} ${ row.ingredientThree ?? '' } ${row.ingredientFour ?? ''} ${row.ingredientFive ?? ''} ${ row.ingredientSix ?? '' } ${row.ingredientSeven ?? ''} ${row.ingredientEight ?? ''}, },

Did you find this page helpful?