[new bee] Trying to load orb component in the react but nothing showing up

[sitaramaiah]

Hi ,

I am very new react and orb. Trying to implement orb as a component in the react part of div tag. But i don't see any example for direct usage in react module. Please share any working example. sharing the below code . please correct me in case of any issues.

import orb from 'orb';
import pgridwidget from 'orb';
import demo from '../demo.data.js';
import react, {Component} from "react";
import ReactDOM from "react-dom";

window.React = react;
window.ReactDOM = ReactDOM;

const config = {
dataSource: demo,
canMoveFields: true,
dataHeadersLocation: 'columns',
width: 1099,
height: 611,
theme: 'green',
toolbar: {
visible: true
},
grandTotal: {
rowsvisible: false,
columnsvisible: false
},
subTotal: {
visible: true,
collapsed: true,
collapsible: true
},
rowSettings: {
subTotal: {
visible: true,
collapsed: true,
collapsible: true
}
},
columnSettings: {
subTotal: {
visible: false,
collapsed: true,
collapsible: true
}
},
fields: [
{
name: '6',
caption: 'Amount',
dataSettings: {
aggregateFunc: 'sum',
aggregateFuncName: 'whatever',
formatFunc: function(value) {
return value ? Number(value).toFixed(0) + ' $' : '';
}
}
},
{
name: '0',
caption: 'Entity'
},
{
name: '1',
caption: 'Product',
},
{
name: '2',
caption: 'Manufacturer',
sort: {
order: 'asc'
},
rowSettings: {
subTotal: {
visible: false,
collapsed: true,
collapsible: true
}
},
},
{
name: '3',
caption: 'Class'
},
{
name: '4',
caption: 'Category',
sort: {
order: 'desc'
}
},
{
name: '5',
caption: 'Quantity',
aggregateFunc: 'sum'
}
],
rows : [ 'Manufacturer'],//, 'Category' ],
columns : [ 'Class', 'Category' ],
data : [ 'Quantity', 'Amount' ],
/preFilters : {
'Class': { 'Matches': 'Regular' },
'Manufacturer': { 'Matches': /^a|^c/ },
'Category' : { 'Does Not Match': 'D' },
// 'Amount' : { '>': 40 },
// 'Quantity' : [4, 8, 12]
}/
};

export default class OrbComponent extends React.Component {
constructor(props) {
super(props);
}

render() {
const pgridwidget= new orb.pgridwidget(config);

    return(
    <div>
    <pgridwidget/>
    </div>

    );
}

}

[vikaschouhan8]

You forget to render the table generated