T
TanStack•2mo ago
eastern-cyan

tanstack table | how do i render <CompA>getValue()</CompA>

im used to rendering like 
    {
      id: 'Rank',
      header: 'Rank',
      accessorKey: 'rank',
      cell: ({ getValue }) =>
        renderSnippet(
          createRawSnippet(() => ({
            render: () => `<div class="text-left">#${getValue()}</div>`,
          })),
        ),
    },

// or
    {
      id: 'Status',
      header: 'Status',
      accessorKey: 'timestamp',
      cell: ({ getValue }) => renderComponent(StatusLabel, { timestamp: getValue() }),
    },

// or even
    {
      id: 'Site Method',
      header: 'Site Method',
      accessorKey: 'site',
      cell: ({ row }) =>
        renderComponent(Site, {
          site: row.original.site,
          method: row.original.method,
          layoutVariant: 'siteMethod',
        }),
    },
    {
      id: 'Rank',
      header: 'Rank',
      accessorKey: 'rank',
      cell: ({ getValue }) =>
        renderSnippet(
          createRawSnippet(() => ({
            render: () => `<div class="text-left">#${getValue()}</div>`,
          })),
        ),
    },

// or
    {
      id: 'Status',
      header: 'Status',
      accessorKey: 'timestamp',
      cell: ({ getValue }) => renderComponent(StatusLabel, { timestamp: getValue() }),
    },

// or even
    {
      id: 'Site Method',
      header: 'Site Method',
      accessorKey: 'site',
      cell: ({ row }) =>
        renderComponent(Site, {
          site: row.original.site,
          method: row.original.method,
          layoutVariant: 'siteMethod',
        }),
    },
however i dont know how to render something like <CompA>getValue()</CompA> in the table without kind of having it like <CompA captured={capturedVal}/> im using the shadncn Badge component not my own custom component i can pass a prop to
1 Reply
eastern-cyan
eastern-cyanOP•2mo ago
i had some help and got suggested 
{
      id: 'Captured',
      header: 'Captured',
      accessorKey: 'captured',
      cell: ({ getValue }) =>
        renderComponent(Badge, {
          children: createRawSnippet(() => ({
            render: () => `${getValue()}`,
          })),
        }),
    },
{
      id: 'Captured',
      header: 'Captured',
      accessorKey: 'captured',
      cell: ({ getValue }) =>
        renderComponent(Badge, {
          children: createRawSnippet(() => ({
            render: () => `${getValue()}`,
          })),
        }),
    },
lmk if this is also a decent way to do it or do you guys do it differently cheers

Did you find this page helpful?