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/';

const rows1 = [{ car: <a href="">Honda</a>, year: '01/05/2013', price: 28000 }, { car:, 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, };


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

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.


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



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