React List - Paging

Paging properties are set in the DataSource: paginate enables paging; pageSize specifies how many data items a page should contain.

jQuery
JavaScript
$(function() {
    $("#listContainer").dxList({
        dataSource: new DevExpress.data.DataSource({
            store: /* A store is configured here */,
            paginate: true,
            pageSize: 10
        }),
        // ...
    });
});
Angular
TypeScript
HTML
import { DxListModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    listDataSource = new DataSource({
        store: /* A store is configured here */,
        paginate: true,
        pageSize: 10
    });
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
<dx-list ...
    [dataSource]="listDataSource">
</dx-list>
Vue
App.vue
<template>
    <DxList
        :data-source="listDataSource"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxList from 'devextreme-vue/list';
import DataSource from 'devextreme/data/data_source';

const listDataSource = new DataSource({
    store: /* A store is configured here */,
    paginate: true,
    pageSize: 10
});

export default {
    components: {
        DxList
    },
    data() {
        return {
            listDataSource
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import List from 'devextreme-react/list';
import DataSource from 'devextreme/data/data_source';

const listDataSource = new DataSource({
    store: /* A store is configured here */,
    paginate: true,
    pageSize: 10
});

export default function App() {
    return (
        <List
            dataSource={listDataSource}
        />
    );
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().List()
    .ID("list")
    .DataSource(d => d
        // Data access is configured here
    )
    .DataSourceOptions(o => o
        .Paginate(true)
        .PageSize(10)
    )
)

The next page can be rendered when a user scrolls the List down to the bottom, or after a user clicks the More button. Set the pageLoadMode property to specify the mode:

jQuery
JavaScript
$(function() {
    $("#listContainer").dxList({
        // ...
        pageLoadMode: "scrollBottom" // or "nextButton"
    });
});
Angular
HTML
TypeScript
<dx-list ...
    pageLoadMode="scrollBottom"> <!-- or "nextButton" -->
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxList ...
        page-load-mode="scrollBottom" /> <!-- or "nextButton" -->
</template>

<script>
// ...
</script>
React
App.js
// ...
export default function App() {
    return (
        <List ...
            pageLoadMode="scrollBottom" /> {/* or "nextButton" */}
    );
}
NOTE
The List renders as many pages as it can fit into its height when the UI component is displayed for the first time and the pageLoadMode is set to "scrollBottom".

Local arrays and remote datasets loaded using the CustomStore in raw mode are only rendered page by page. In other cases, remote datasets are also loaded page by page if the server can partition data.

See Also