To get started follow next steps:
# Setup React boilerplate
npm install -g create-react-app
create-react-app react-app
cd react-app
# Install UIKernel
npm i uikernelsrc/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 => record.name]
},
surname: {
name: 'Last Name',
render: ['surname', record => record.surname]
},
age: {
name: 'Age',
render: ['age', record => record.age]
}
};
ReactDOM.render(
<UIKernel.Grid cols={columns} model={model}/>,
document.getElementById('root')
);
npm start commandAs 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.
Check out the tutorial and examples to learn more.