How change threejs Editor ui (For Example add one Table)

Questions
, ,
1

I clone threejs from Github In Editor project I want to add a table from Grid.js

This Editor creates UI Elements from the ui.js file and I don’t know how should I add one custom Item there.

I createElement div and import Grid.js

 import {
	UISpan
} from './libs/ui.js';
import {
	Grid,
	html
} from "https://unpkg.com/gridjs?module";

function SidebarTable(editor) {
	var container = new UISpan();

	const grd = document.createElement('div');

	const tb = new gridjs.Grid({
		columns: ['Name', 'Email', 'Phone Number'],
		data: [
			['John', 'john@example.com', '(353) 01 222 3333'],
			['Mark', 'mark@gmail.com', '(01) 22 888 4444']
		]
	}).render(grd);



	container.setInnerHTML(grd.innerHTML);

	return container;

}

export {
	SidebarTable
};

when I add it, It damaged the style and cant load data :

image

how can I fix this? I’m a beginner in web and three.js too

I ask this in SO too but no one answers me and I will be grateful if help me.

Actually, I want to change the ui.js class and add my custom elements but I don’t know how should do that.

2

Here is a clone of threejs editor that allows drag and drop, this sample project will help you customize your interior design to decide which properties should you buy for your home, this sample project will can be useful for interior designers or real estate websites.

RealEstate Property Editor