How do I make a clickable link for email?

[rgfx]

do I do some sort of magic here?

table.column({
   header: 'Email',
   accessor: 'email',
}),

Also how do I handle null values, so say something other then null

Thanks.

[bryanmylee]

Hey @rgfx, you can use the cell property to define custom rendering options for the column body.

https://svelte-headless-table.bryanmylee.com/docs/api/create-columns#columndef-cell-datacell-state-renderconfig

Because Svelte does not have a JSX-equivalent, you cannot inline the definition. Instead, you will have to use a custom solution we developed: createRender.

In your case, you will have a component like:

<!-- TableEmailLinkCell -->
<script lang="ts">
  export let email: string | undefined = undefined;
</script>

{#if email === undefined}
  <span>No email</span>
{:else}
  <a href="mailto:{email}">{email}</a>
{/if}

You would then use it like:

const table = createTable();
const columns = table.createColumns([
  table.column({
    header: 'Email',
    accessor: 'email',
    cell: ({ value }) =>
      createRender(TableEmailLinkCell, {email: value}),
  }),
  ...
]);
...

createRender also supports event handling so you could listen for events like:

const table = createTable();
const columns = table.createColumns([
  table.column({
    header: 'Email',
    accessor: 'email',
    cell: ({ value }) =>
      createRender(TableEmailLinkCell, {email: value})
        .on('click', (ev) => handleClick(ev, value)),
  }),
  ...
]);
...

[rgfx]

I see, thank you very much.

[blerrgh]

@bryanmylee Is it possible to pull arbitrary data from other cells in the row? For example, if I wanted to create an email link where the name is pulled from another column? Something like:

createRender(TableEmailLinkCell, {email: value, name: cell.original.name})

Thanks!

[blerrgh]

Wait nevermind, ignore me, I see this was already answered in #74

[bryanmylee]

Don’t worry, the documentation could probably use more work to make these things more obvious.

Let me know if you have any suggestions on how I could make this more discoverable!

[blerrgh]

Personally I understand best from examples, so you could add the code in this thread (and #74 ) into the examples for columnDef.cell or maybe even the kitchen sink example.