Books List

Now that we have a way to call our REST API, let’s have a look at the view component of the application that will display all of the books in our database as a formatted list. Doing that will require several aspects:

Container component
├── Title bar
│    ├── Title
│    └── Close button
├── Table component
│    ├── Column headings
│    └── Rows of book records
├── Function to get data on load
├── Function to sort data
└── Wait icon to display while getting data

About the application

In this application we have three state variables:

• books, which stores a list of books.
• sortkey, which sorts the table column-wise.
• showprogress, which shows the wait icon until it is required.

Next, we have the getBooks() function that will list down all of the books on our book view. We also have an IconButton component to close the view, and a BooksTable component that will be mainly responsible for providing us with a fully functional table view. Finally, we have the CircularProgress component, which will tell the user to wait until the fetch call returns with some data.

This is what the application will look like: