How to render clickable urls using react-json-to-table? - html

Question

i'm new to coding and i'm building a web app using reactjs. i need to render a widget that contains a table to display data that comes from the back-end in json format. The table will change dynamically over time and will always be different.
I found a library that could work for me :
https://github.com/thehyve/react-json-to-table
It works like wonders, but i can't render clickable urls in the tables.
Someone can help me archieve this?
i have some data like this:
{
"Loaded by": "Jills",
"Load id": 34,
"git id": "xxqaygqertqsg98qhpughqer",
"Analysis Id": "7asdlnagsd98gfaqsgf",
"Load Date": "July 12, 2018",
"Data Source": "Study XY123-456",
"Jira Ticket": "Foo-1",
"Confluence URL": "http://myserver/wxyz"
}
the my component looks like this:
export default class TableWidget extends BaseWidget {
constructor(props) {
super(props);
const { data } = this.props;
const data2 = data;
this.state = {
data: this.getData(data2)
};
this.handleResize = this.handleResize.bind(this);
}
componentWillMount() {
super.componentWillMount();
this.props.socket.on(`widget:update:${this.props.jobName}:${this.props.name}`, datas => {
logger('info', `updating widget: ${this.props.jobName}:${this.props.name}`, datas);
this.setState({
data: this.getData(datas.value),
});
});
}
getData(data) {
const demoJson = {
"Loaded by": "Jills",
"Load id": 34,
"git id": "xxqaygqertqsg98qhpughqer",
"Analysis Id": "7asdlnagsd98gfaqsgf",
"Load Date": "July 12, 2018",
"Data Source": "Study XY123-456",
"Jira Ticket": "Foo-1",
"Confluence URL": "http://myserver/wxyz"
};
if (data == null )
return demoJson;
else
return data;
}
static get layout() {
return {
x: 0,
y: 0,
w: 4,
h: 3,
minH: 3,
maxH: 40,
minW: 4,
maxW: 10,
};
}
static get className() {
return 'TableWidget';
}
handleResize() {
this.chart.reflow();
}
render() {
const classList = classNames(...this.classList, 'widget', 'widget__table',);
return (
<div className={classList}>
<h1 className="widget__title">{this.props.title}</h1>
<JsonToTable json={this.state.data} />
</div>
);
}
}
TableWidget.propTypes = {
title: PropTypes.string.isRequired,
};
the table renders fine but i want to be albe to clikc on the "conference url". how can i archieve this?
maybe I could use one of these two libraries?
https://github.com/arqex/react-json-table
or
https://github.com/agracio/ts-react-json-table
thanks for the help and sorry if i made some English or code abominations.