star-planet-table
v1.0.0
Published
This package renders a table listing stars and planets with user interaction using Evergreen package
Downloads
1
Readme
Playfusion start-planet table
This is a RESTful application built for Disruptional with a star look-up table with searching, sorting and filtering functionality.
The URL will change based on each functionality to provide users convenience to share the search results.
This repository is configured to be CI/CD on Heroku with a custom domain www.zhaolingyun.me.
Instructions
A star look-up table with searching, sorting and filtering functionality.
Here is an example of the details card and an illustration for table footer with pagination and information about the current page.
The APIs I used for each functionality are:
- Search: http://webdevelopertest.playfusionservices.com/webapptest/alternateNames/search/findByNameLike?name=%{userInput}%
- Sort: http://webdevelopertest.playfusionservices.com/webapptest/stars?sort={field,desc/asec}
- Filter: http://webdevelopertest.playfusionservices.com/webapptest/stars/search/findByNumberOfPlanetsGreaterThan?{numberOfPlanets=1}
Table header/content props structure
Table information is passed by an array of objects, named as tableHeader
, including mandatory entries type
, title
, width
and dataParam
.
For example:
[
{type: `sort`, title: `name`, dataParam: `name`},
{type: `sort`, title: `radius`, dataParam: `radius`},
{type: `sort`, title: `age`, dataParam: `age`},
{type: `sort`, title: `mass`, dataParam: `mass`},
{type: `sort`, title: `number of planets`, dataParam: `numberOfPlanets`}
]
Run it on your browser
Use Webpack-Dev-Server:
npm install
npx webpack-dev-server -d
Run tests manually on your local machine
This repository is using Travis CI. Once all tests passed, master
branch will be continuous deployed on Heroku.
Use the following command to run local tests with an updating snapshots option.
npm test -- -u