Remote Data

This feature allows the user to implement a custom data fetching function. Using this functionality searching, filtering, sorting and paging are ignored and have to be manually implemented.

Props

Field	Type	Description
data	Array or func	Data to be rendered

Usage

import MaterialTable from "@material-table/core";

<MaterialTable
  // ...
  data={(query) =>
    new Promise((resolve, reject) => {
      let url = "https://reqres.in/api/users?";
      url += "per_page=" + query.pageSize;
      url += "&page=" + (query.page + 1);
      fetch(url)
        .then((response) => response.json())
        .then((result) => {
          resolve({
            data: result.data,
            page: result.page - 1,
            totalCount: result.total,
          });
        });
    })
  }
/>;

Live Demo

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor

function RemoteData() {
  return (
    <MaterialTable
      columns={[
        {
          title: "Avatar",
          field: "avatar",
          render: (rowData) => (
            <img
              style={{ height: 36, borderRadius: "50%" }}
              src={rowData.avatar}
            />
          ),
        },
        { title: "Id", field: "id" },
        { title: "First Name", field: "first_name" },
        { title: "Last Name", field: "last_name" },
      ]}
      data={(query) =>
        new Promise((resolve, reject) => {
          let url = "https://reqres.in/api/users?";
          url += "per_page=" + query.pageSize;
          url += "&page=" + (query.page + 1);
          fetch(url)
            .then((response) => response.json())
            .then((result) => {
              resolve({
                data: result.data,
                page: result.page - 1,
                totalCount: result.total,
              });
            });
        })
      }
    />
  );
}

Result

Loading...