T
TanStack•3y ago
dependent-tan

vue-table how to add sub components

I'm using vue-table and I'm struggling to see how I can pass custom components into the table cells like they do here in this react example https://tanstack.com/table/v8/docs/examples/react/sub-components I basically want to have an action button in one of the cells. How do I manage that with vue3?
No description
5 Replies
dependent-tan
dependent-tanOP•3y ago
https://tanstack.com/table/v8/docs/examples/react/column-pinning Column pinning is a better example, here in columns... cell... they basically have an anonymous function with returns jsx header: () => <span>Last Name</span>,
React Table Column Pinning Example | TanStack Table Docs
An example showing how to implement Column Pinning in React Table
adverse-sapphire
adverse-sapphire•3y ago
Hi! I just found a solution, you can use the h() function provided by Vue. https://vuejs.org/guide/extras/render-function.html A basic example: 
const tableColumns: ColumnDef<Application, any>[] = [
  columnHelper.accessor('name', {
    header: 'Nombre',
  }),
  // Other columns...
  columnHelper.display({
    header: 'Acciones',
    cell(props) {
      const applicationId = props.row.original.id

      return h(ApxLink, {
        onClick: () => console.log({ applicationId }),
        text: 'Ver detalles',
      })
    },
  }),
]
const tableColumns: ColumnDef<Application, any>[] = [
  columnHelper.accessor('name', {
    header: 'Nombre',
  }),
  // Other columns...
  columnHelper.display({
    header: 'Acciones',
    cell(props) {
      const applicationId = props.row.original.id

      return h(ApxLink, {
        onClick: () => console.log({ applicationId }),
        text: 'Ver detalles',
      })
    },
  }),
]
Render Functions & JSX | Vue.js
Vue.js - The Progressive JavaScript Framework
helpful-purple
helpful-purple•3y ago
A follow-up to this solution, how do we do this with typescript? When I pass the h() function to cell it throws this error: 
Type 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' is not assignable to type 'ColumnDefTemplate<CellContext<unknown, unknown>> | undefined'   
Type 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' is not assignable to type 'ColumnDefTemplate<CellContext<unknown, unknown>> | undefined'
eastern-cyan
eastern-cyan•3y ago
if you configure vite correctly, you can also use JSX instead of h(). the example above with jsx: 
  columnHelper.display({
    header: "Acciones",
    cell(props) {
      const applicationId = props.row.original.id;
      return (
        <ApxLink
          onClick={() => console.log({ applicationId })}
          text="Ver detalles"
        />
      );
    },
  })
  columnHelper.display({
    header: "Acciones",
    cell(props) {
      const applicationId = props.row.original.id;
      return (
        <ApxLink
          onClick={() => console.log({ applicationId })}
          text="Ver detalles"
        />
      );
    },
  })
it can get a lot easier to read when you have nesting etc. though admittedly there is mental overhead in switching between jsx and vue template syntax
adverse-sapphire
adverse-sapphire•3y ago
This does read better, I didn't use JSX because I forgot to add it when creating the project and was too lazy to set it up myself. I always used to ignore JSX for Vue projects but now I'll add it :D. Thank you

Did you find this page helpful?