- It is necessary to develop a React application to display a table with data.
- An additional advantage will be the launch of the final build of the application from the Docker container (with minimal configuration)
- Sort by columns: when you click on the name of a column, the table rows are sorted in ascending order, when you click again — in descending order. The sorting direction is indicated by a graphic element or a text message.
- Client-side pagination: data must be displayed per page, maximum 50 items per page. You must provide custom navigation to navigate through the pages.
- Filtering: the component provides a text field in which the user can enter text and table rows, the data of which does not contain the substring entered by the user, are hidden. Re-filtering is carried — ut by clicking on the "Find" button.
- By clicking on a row in the table, the field values are displayed in an additional block below the table.
- Data is loaded into the table from the server. Download method from the server of your choice.
- Above the table there is a Create new reccord button, by clicking on which the form for adding a row drops out
+------+------------+-----------------+-----------------+---------------+
| id | firstName | lastName | email | phone |
+------+------------+-----------------+-----------------+---------------+
|input | input | input | input | input |
+------+------------+-----------------+-----------------+---------------+- After filling in all inputs, the Add new reccord button is activated, which inserts the filled row at the beginning of the table
To demonstrate how the component works, you need to create a simple HTML page: the user is prompted to select a dataset: little or large.
- Particular attention should be paid to the speed of work. Interface freezing during data loading, filtering, sorting operations is unacceptable.
- When loading data, it is worth showing some kind of indicator
- Using third-party libraries will be a plus only if it is justified and you can explain the reason for the choice. By showing your knowledge in the competent use of third-party ready-made solutions, you have a chance to increase your professional attractiveness for us.
- Write the code the way you would write it at work — the internals of the assignment will be assessed even more carefully than the external compliance with the assignment. The code should be organized so that it can be reused.
- Remember about error handling!
- The layout can be the simplest. Make visualization and decoration to your taste. We are not against using Bootstrap or a similar UI framework, but only for the UI presentation (you cannot use JS code to solve the problem, but you can use it for design effects (animations, etc.))!
+------+------------+-----------------+-----------------+---------------+
| id ▲ | firstName ▼| lastName ▼ | email ▼| phone ▼|
+------+------------+-----------------+-----------------+---------------+
| 101 | Sue | Corson | DWhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
| 102 | Lor | Ipsumd | dwhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
| 103 | Ips | Umdolo | dwhalley@in.gov | (612)211-6296 |
+------+------------+-----------------+-----------------+---------------+
If selected by the user with ʻid = 101`, then below the table we display the following information:
Выбран пользователь <b>Sue Corson</b>
Описание:
<textarea>
et lacus magna dolor...
</textarea>
Адрес проживания: <b>9792 Mattis Ct</b>
Город: <b>Waukesha</b>
Провинция/штат: <b>WI</b>
Индекс: <b>22178</b>- Google DevTools (mostly Console, Network tabs)
- React Developer Tools
- Testing tools similar to the Jest framework were not used as unnecessary
If, when working with the codesandbox site , loading data when clicking on one of the buttons does not happen, then you need to follow the link https://cors-anywhere.herokuapp.com/ and activate a proxy server for your PC. After that, clicking on the buttons should work
=======