Datatable in custom html block

Frappe Framework Customization
1

Hi everyone,

I am trying to use frappe datatable inside a custom html block:

html code

<!DOCTYPE html>
<div class="datatable"></div>

javascript code

let elt = root_element.querySelector(".datatable");

   let datatable = new frappe.DataTable(elt, {
	columns: ['A', 'B', 'C'],
	data: [
		['1', '2', '3']
	]
});

That is what I get

image
image1035Ă—260 3.54 KB

Would have someone any idea ?

2

hello getting any solution on above datatable in custom html block

3

Hi Kaushalk,

unfortunately not.
However I did not test it recently.

Bets regards,

Gerald

4

What problem are you facing?

The same as @gmeunier or something else?

5

Try This Code

const datatable_element = root_element.find(".datatable")[0];

   const datatable = new frappe.DataTable(datatable_element, {
	columns: ['A', 'B', 'C'],
	data: [
		['1', '2', '3']
	]
});
7

same issue facing

image
image1779Ă—860 46.2 KB

i add that code in js but still data table not showing

8

console variables once and share that

9

image
image1920Ă—410 83.7 KB

10

Sorry, Instead of this use querySelector.

11

used querySelector but still table not showing

12

Hello all,
good to know about frappe.DataTable element, I do not know about it yet…

I have tried these steps:

  • create html field, “option” = <div class="pojd"></div>
  • in browser console: let custom_table = $('div.pojd').get(0);
  • in browser console:
let datatable = new frappe.DataTable(custom_table, {
    columns: ['A', 'B', 'C'],
    data: [
        ['1', '2', '3']
    ]
});

And here is result :wink:

image
image700Ă—118 2.27 KB

Thank you
Jiri Sir

1 Like
13

image
image1790Ă—852 46.4 KB

try same code but in custom html block data table not show

14

What is your requirement?

You can use Custom Page if your requirements meet.

15

Hello,
it is not obviously working in custom block :frowning:
The element is not found in DOM and root_element.querySelector made the same messy table as mentioned in this topic.
I will take some time and go through it.

Jiri Sir

16

Hi Everyone,

In fact in my first post, the datatable is working:
You do see the headers, the lines and some formatting appearing.

It is just that the datatable is completely messed up.
Headers and rows are vertical, rows on the left, headers on the right.
And there is a text input field at the bottom

image
image917Ă—159 4.45 KB

For me it looks more like there is a css conflict linked to css or DOM.

Gerald