TanStackT
TanStack•3mo ago
then-purple

createRawSnippet for cell turns string into object?

i am using tanstack table and made a utility for creating snippets for rendering table cell content.

When i pass a string into the renderSnippet call and get it out in the createRawSnippet call it doesnt return a string anymore but an object where each indicie of the string is a numeric key in the object?

Example:
function escapeHtml(unsafe: string): string {
  return unsafe
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

const snippet = createRawSnippet<[string]>((getValue) => ({
  render: () => `<div class="text-xs sm:text-sm">${escapeHtml(getValue())}</div>`;
}));

return {
  accessorKey: "Test",
  header: "whatever",
  cell: ({ getValue }) => ({
    snippet,
    params: getValue()
  })
};


escapeHtml now fails at .replace because the "unsafe" variable looks like this now:
{
  0: "T",
  1: "e",
  2: "s",
  3: "t",
  4: "i",
  5: "n",
  6: "g",
}


which is not a valid string.

why does this happen?
Was this page helpful?