/react-table-example

Primary LanguageHTML

React Table Example

Implementation

The reusable table component (app/component/SortableTable.jsx) is built using React.

UI:

  • table is sortable by clicking on the header cell, in the order 'asc' -> 'desc' -> 'unsorted' (this cancels any existing sorting).
  • page and page size can be changed by updating the page input / page size dropdown, or by clicking on the previous / next buttons in the pagination control above or below the table.
  • added abortcontroller-polyfill dependency to allow aborting of fetch call for browsers that have yet to added the support.
  • built using Webpack.
  • to build: npm run build.
  • to run dev (watches and rebuilds code): npm run dev.

Server:

  • route /data?start=0&limit=10&sort=username&sortDirection=asc will return an array of object in JSON format, paginated and sorted accordingly to the query parameters (optional).
  • added route /dataSize that returns total data count for the purpose of pagination.
  • data is stored in routes/index.js with 2k rows.

For both:

  • jslint errors are checked using eslint.
  • to run eslint: npm run eslint.
  • unit test is written and run using Jest library in tests folder.
  • to run test: npm test.
  • to run coverage: npm run coverage.

Possible future improvements

  • More options to make the table more configurable
  • Infinite scrolling