Getting Started

To get started follow next steps:

  1. Setup Create React App in terminal
# Setup React boilerplate
npm install -g create-react-app
create-react-app react-app
cd react-app

# Install UIKernel
npm i uikernel
  1. Open up src/index.js and replace all with the next piece of code
 import React from 'react';
 import ReactDOM from 'react-dom';
 import UIKernel from 'uikernel';
 import 'uikernel/themes/base/main.css';

 const model = new UIKernel.Models.Grid.Collection({
   data: [
     [1, {
       name: 'Pace',
       surname: 'White',
       age: 20
     [2, {
       name: 'Evangeline',
       surname: 'Terrell',
       age: 72
     [3, {
       name: 'Roach',
       surname: 'Potts',
       age: 14

 const columns = {
   name: {
     name: 'First Name',
     render: ['name', record =>]
   surname: {
     name: 'Last Name',
     render: ['surname', record => record.surname]
   age: {
     name: 'Age',
     render: ['age', record => record.age]

   <UIKernel.Grid cols={columns} model={model}/>,
  1. Try it out now using the npm start command

As you can see, we’ve passed UIKernel.Grid two props: cols and model. We’ve defined these props in the columns and model script parts as you can see in comments.

Then, to create a grid model, we’ve used UIKernel.Models.Grid.Collection.

And that’s all. Here’s the live demo and code.

Next Steps

Check out the tutorial and examples to learn more.