Transpiler of external libraries in grafana plugin

Grafana Plugin Development
1

Hello,
I am a beginner in reactJs and I am currently developing a plugin for grafana. I tested a lot of things that worked very well. The only problem now is that I would like to use Material but I feel that it does not detect it. An idea?

import React, { PureComponent } from 'react';
import { PanelProps, PanelPlugin } from '@grafana/ui';
import MaterialTable from 'material-table';
/* import Datas from './components/datas'; */

export class MyPanel extends PureComponent<PanelProps> {
/*   state = {
    datas: [],
  }; */

  constructor(props: any) {
    super(props);
  }

/*   componentDidMount() {
    fetch('http://jsonplaceholder.typicode.com/todos')
      .then(res => res.json())
      .then(data => {
        this.setState({ datas: data });
      })
      .catch(console.log);
  } */

  render() {
    return (
      <MaterialTable
        title="Editable Example"
        columns={[
          { title: "Adı", field: "name" },
          { title: "Soyadı", field: "surname" },
          { title: "Doğum Yılı", field: "birthYear", type: "numeric" }
        ]}
        data={[{ name: 'Mehmet', surname: 'Baran', birthYear: 1987 }]}
      />
    );
  }

  /*   render() {
    return (
      <Datas datas={this.state.datas} />
    )

  } */
}

export const plugin = new PanelPlugin(MyPanel);

I tried to position the module in the dist / external part. I can see that the module has been detected and accessible (http: // localhost: 3000 / public / plugins / issue-simple-panel / external / material-table / dist / index.js). The problem is that Material-table has other dependencies. So how to do that? Does Grafana offer a solution for external dependencies?

1 Like