First, let’s create a client model for our grid and pass it some fake data.
model.js:
const model = new UIKernel.Models.Grid.Collection({
data: [
[1, {id:1, name: "Sonya", surname: "Weaver", phone: "555-0159", age: 59, gender: 2}],
[2, {id:2, name: "Bates", surname: "Weaver", phone: "555-0144", age: 54, gender: 2}],
[3, {id:3, name: "Rodriguez", surname: "Terrell", phone: "555-0146", age: 40, gender: 1}]
// ...
]
});Here, we’ve used UIKernel.Models.Grid.Collection and passed it a settings object as an argument.
If you want a grid to use server data, apply UIKernel.Models.Grid.Xhr:
const model = new UIKernel.Models.Grid.Xhr({
api: 'https://example.com/api/users', // Your Grid API
});Next, we’ll configure columns.
columns.js:
const columns = {
name: {
name: 'First Name', // column title
render: ['name', record => _.escape(record.name)] // method for rendering of table cells
},
surname: {
name: 'Last Name',
render: ['surname', record => _.escape(record.surname)]
},
phone: {
name: 'Phone',
render: ['phone', record => _.escape(record.phone)]
},
age: {
name: 'Age',
render: ['age', record => record.age]
},
gender: {
name: 'Gender',
render: ['gender', (record) => {
switch (record.gender) {
case 1:
return 'Male';
case 2:
return 'Female';
default:
return 'Undefined';
}
}]
}
};columnsis an object with string IDs as properties and configuration objects as their values.
We’ve passed our configuration objects only two props: name and render. There are also other props.
You can read about them here.
Now we need to render our grid. Let’s do it in the render method of another component named MainComponent.
MainComponent.js:
class MainComponent extends React.Component {
constructor(props) {
super(props);
this.state = {model};
}
render() {
return (
<div>
<UIKernel.Grid
model={this.state.model} // Grid model
cols={columns} // columns configuration
/>
</div>
);
}
}Finally, let’s render MainComponent.
main.js:
ReactDOM.render(<MainComponent/>, document.getElementById('example'));