[{"_1":2,"_163":-5,"_164":-5},"loaderData",{"_3":4,"_18":19,"_25":26,"_142":143},"root",{"_5":-5,"_6":-7,"_7":8,"_9":-7,"_10":11,"_12":-7,"_13":14,"_15":16,"_17":11},"currentUser","primaryEmail","siteVerification","6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI","toast","enableDev",false,"incidentStatus","theme","system","contrast","normal","dockerRebrandTour","routes/_layout",{"_20":-5,"_21":22,"_23":11,"_24":22},"username","isAskGordonEnabled",true,"showMinimalLanding","showHoneypotTrap","routes/_layout.r.$namespace.$reponame",{"_27":28,"_29":-5,"_30":11,"_31":11,"_32":33,"_34":35,"_36":-5,"_37":11,"_38":39,"_88":-5,"_89":90,"_129":-5,"_130":11,"_131":22,"_132":11,"_133":11,"_134":11,"_135":-5,"_136":11,"_137":-5,"_138":139,"_140":91,"_141":-7},"canonicalUrl","https://hub.docker.com/r/sxidsvit/react-table-git/tags","mcpServer","canSeeDockerfile","canSeeAutobuilds","namespace","sxidsvit","reponame","react-table-git","cloudBuildSource","isAutobuildsAvailable","repo",{"_40":41,"_42":43,"_45":46,"_47":48,"_49":11,"_50":51,"_52":53,"_54":55,"_57":35,"_32":33,"_58":59,"_60":44,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":62,"_69":70,"_71":11,"_72":33,"_73":74,"_79":11,"_80":81,"_85":33,"_86":87},"categories",[],"content_types",[44],"image","date_registered","2020-10-16T23:10:57.649707Z","description","Updating this repository is done automatically from https://github.com/sxidsvit/react-table.git","is_private","last_updated","2020-10-17T00:59:12.489825Z","last_modified","2024-10-16T13:48:34.145251Z","media_types",[56],"application/vnd.docker.container.image.v1+json","name","pull_count",877,"repository_type","star_count",0,"status",1,"status_description","active","source","collaborator_count","full_description","# Completed by me test task for frontend developer position\n\n## The task\n\n- It is necessary to develop a React application to display a table with data.\n- An additional advantage will be the launch of the final build of the application from the __Docker container__ (with minimal configuration)\n\n#### Required functionality\n\n- 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.\n- Client-side pagination: data must be displayed per page, maximum 50 items per page. You must provide custom navigation to navigate through the pages.\n- 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.\n- By clicking on a row in the table, the field values are displayed in an additional block below the table.\n- Data is loaded into the table from the server. Download method from the server of your choice.\n- Above the table there is a __Create new reccord__ button, by clicking on which the form for adding a row drops out\n\n```js\n\t+------+------------+-----------------+-----------------+---------------+\n\t| id | firstName | lastName | email | phone |\n\t+------+------------+-----------------+-----------------+---------------+\n\t|input | input | input | input | input |\n\t+------+------------+-----------------+-----------------+---------------+\n```\n\n- After filling in all inputs, the __Add new reccord__ button is activated, which inserts the filled row at the beginning of the table\n \n---\n\nTo demonstrate how the component works, you need to create a simple HTML page:\nthe user is prompted to select a dataset: [little](http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}) or [large](http://www.filltext.com/?rows=1000&id={number|1000}&firstName={firstName}&delay=3&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}). \n\n---\n\n#### Remarks\n\n- Particular attention should be paid to the speed of work. Interface freezing during data loading, filtering, sorting operations is unacceptable.\n- When loading data, it is worth showing some kind of indicator\n- 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.\n- 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.\n- Remember about error handling!\n- The layout can be the simplest. Make visualization and decoration to your taste. We are not against using [Bootstrap](http://getbootstrap.com/) 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.))!\n\n---\n\n#### Schema of visual presentation of data in a table\n\n```\n+------+------------+-----------------+-----------------+---------------+\n| id ▲ | firstName ▼| lastName ▼ | email ▼| phone ▼|\n+------+------------+-----------------+-----------------+---------------+\n| 101 | Sue | Corson | DWhalley@in.gov | (612)211-6296 |\n+------+------------+-----------------+-----------------+---------------+\n| 102 | Lor | Ipsumd | dwhalley@in.gov | (612)211-6296 |\n+------+------------+-----------------+-----------------+---------------+\n| 103 | Ips | Umdolo | dwhalley@in.gov | (612)211-6296 |\n+------+------------+-----------------+-----------------+---------------+\n```\n\nIf selected by the user with ʻid = 101`, then below the table we display the following information:\n\n```html\n\tВыбран пользователь Sue Corson\n\tОписание:\n\t\n\tАдрес проживания: 9792 Mattis Ct\n\tГород: Waukesha\n\tПровинция/штат: WI\n\tИндекс: 22178\n```\n\n---\n\n## During development libraries and frameworks were used\n\n- [Bootstrap](https://getbootstrap.com/)\n- [React-bootstrap](https://react-bootstrap.github.io/)\n- [lodash](https://lodash.com/)\n- [react-paginate](https://www.npmjs.com/package/react-paginate)\n- [Formik](https://formik.org/)\n- [Yup](https://github.com/jquense/yup#stringemailmessage-string--function-schema)\n- [is_js](https://www.npmjs.com/package/is_js)\n\n\n#### To test the results of the work were used:\n\n- [Google DevTools](https://developers.google.com/web/tools/chrome-devtools) (mostly Console, Network tabs)\n- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru)\n- Testing tools similar to the [Jest](https://jestjs.io/) framework were not used as unnecessary\n\n---\n\n## Deploy\n\n- ### [Site](https://mibw9.csb.app/ 'Right click to open site in separate window') \n- ### [Codesandbox.io with site](https://codesandbox.io/s/musing-kapitsa-g7hsu 'Right click to open site in separate window')\n\n- ### [DockerHub](https://hub.docker.com/r/sxidsvit/react-table)\n- ### [DockerHub & GitHub](https://hub.docker.com/r/sxidsvit/react-table-git)\n=======\n","has_starred","hub_user","immutable_tags_settings",{"_75":11,"_76":77},"enabled","rules",[78],".*","is_automated","permissions",{"_82":22,"_83":11,"_84":11},"read","write","admin","user","storage_size",143248825,"orgData","recentTags",[91],{"_92":44,"_93":94,"_95":96,"_97":98,"_99":100,"_50":118,"_119":94,"_120":33,"_121":56,"_57":122,"_123":124,"_125":109,"_126":118,"_127":66,"_128":22},"content_type","creator",11075266,"full_size",143245874,"id",121809014,"images",[101],{"_102":103,"_104":105,"_106":107,"_108":109,"_110":111,"_112":113,"_114":107,"_115":-5,"_116":96,"_63":66,"_117":-5},"architecture","amd64","digest","sha256:1793df491ea7a7bfddaabd3b5e34fe9314086d7e0b380929ad474cd1d002bd44","features","","last_pulled","2026-10-29T01:16:37.173931699Z","last_pushed","2020-10-17T00:07:27Z","os","linux","os_features","os_version","size","variant","2020-10-17T00:59:11.990896Z","last_updater","last_updater_username","media_type","latest","repository",10042684,"tag_last_pulled","tag_last_pushed","tag_status","v2","sbxKitMetadata","isPotentialSpam","isHubSbxKitsEnabled","showSbxRunInCloud","showSbxAgenticPlatformBadge","showSbxLogoOverride","sbxTrademarkText","displaySecurityMetadata","tagAttestations","tagsHaveAttestations",[],"selectedTag","attestationsUrl","routes/_layout.r.$namespace.$reponame.tags",{"_38":144,"_151":152,"_138":161,"_162":11},{"_40":145,"_42":146,"_45":46,"_47":48,"_49":11,"_50":51,"_52":53,"_54":147,"_57":35,"_32":33,"_58":59,"_60":44,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":62,"_69":70,"_71":11,"_72":33,"_73":148,"_79":11,"_80":150,"_85":33,"_86":87},[],[44],[56],{"_75":11,"_76":149},[78],{"_82":22,"_83":11,"_84":11},"tags",{"_153":64,"_154":-5,"_155":-5,"_156":157},"count","next","previous","results",[158],{"_92":44,"_93":94,"_95":96,"_97":98,"_99":159,"_50":118,"_119":94,"_120":33,"_121":56,"_57":122,"_123":124,"_125":109,"_126":118,"_127":66,"_128":22},[160],{"_102":103,"_104":105,"_106":107,"_108":109,"_110":111,"_112":113,"_114":107,"_115":-5,"_116":96,"_63":66,"_117":-5},[],"canDeleteTags","actionData","errors"]

sxidsvit/react-table-git

Tags for sxidsvit/react-table-git