DataTable in custom HTML block -> slightly better but still messed up

1

Hi all,

I am trying to embedd the frappe DataTable into a custom HTML block.

First, I got the same results as here:

https://discuss.frappe.io/t/datatable-in-custom-html-block/119609

Then I remembered, that the custom HTML block seems to have scoped CSS properties.

I therefore added the CSS of the datatable from the file:

frappe/frappe/public/node_modules/frappe-datatable/dist/frappe-datatable.css

to the CSS field of the custom HTML block.

This helped somewhat, but the DataTable still does not look as it should:

image
image396×223 5.43 KB

The HTML is:

<div id="my_own_datable"></div>

The JS is:

let element = root_element.querySelector('#my_own_datable');
const datatable = new DataTable(element, {
  columns: [ 'First Name', 'Last Name', 'Position' ],
  data: [
    [ 'Don', 'Joe', 'Designer' ],
    [ 'Mary', 'Jane', 'Software Developer' ]
  ]
});

and the CSS is the full content of the CSS file mentioned above.

Any idea how to fix the datatable?

Thanks

DoCa