Let’s add some functionality to our grid, such as sorting and pagination.
To create pagination, we’ll pass our UIKernel.Grid
the viewCount
property. In this example, we’re going to display 10 records per page.
MainComponent.js
:
<UIKernel.Grid
model={this.state.model}
cols={columns}
viewCount={10} // display 10 records per page
/>
Next, we’ll pass the sortCycle
property to columns. This will allow us to sort our grid data.
columns.js
:
const columns = {
name: {
name: 'First Name',
sortCycle: ['asc', 'desc', 'default'], // add sorting
render: ['name', record => record.name]
},
// ...
};
Now as you click your grid headers, you’ll see your grid sorted by ascending or descending.