Example of a pivot table using React + Typescript. Created using create-react-app
.
First install all dependencies:
npm install
or if using yarn:
yarn
After all dependencies, you can run it locally by running:
yarn start
This will run the development build of the client on localhost:3000
, all while compiling styles as well as watch for any changes made to the code.
If you want to run linting and unit tests, you can do so by running:
yarn test
This project uses eslint, and Typescript for linting as well as Jest, enzyme and react-test-renderer for unit testing.
You may run across an error when trying to run tests:
Error: fsEvents is not a function
If that's the case, please read this issue within create-react-app and follow the instructions to resolve it.
As is with most React apps this was built using the flux architectural design
<ProductSalesByStateTable /> (is mounted - hook fires action)
|
└-+-> /actions/orders (fetch/receive orders data)
|
└-+-> /reducers/orders (transform to immutable records and pass to store)
|
└-+-> <ProductSalesByStateTable /> (accesses store, formats data)
|
└-+-> <PivotTable /> (recieves formatted data and renders)
In the case of this project - actions are used to fetch and pass orders to dispatchers whom then broadcasts the payload to registered callbacks with the store. The store updates as a result of the retrieved data which allows the components to (re)render.
- React: core framework
- Redux: global application state maintenance
- React-redux: hooks up app framework with global state
- Typescript: type checking and linting
- Immutable.js: transforming data without mutation
While working on this project, there were a few assumptions made:
- The pivot table operation is SUM only and does not include UI sorting.
- Data is fetched and loaded all at once (no pagination).
- Row and column dimensions should be configurable via any string data attribute. (i.e.
state
,category
,city
, etc.) - Metric should only be configurable via any of these number data attributes:
sales
quantity
profit
discount
- Use more semantic HTML for table (
table
,thead
,tbody
,tr
, etc.) - Implement "sticky" column header so when a user scrolls down, the user can still see what dimension the metric belongs to.
- Adjust formatting data algorithm to allow for other operations (multiply, average, etc.)