Convert JSX to string in template

[rationalthinker1]

I have a table generator like so:

data.fields = [
        {
          title: 'ID',
          field: (row) => (<router-link to="/sales/lead/${row.lead_id}">${row.lead_id}</router-link>),
          sort: 'lead.id',
        },
        {
          title: 'Lead Source',
          field: (row) => {
            return `
                <div class="flex-basis-100">
                    <span class="font-semibold">${trimEllip(row.lead_source)}</span>
                </div>
                <div class="flex-basis-100 grow flex items-center justify-end lg:justify-start">
                  <span class="font-light">${trimEllip(row.lead_type)}</span>
                </div>
            `;
          },
          sort: 'lead.lead_source',
          show: Tenant.get('settings.lead.index.show_lead_source_column', true),
        },

the name field would contain whatever it needs to put inside td in a table. How would I write a program to take the jsx and convert it to html string like the field for Lead Source? Also, template string doesn't work inside JSX, any solutions?