How to implement Dynamodb Pagination in Material UI Table

user_10686620 0
Viewed 1177

I want to create a table in Frontend like this, which can change pages and even rows per page(not necessary)
I am going to create a lambda function(with nodejs) to retrieve the data with pagination.

enter image description here

But Dynamodb uses LastEvaluatedKey and ExclusiveStartKey for pagination, which is totally weird for beginners like me. It seems impossible to apply the normal pagination in the above table.

The only solution I can think of is to get all data from dynamodb and store it in Frontend, and then do the pagination in the frontend, but it seems it’s going to consume a lot of RCU.

What would dynamodb developer do to handle this kind of pagination?

amazon-dynamodb nosql amazon-web-services database
2 Answers

That so, if we have big rows of data on dynamodb table, we will have max limit 1MB for one query/scan request. Let say we have 100K rows of data and we do a scan to that table, dynamodb will count the data size. If 100K rows is under 1MB, we will get all data in once scan request. Vice versa, we will get the partial rows (i.e 80k rows) with an additional key "LastEvaluatedKey" on the response. This "LastEvaluatedKey" will be useful for us to make the next scan by passing the "LastEvaluatedKey" value into "ExclusiveStartKey" parameter key. From now we should familiarize ourself with these keys in query or scan method.

It's not the best practice to make common scan for big rows of data (like above sample). We will define the page size to limit the returned data item. For javascript SDK (Nodejs included), we will define this by "Limit" parameter key. For example we want 5 items for every request, so we set the Limit: 5.

Little summaries

Let me show you a sample scan with pagination :

  scanData(LastEvaluatedKey) {
    var params = {
      TableName: 'nutrition',
      Limit: 5,
      ExclusiveStartKey: LastEvaluatedKey ? LastEvaluatedKey : undefined
    };
    var documentClient = new AWS.DynamoDB.DocumentClient();
    documentClient.scan(params).promise().then(res => {
      console.log(res)
      // It will be passed for the next scan
      // i.e this.scanData(res.LastEvaluatedKey)
      console.log(res.LastEvaluatedKey)
    }).catch(e => {
      console.log(e)
    })
  }

Actually I would prefer to use query method instead of scan on this case. But I'm not sure how did you create the table structure. From your sample data, I will assume "dessert" is your table partition key. So it's hard for me to give a query sample. Check the following link for Best Practices for Querying and Scanning Data

user_58205390

Instead of bending DDB to meet your UI tables pagination style, you may want to consider a UI component that is compatible with DDB pagination.

For example, the Material UI docs show how to use a Virtualized Table that does away with pagination controls. You can see a complete code example here.

Unless your use case specifically requires page numbers in the pagination controls (e.g. page 4 of 50), why not just provide alternative pagination styles (next/prev buttons, infinite scrolling, etc) without providing which page of the results you are on? You may find that paginating results this way will satisfy the needs of your application without the need to come up with a more sophisticated solution.

user_135496640
Related