Develop DataTable in React
Budget: ₹600 – ₹3,000 INR
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. You have to integrate the datatable to an API. Take any dummy API just to check the table functionality.
On hover effects must be there.
On hove Name (if name is too long it has to show some fixed length characters and on hover it show full name in tooltip). 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.
On click filter it should throw a pop-up as shown in the Data-Table-filter-pop-up
Table must look exactly same as Data-Tables.pdf
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). 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.
After development you have to give me the word document on how to use this table, and about dynamic variables, buttons, search, headers, datatables, table headers, etc.
This is only front-end project.
Code has to be clean and neat. You have to integrate the datatable to an API. Take any dummy API just to check the table functionality.
On hover effects must be there.
On hove Name (if name is too long it has to show some fixed length characters and on hover it show full name in tooltip). 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.
On click filter it should throw a pop-up as shown in the Data-Table-filter-pop-up
Table must look exactly same as Data-Tables.pdf
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). 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.
After development you have to give me the word document on how to use this table, and about dynamic variables, buttons, search, headers, datatables, table headers, etc.
This is only front-end project.