Topic: MDB Data Den render HTML Issue
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
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,
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: Other
- MDB Version: -
- Device: Dell Laptop/Ubuntu
- Browser: Chrome
- OS: Windows
- Provided sample code: Yes
- Provided link: No