[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