Problem with rendering frappe datatable in custom html field

Hi!

I have custom script for Project:

  frappe.ui.form.on('Project', {
   refresh(frm) {
	// your code here
    },
onload_post_render(frm) {
   const assets = [
		"/assets/frappe/css/frappe-datatable.css",
		"/assets/frappe/js/lib/clusterize.min.js",
		"/assets/frappe/js/lib/Sortable.min.js",
		"/assets/frappe/js/lib/frappe-datatable.js"
	];

    frappe.require(assets, () => {
        var datatable = new DataTable('#budget-realization-datatable', {
    	    columns: [
                { name: 'Files' },
                { name: 'Size' },
                { name: 'Last Updated'}, 
                { name: 'Test'}
              ],
            data: [
          	    ['Faris', 'Software Developer', '$1200', 'test'],
                ['Manas', 'Software Engineer', '$1400', 'test'],
            ],
            layout: 'fixed', // fixed, fluid, ratio
        });
     });
 }
   });

And a custom HTML field “budget” with html in Options

And this is how datatable is rendered in Project

why datatable is rendering this way?