Skip to content
+

Data providers

Bring tabular data to the frontend with server-side pagination and filtering.

Toolpad functions are great to bring some backend state to the page, but they fall short when it comes to offering pagination and filtering capabilities from the server. Toolpad offers a special construct to enable this use case: Data providers. Data providers abstract server-side collections. They could be database tables, REST APIs, or any data that represents a set of records that share a common interface. Data providers are defined as server-side objects and can be directly connected to a data grid to make it fully interactive.

Follow these steps to create a new data provider:

A data provider that iterates over a static list could look as follows:

import { createDataProvider } from '@mui/toolpad-core/server';
import DATA from './movies.json';

export default createDataProvider({
  async getRecords({ paginationModel: { start = 0, pageSize } }) {
    const records = DATA.slice(start, start + pageSize);
    return { records, totalCount: DATA.length };
  },
});

Pagination

The data provider supports two styles of pagination. Index based, and cursor based pagination.

Index based

This is the strategy your data is paginated by when it returns data based on a page number and page size. The getRecords method will receive page and pageSize values in it paginationModel parameter and returns a set of records representing the page. Index based pagination is the default but you can explicitly enable this by setting paginationMode to 'index'.

export default createDataProvider({
  paginationMode: 'index',
  async getRecords({ paginationModel: { start = 0, pageSize } }) {
    const { page, totalCount } = await db.getRecords(start, pageSize);
    return {
      records: page,
      totalCount,
    };
  },
});

Cursor based

This is the strategy your data is paginated by when it returns data based on a cursor and a page size. The getRecords method will receive cursor and pageSize values in its paginationModel parameter and returns a set of records representing the page. You indicate the cursor of the next page with a cursor property in the result. Pass null to signal the end of the collection. You can enable Cursor based pagination by setting paginationMode to 'cursor'.

The cursor property of the paginationModel is null when Toolpad fetches the initial page. Any result set returned from the getRecords function must be accompanied with a cursor property, a string which contains a reference to the next page. This value will be passed as the cursor parameter in the paginationModel when fetching the subsequent page. Return null for this value to indicate the end of the sequence.

export default createDataProvider({
  paginationMode: 'cursor',
  async getRecords({ paginationModel: { cursor = null, pageSize } }) {
    const { page, nextPageCursor, totalCount } = await db.getRecords(
      cursor,
      pageSize,
    );
    return {
      records: page,
      cursor: nextPageCursor,
      totalCount,
    };
  },
});

Filtering 🚧

Sorting 🚧

Row editing 🚧

Row creation 🚧

Deleting rows 🚧

API

See the documentation below for a complete reference to all of the functions and interfaces mentioned in this page.