Tanstack table customize expandable rows

[clarkkamorr24]

is there any solutions how can I customize the subrows like this?

[ronkristoff]

I also want to do this but I cannot find examples using tanstack query. I found a similar behavior using https://www.mantine-react-table.com/docs/guides/detail-panel

[KevinVandy]

well, "mantine-react-table" was built with TanStack Table, so your example is right there.
"Lazy Detail Panel Fetching" is also pretty strait-forward. https://www.material-react-table.com/docs/examples/lazy-detail-panel

[andredewaard]

I think i found a workaround for this although you cant really leverage the columns api of tanstack/table
Example is made in Vue though so you need to change it to React.

          <template v-if="table.getRowModel().rows?.length">
            <template v-for="row in table.getRowModel().rows" :key="row.id">
              <TableRow :data-state="row.getIsSelected() && 'selected'">
                <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
                  <Skeleton v-if="isLoading" class="h-5" />
                  <FlexRender
                    v-else
                    :render="cell.column.columnDef.cell"
                    :props="cell.getContext()"
                  />
                </TableCell>
              </TableRow>
              <TableRow v-if="row.getIsExpanded()">
                <TableCell :colspan="row.getVisibleCells().length">
                  // Render custom view
                </TableCell>
              </TableRow>
            </template>
          </template>

export const columns = (t: TFunction): ColumnDef<ClientCollectionResource, string>[] => [
  columnHelper.display({
    id: 'select',
    header: ({ table }) => h(Checkbox, {
      'checked': table.getIsAllPageRowsSelected(),
      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
      'ariaLabel': 'Select all',
    }),
    cell: ({ row }) => {
      return h(Checkbox, {
        'checked': row.getIsSelected(),
        'onUpdate:checked': value => row.toggleSelected(!!value),
        'ariaLabel': 'Select row',
      })
    },
    enableSorting: false,
    enableHiding: false,
  }),
  columnHelper.accessor('id', {
    header: ({ column }) => h(DataTableColumnHeader, { column, title: t('clients.table.header.id') }),
    cell: (info) => h('div', { class: 'font-medium' }, info.getValue())
  }),
  columnHelper.accessor('name', {
    header: ({ column }) => h(DataTableColumnHeader, { column, title: t('clients.table.header.name') }),
    cell: (info) => h('div', { class: 'text-left font-medium' }, info.getValue()),
  }),
  columnHelper.display({
    id: 'actions',
    size: 1,
    cell: ({ row }) => {
      // const client = row.original
      return h('button', { class: 'flex justify-end', onClick: () => row.toggleExpanded() }, 'toggle')
    }
  })
]

const table = useVueTable({
  get data() {
    return data
  },
  get columns() {
    return columns
  },
})

I hope there would be a more native way to do this though. so we could add this custom view to the columns array somehow

[benmcginnis]

I am also looking for something similar, @andredewaard would you mind posting the markup that your example generates? I have some strict wcag requirements and I would want the custom sub-row to have an appropriate col-span attribute, not sure how best to do that.

I'm interested in a design like the flowbite expandable table block: https://flowbite.com/blocks/application/advanced-tables/

[andredewaard]

@benmcginnis
This is the output you get, i don't think this will meet the wcag requirements but at least you could've something.
Will try to find a better solution though.