T
TanStack•2mo ago
environmental-rose

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()
  })
};
function escapeHtml(unsafe: string): string {
  return unsafe
    .replace(/&/g, '&amp;')
    .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",
}
{
  0: "T",
  1: "e",
  2: "s",
  3: "t",
  4: "i",
  5: "n",
  6: "g",
}
which is not a valid string. why does this happen?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?