This is my first time working with react-admin. I've completed the tutorial setup from the documentation. The problem starts when I implement the same setup for my API.

I've a web API route set with expressJS to fetch data from mySQL database. The earlier error was to include X-Total-Count in HTTP response header for the sake of pagination to work on React-Admin.

I've added the X-Total-Count in the HTTP response header and the data is fetching successfully from the Web API to react-admin interface. However, the pagination is still not working as expected.

The snippets below might be helpful.

In App.js

  <Admin dataProvider={jsonServerProvider("/api/fetch/")}>
    <Resource
      name="temp"
      list={UserList}
      edit={UserEdit}
      create={CreateUser}
    />
  </Admin>

The Web express API in fetch.js

route.get('/temp', (req, res) => {
  sql.query(`SELECT * FROM temp`, (err, result) => {
    if (err) {
        return res.status(400).send(`Invalid Request: ${err}`)
    }

    res.setHeader('X-Total-Count', result.length)

    return res.status(200).send(result)
  })
})

In server.js

app.use(cors());   // using cors

The react-admin is showing all the data fetched from web API in a single table with no pagination and sorting features which is not what I wanted. As you can see the pagination is set to display 10 records per table and split the remaining records on pagination, while in my case all data is displaying on single table with pagination menu not effective.

Similarly, the sorting on the table based on columns isn't working as well

click to see output screenshot

1 Answers

0
Mário Ferreiro On

When you have pagination, or by the default in <List> React-Admin fetches records in batches by sending a query string to backend to limit the response to a certain number. The response is then presented on the frontend. From what I can see your backend returns all records in the table independently from the request query string. Either if you say to limit response to 10 records or if you don't, it will always return all records on table so it will show all record on frontend.

You can see too that you don't have sorting since in the question image you have University Name sorted by ascending order, but the records appear sorted by id.