JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div id="target">
    <columns>
        <column field="Group.Id" name="Group" enable-filtering="=false">
            Some content
        </column>
        <column field="Project.Id" name="Project"></column>
    </columns>
</div>

Babel + JSX

console.clear();

let target = document.querySelector("#target");
let columns = [...target.querySelectorAll("columns column")].map(c =>
	({
		...[...c.attributes].reduce((p, c) =>
											({ ...p,
												[c.name.replace(/-([a-z])/g, m => m[1].toUpperCase())]:
													c.value.startsWith("=")
														? JSON.parse(c.value.substring(1))
														: c.value
											}), {}),
		cellTemplate: c.innerHTML
	}));

console.log(columns);