I want you to develop two datatables and three pop-up forms using react bootstrap. Table must me responsive. Table header sorting must work (ex: high,low, A-Z, Z-A, etc sorting) like jquery data table.
Code has to be clean and neat. Take any dummy data just to check the table functionality.
On hover effects must be there.
Pagination must work perfectly, Showing entries in the table must work perfectly.
On click update status button it should throw a pop-up as shown in the Data-Table-pop-up.pdf.
Table must look exactly same as [login to view URL]
On-click checkbox in the header it show tick all the check boxes for bulk actions.
In the search input field there must be place-holder animation (It should type automatically to gain the user attention example:[login to view URL] / [login to view URL]).
In the pop-up when we search for something it show show suggestions as shown in the pop-up.
You have give dynamic variables for colors, because we allow our users to change the colors at their end. So, you have to allow us to give dynamic variables for colors and write comments there clearly.
In mobile view keep first two columns fixed and allow remaining columns scroll so that user can understand who's data is he viewing.
I have attached the mockup files.
You must write clean code for and write clear comments and instructions to use it easily. After developing it you have to show me the output in an URL so that I can check it quickly.
Comments must be very clear. Use bootstrap react. Other developer is also working on other modules so make sure to give independent css files to each component and name them properly.