https://github.com/gges5110/React-Semantic-UI-Sortable-Table-Example
A small demo for sortable tables of React Semantic UI.
https://github.com/gges5110/React-Semantic-UI-Sortable-Table-Example
docker expressjs now reactjs semantic-ui-react typescript
Last synced: about 1 month ago
JSON representation
A small demo for sortable tables of React Semantic UI.
- Host: GitHub
- URL: https://github.com/gges5110/React-Semantic-UI-Sortable-Table-Example
- Owner: gges5110
- License: mit
- Created: 2017-12-20T05:15:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-03-27T02:37:44.000Z (3 months ago)
- Last Synced: 2025-03-27T03:27:45.806Z (3 months ago)
- Topics: docker, expressjs, now, reactjs, semantic-ui-react, typescript
- Language: TypeScript
- Homepage: https://react-semantic-ui-sortable-table-example.vercel.app/
- Size: 2.29 MB
- Stars: 66
- Watchers: 0
- Forks: 17
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Semantic-UI-Sortable-Table-Example
An example for React Semantic UI sortable table.
[](https://coveralls.io/github/gges5110/React-Semantic-UI-Sortable-Table-Example?branch=master)
[](https://www.codacy.com/app/gges5110/React-Semantic-UI-Sortable-Table-Example?utm_source=github.com&utm_medium=referral&utm_content=gges5110/React-Semantic-UI-Sortable-Table-Example&utm_campaign=Badge_Grade)
[](https://www.codefactor.io/repository/github/gges5110/react-semantic-ui-sortable-table-example)
## Prerequisite
Node.js runtime environment of 10.16.0.
## Quick Start
```bash
# Install dependencies
npm ci
# Start JSON server on port 4000
npm run start:server
# Start client with hot reload on port 3000
npm run start
```
### List All Available Custom Script
```bash
npm run
```
### Build Client for Production
To compile the React component in production mode, type
```bash
npm run build
```
## Client: Create React App
The 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.
Locally it is running on port `3000`, and proxies API calls through `localhost:4000`.
In production build it creates the bundle along with an injected `index.html` in `build/`, and can be served statically.
## Server: JSON Server
This project uses JSON server to fulfill the API portion with a single JSON file.
Locally it let Create React App to serve the client, allowing for hot reload to happen.
In production we pick up the static assets built by `npm run build`, and serve them through the same backend port (4000).
## Deployment
I deploy the application with docker, and is configured by `now.json`
## Docker
```bash
# Build the image
docker build -t {SOME_TAG} .
# Run the container with exposing port 5000
docker run -p 5000:4000 {SOME_TAG}
```
# Dev Guide
## Code Formatting
We use prettier to format our code.
```bash
npm run prettier
```
## Server APIs
| Operation | HTTP Method | Example | Remarks |
| ----------------- | ------------- | ----------------- | ------------- |
| Get Vehicle List | Get | /api/v1/vehicles?q=&_page=0&_limit=10&_order=asc&_sort=package | Available query params: q, _offset, _limit, _order, _sort. |
| Toggle Favorite | Put | /api/v1/vehicles/:id | Requires to send the JSON formatted vehicle in the body. |
## Sorting data on front-end v.s. back-end
Depending 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.
## Input Validation
Each 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.