Topic: MDB Data Den render HTML Issue

sutro_biopharma priority asked 1 week ago


Expected behavior

Expected behavior is for HTML to render as data in dataden column. For example tags should render as links

Actual behavior

HTML is rendering as plaintext

Resources (screenshots, code snippets etc.)

import { DataDen } from '/static/mdb-data-den/js/data-den.es.min.js';

const rows1 = [{ car: <a href="https://www.youtube.com">Honda</a>, year: '01/05/2013', price: 28000 }, { car: https://espn.com, year: '01/05/2013', price: 56000 }, { car: 'Porsche', year: '09/02/2020', price: 31000 } ];

(() => { const options1 = { columns: [{ field: 'car', headerName: 'Car', }, { field: 'year', headerName: 'Year', }, { field: 'price', headerName: 'Price', }, ], rows: rows1, };

console.log(options1)

const dd1 = document.getElementById('dd1');
const dataDenBasicSorting = new DataDen(dd1, options1);

})();

See below for how it renders. I would want the first entry in the first column to be the word "Honda" as a link which would take a user to youtube.com

enter image description here


Filip Kapusta premium answered 1 week ago


Hello @sutro_biopharma

I reached out to you via the email address assigned to your account with an important update regarding this case - please check your email inbox.

Keep coding,


Grzegorz Bujański staff answered 1 week ago


In this case you should create a custom renderer:

class ExampleCellRenderer {
  constructor(data) {
    this.value = data.value;
  }
  getGui() {
    const el = document.createElement("span");
    el.insertAdjacentHTML('beforeend', this.value);


    return el;
  }
}

and pass it through options:

const options = { 
  columns: [
    {
      field: 'car',
      headerName: 'Car',
      cellRenderer: ExampleCellRenderer,
    },
    ...
  ],
};

This will allow you to pass HTML code as a row value - for example the a tag



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: Other
  • MDB Version: -
  • Device: Dell Laptop/Ubuntu
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No