Grid Component

Let's create a simple page using todos grid we created earlier. We will just add a title on top of the grid. Open Frontend Sandbox from New Editor on main menu.

Click on to the right of grd_todos to get the code for importing the grd_todos component.

Copy this code. await iwb.registerGrid({name:"grd_todos",id:5084}); code imports React component grd_todos and we will useReact.createElement(iwb.ui.buildPanel,{grid:grd_todos}) to render the grid.

Let's modify the code to create a page that has todos grid with a title on top of it. Write this following code and click on button at the top right.

await iwb.registerGrid({name:"grd_todos",id:5084});
​
//you have to return a React Element
return React.createElement('div', {},
    React.createElement('h1', {
        className: 'text-center',
        style: { 'color': 'black' }
    }, 'Todos'),
    React.createElement(iwb.ui.buildPanel,{grid:grd_todos})
);