Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hello World Component for Dashbuilder using React
import * as React from "react";
import { ComponentController, DataSet } from "@dashbuilder-js/component-api";
import { useState, useEffect } from "react";
const NAME_PROP = "name";
const DEFAULT_NAME = "World";
interface Props {
controller: ComponentController;
}
export function HelloWorldComponent(props: Props) {
const [name, setName] = useState<string>(DEFAULT_NAME);
const [dataset, setDataset] = useState<DataSet>();
useEffect(() => {
props.controller.setOnInit((params: Map<string, any>) => {
setName(params.get(NAME_PROP) || DEFAULT_NAME);
});
props.controller.setOnDataSet((_dataset: DataSet) => {
setDataset(_dataset);
});
}, [props.controller]);
return (
<>
<h2>Hello {name}!</h2>
{dataset && (
<div>
<h4>Dataset</h4>
<table>
<thead>
<tr>
{dataset.columns.map(c => (
<th>{c.name}</th>
))}
</tr>
</thead>
<tbody>
{dataset.data.map((row, i) => (
<tr key={i}>
{row.map((val, j) => (
<td key={j}>{val}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
)}
</>
);
}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { HelloWorldComponent } from "./HelloWorldComponent";
import { ComponentApi } from "@dashbuilder-js/component-api";
const api = new ComponentApi();
ReactDOM.render(<HelloWorldComponent controller={api.getComponentController()} />, document.getElementById("app")!);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment