Sheraff

{
  "scripts": [],
  "styles": [],
  "themePreview": false
}

Sheraff

{
  "scripts": [],
  "styles": []
}

Sheraff

{
  "scripts": [],
  "styles": []
}

Sheraff

function Wrapper({ children }) {
	return (
		<ul>
			{React.Children.map(children, (child) => (
				<li>{child}</li>
			))}
		</ul>
	)
}

Sheraff

{
  "scripts": [],
  "showConsole": true
}

Sheraff

{
  "scripts": [],
  "showConsole": true
}

Sheraff

{
  "scripts": [],
  "styles": [],
  "showConsole": true
}

Sheraff

For this problem, I'm going to assume that the table will have a <thead> (for the clickable elements) and a single <tbody>.

Native JS API for interacting with <table>

A good thing to know is that a <table> element in JS has a special interface HTMLTableElement that allows us to perform a few selections / actions easily. So once we select our element:

const table = document.querySelector('table')

We have access to its entire structure. For example:

Sheraff

{
  "scripts": [],
  "showConsole": true
}

Sheraff

Heading level 1

Heading level 2

hello

some quote

private css: string = "";