Introduction

As a frontend developer, often you get frustrated when development is delayed due to lack of an actual API. It could be because the backend team taking too much time to create the endpoint the application is to consume or it could be due to technical issues related to the endpoint call.

When you find yourself in this kind of situation, it is advisable to create your own mock API endpoints using a local JSON file so as to accelerate development and also save yourself from having to wait for the backend guys to get you what you need.

This tutorial provides a step by step guide on how to create a react-app and setup a Mock API which can be consumed as though you’re making a backend call.

Introduction

As a frontend developer UI UX design sometimes contain some feature that are not readily available out of the box in your chosen programming language, Frameworks or library. So you’re left with no choice than to improvise.

What do I mean by this? Observe the picture below
.

If you observe very well, the calendar object is just a normal react-icon .
The challenge here is, all the date picker library out there comes with a UI element which may not conform with the current design
e.g., .

Introduction

A Table is an essential building block of a user interface which is very critical for displaying data in a web, mobile or desktop App. Also referred to as data grid, a Table is an arrangement of data in rows and columns or in a more complex structure.

The goal of every frontend developer is to create an intuitive user interface with data properly displayed regardless of screen size. Hence the importance of tables in UI UX cannot be over emphasized in software development as a whole.

In the first two part of this guide, we

• Setup a mock API - we did this to simulate API call to a backend

• Setup React Table - we setup a react-table at the most basic level

• Implemented Table Pagination - We implemented Pagination functionality for our table

For clarity sake, if you’re not already familiar with react-table it is recommended that you setup the Table by going through the previous guides respectively:

How to Create Dynamic Tables From React Table v7

How To Implement Table Pagination React-Table v7

In this part, we will

• Create a Date-Picker Component for Date Filtering

• Create a Component with several option buttons for the purpose Filtering Table by transactions category

• Create a Search Component for Filtering the Table base on the search value

• Implement React-Table Filter Hooks

  • useFilters
  • useGlobalFilter

This guide is a build up from our previous guide: How To Create Dynamic Tables From React Table v7

In the first part, we

• Setup a mock API - we did this to simulate API call to a backend

• Setup React Table - we setup a react-table at the most basic level

• Customized the Table date and status Column to make it more appealing - we demonstrated how to customize individual Table Cells to suit our need

For clarity sake, if you’re not already familiar with react-table it is recommended that you setup the Table by going through the previous guide

In this part, we will

• Add a UI Pagination Component at the bottom of our table

• Implement React-Table Pagination Hook (usePagination) functionality in the table

  Read more »