Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/charles-dr/react-ts-table-form
React example for react-table and form
https://github.com/charles-dr/react-ts-table-form
cicd cypress dynamic-forms github-actions heroku-deployment jest react-table react-testing-library reactjs redux-thunk redux-toolkit typescript
Last synced: 9 days ago
JSON representation
React example for react-table and form
- Host: GitHub
- URL: https://github.com/charles-dr/react-ts-table-form
- Owner: charles-dr
- Created: 2022-05-25T01:25:32.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-05-25T03:22:38.000Z (over 2 years ago)
- Last Synced: 2023-05-18T22:22:44.090Z (over 1 year ago)
- Topics: cicd, cypress, dynamic-forms, github-actions, heroku-deployment, jest, react-table, react-testing-library, reactjs, redux-thunk, redux-toolkit, typescript
- Language: TypeScript
- Homepage: https://react-table-mv.herokuapp.com/
- Size: 788 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Application
This is a React application using react-table.
It loads data from json file and show them in the react table.
The table is responsive hiding columns according to the table width.
Once a table row is clicked, it show split view for a update form, which shows dynamic fields based on the passed meta data.
## Demo
You can check the demo by clicking [here](https://react-table-mv.herokuapp.com/).
## Tech stack
- React v17
- Typescript
- Redux Thunk
- Tailwind CSS
- React Icons
- Jest
- Cypress
- CI/CD
## Structure
```bash
.
├── public
└── src
├── __tests__
├── components
├── layouts
├── pages
├── providers
├── store
├── types
```
### public
This is the folder contains the HTML file and static asset files.
### src/\_\_tests\_\_
contains all unit tests.
### src/components
contains all reusable components.
### src/layouts
contains the layout components.
### src/pages
contains the page files which are included in the routing system.
### src/providers
contains the providers interacting with external sources.
### src/store
implements redux store.
### src/types
contains the typescript types.
## How to run the application
You can run the following commands to start the application and for the unit/integration tests.
```bash
# npm
npm install
npm run dev # run the application on local
npm run test # run unit testing
npm run test:e2e # integration testing using cypress
npm run cypress:run # silent mode of cypress test
# yarn
yarn
yarn dev # start the application on local
yarn run test # unit testing
yarn test:e2e # integration testing using cypress
yarn cypress:run # silent mode of cypress test
```