An example for React Semantic UI sortable table

React-Semantic-UI-Sortable-Table-Example

A small demo for sortable tables of React Semantic UI.

Prerequisite

Node.js runtime environment.

Install dependencies

Once you have Node.js installed, type

npm install

to install the dependencies.

Compile and run

To compile the React component once, type

npm run compile

This command will build app.bundle.js, vendor.bundle.js and their corresponding source maps.
I compile it separately into two files, app.bundle.js is for our react front end code and vendor.bundle.js is for the other front end libraries. Find out more in the webpack.config.js.

To watch the changes related to front end and compile automatically, use

npm run watch

To start the server and watch any changes that's being made to server/server.js, type

npm start

The default port is 3000. Open the browser and go to localhost:3000

All of the above commands can be found in the scripts section of package.json.

Deployment

To deploy the application, there is no need to include the React JS files under the /src folder. Just include index.html, app.bundle.js and vendor.bundle.js and the files in /server. To install the dependencies for deployment, run npm install --production.

Docker

# Build the image
docker build -t {SOME_TAG} .
# Run the container with exposing port 5000
docker run -p 5000:3000 {SOME_TAG}

Server APIs

Operation HTTP Method Example Remarks
Get Vehicle List Get /api/v1/vehicles?filter=&offset=0&limit=10&order=asc&sortBy=package Available query params: filter, offset, limit, order, sortBy. If query parameters does not match, it will give warning and also provide the correct name of query parameters.
Toggle Favorite Post /api/v1/favorite Requires to send the JSON formatted vehicle in the body. Will send back an error status if no vehicle is found in the body of request.

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.

GitHub