Grid with Pagination

Grid control is commonly combined with server-side sorting, filtering and pagination.

Name	Phone	City

Julius Bernhard	180-367-3442	Rosettaport
Libbie Jerde	168-502-9154	Lemkeview
Ernesto Kunde	491-554-7800	Port Keaton
Sanford VonRueden	059-350-5697	Jedediahport
Deion Dickens	131-887-3873	South Othoberg
Isabelle Haag	889-632-4203	East Justus
Eulalia Blick	057-425-8787	Alexieberg
Edmond Bode	027-862-4685	Doyleberg
Hollie King	391-009-0196	East Jeanie
Arvilla Labadie	892-266-4113	Douglasbury

Controller Index

<Grid records-bind='$page.records'
    style={{width: "100%"}}
    mod="bordered"
    lockColumnWidths
    columns={[
        {
            field: 'fullName',
            sortable: true,
            header1: 'Name',
            header2: {
                allowSorting: false,
                items: <TextField value-bind="$page.filter.name" reactOn="enter blur"
                                    style="width:100%"/>
            }
        },
        {
            header1: 'Phone',
            header2: {
                items: <TextField value-bind="$page.filter.phone" reactOn="enter blur"
                                    style="width:100%"/>
            },
            field: 'phone'
        },
        {
            header1: 'City',
            header2: {
                allowSorting: false,
                items: <TextField value-bind="$page.filter.city" reactOn="enter blur"
                                    style="width:100%"/>
            },
            field: 'city',
            sortable: true
        }
    ]}
    sorters-bind="$page.sorters"
    remoteSort
/>

<div style={{marginTop: '20px'}}>
    <Pagination page-bind="$page.page" pageCount-bind="$page.pageCount"/>
    <Select value-bind="$page.pageSize" style={{float: 'right'}}>
        <option value="5">5</option>
        <option value={10}>10</option>
        <option value="20">20</option>
        <option value="50">50</option>
    </Select>
</div>

Copied!Cx Fiddle

Pagination Configuration

Property	Description	Type
length	Number of page buttons to be displayed. Default is 5.	number
page	Currently selected page.	number
pageCount	Total number of pages.	number
baseClass	Base CSS class to be applied to the field. Defaults to `pagination`.	string
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Grid with Pagination