{"id":13823008,"url":"https://github.com/gges5110/React-Semantic-UI-Sortable-Table-Example","last_synced_at":"2025-05-16T17:32:58.018Z","repository":{"id":27666923,"uuid":"114845691","full_name":"gges5110/React-Semantic-UI-Sortable-Table-Example","owner":"gges5110","description":"A small demo for sortable tables of React Semantic UI. ","archived":false,"fork":false,"pushed_at":"2025-03-27T02:37:44.000Z","size":2397,"stargazers_count":66,"open_issues_count":18,"forks_count":17,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-27T03:27:45.806Z","etag":null,"topics":["docker","expressjs","now","reactjs","semantic-ui-react","typescript"],"latest_commit_sha":null,"homepage":"https://react-semantic-ui-sortable-table-example.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gges5110.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-20T05:15:39.000Z","updated_at":"2023-07-06T21:44:26.000Z","dependencies_parsed_at":"2023-10-17T01:48:25.439Z","dependency_job_id":"34ac33bd-aec9-424e-a3fc-421f9cec57c5","html_url":"https://github.com/gges5110/React-Semantic-UI-Sortable-Table-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gges5110%2FReact-Semantic-UI-Sortable-Table-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gges5110%2FReact-Semantic-UI-Sortable-Table-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gges5110%2FReact-Semantic-UI-Sortable-Table-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gges5110%2FReact-Semantic-UI-Sortable-Table-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gges5110","download_url":"https://codeload.github.com/gges5110/React-Semantic-UI-Sortable-Table-Example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254576776,"owners_count":22094453,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","expressjs","now","reactjs","semantic-ui-react","typescript"],"created_at":"2024-08-04T08:02:29.140Z","updated_at":"2025-05-16T17:32:56.932Z","avatar_url":"https://github.com/gges5110.png","language":"TypeScript","readme":"# React-Semantic-UI-Sortable-Table-Example\nAn example for React Semantic UI sortable table.\n\n![Build and Deploy](https://github.com/gges5110/React-Semantic-UI-Sortable-Table-Example/workflows/Test%20and%20Deploy/badge.svg)\n[![Coverage Status](https://coveralls.io/repos/github/gges5110/React-Semantic-UI-Sortable-Table-Example/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/gges5110/React-Semantic-UI-Sortable-Table-Example?branch=master)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/a5f2bc2a9a8944549c95a17de5d863e9)](https://www.codacy.com/app/gges5110/React-Semantic-UI-Sortable-Table-Example?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=gges5110/React-Semantic-UI-Sortable-Table-Example\u0026amp;utm_campaign=Badge_Grade)\n[![CodeFactor](https://www.codefactor.io/repository/github/gges5110/react-semantic-ui-sortable-table-example/badge)](https://www.codefactor.io/repository/github/gges5110/react-semantic-ui-sortable-table-example)\n\n## Prerequisite\nNode.js runtime environment of 10.16.0.\n\n## Quick Start\n```bash\n# Install dependencies\nnpm ci\n\n# Start JSON server on port 4000\nnpm run start:server\n\n# Start client with hot reload on port 3000\nnpm run start\n```\n\n### List All Available Custom Script\n```bash\nnpm run\n```\n\n### Build Client for Production\nTo compile the React component in production mode, type\n```bash\nnpm run build\n```\n\n## Client: Create React App\nThe React setup is bootstrapped with Create React App. Locally it serves `public/index.html`, and creates a bundle with `src/index.jsx` as the entry.\n\nLocally it is running on port `3000`, and proxies API calls through `localhost:4000`.\n\nIn production build it creates the bundle along with an injected `index.html` in `build/`, and can be served statically.\n\n## Server: JSON Server\nThis project uses JSON server to fulfill the API portion with a single JSON file.\n\nLocally it let Create React App to serve the client, allowing for hot reload to happen.\n\nIn production we pick up the static assets built by `npm run build`, and serve them through the same backend port (4000).\n\n## Deployment\nI deploy the application with docker, and is configured by `now.json`\n\n## Docker\n```bash\n# Build the image\ndocker build -t {SOME_TAG} .\n# Run the container with exposing port 5000\ndocker run -p 5000:4000 {SOME_TAG}\n```\n\n# Dev Guide\n\n## Code Formatting \nWe use prettier to format our code.\n```bash\nnpm run prettier\n```\n\n\n## Server APIs\n\n| Operation         | HTTP Method   | Example           | Remarks       |\n| ----------------- | ------------- | ----------------- | ------------- |\n| Get Vehicle List  | Get           | /api/v1/vehicles?q=\u0026_page=0\u0026_limit=10\u0026_order=asc\u0026_sort=package  | Available query params: q, _offset, _limit, _order, _sort. |\n| Toggle Favorite   | Put           | /api/v1/vehicles/:id | Requires to send the JSON formatted vehicle in the body.  |\n\n## Sorting data on front-end v.s. back-end\nDepending on the data set size and the connectivity, we can sort the vehicle data either on front-end or the back-end. When the data set size is small it is easier to send the whole data set to the client size and do all the sorting and filtering in the browser. But this will not scale well as the data size grows, especially it could have millons of rows. To limit the data being sent over to the front-end, I only allow 100 records per request.\n\n## Input Validation\nEach time a character changes in filter input, it will check two things. 1) If the input contains invalid character, and 2) there is no result being found after applying the filter. For the first case, the input UI will turn red and a popup will show a message warning the user. If the filter will cause the result to be empty, the popup will inform the user about this. On the server side, it will also check if the input only contains alphanumerics, and will send a 422 response along with an error message.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgges5110%2FReact-Semantic-UI-Sortable-Table-Example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgges5110%2FReact-Semantic-UI-Sortable-Table-Example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgges5110%2FReact-Semantic-UI-Sortable-Table-Example/lists"}