Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/belco90/react-tables-performance

Performance demo of tables in React
https://github.com/belco90/react-tables-performance

Last synced: 26 days ago
JSON representation

Performance demo of tables in React

Awesome Lists containing this project

README 

        
### Demo:



http://stingy-deer.surge.sh/



### Features



- You have two buttons for fetching small or large data set whenever you

  want!

- You can switch between "regular" render or virtualized render. ⚠️

  **Note that when disabling virtualized render the page will freeze a

  few seconds because of the huge amount of elements from the data set

  that will be rendered!**

- Sort any column (only once at a time) by clicking in the column head

  to sort asc, sort desc and remove sort

- Filter by titles on the fly



### Dependencies



- `react-scripts`: this is Create React App, the quickest and easiest way of starting a new React project

- `react-window`: for virtualizing the table as it would be too heavy to

  render the whole large data set when we only need to render what the

  user can see in the viewport (you can check this yourself when

  toggling the "Use virtualization" option)

- `prettier`: just for autoformatting the code

- `husky` and `lint-staged`: for autoformatting the code when committing

  changes

- `prop-types`: include props info for React components

- `lodash`: I only want some utils from lodash but they recommend to

  install the whole package (and it was already in the project as a

  dependency of babel). I'm using `orderBy` util for sorting and

  `deburr` for sanitizing strings.

- `classnames`: util for merging different classNames in a component

  under different conditions



### Technical decisions



- **Showing ellipsis for each cell when content doesn't fit**: to avoid

  rows too high I'm fixing a narrow value and then hiding overflow

  content with an ellipsis so you can see more rows at the same time. I

  assumed it's more important to be able to see several rows than see

  the full info about each cell as that could imply just seeing 3 or 4

  at the same time. You are still able to see the full content by

  hovering the mouse in a particular cell with content (through title

  attribute).

- **Fixing table and rows height**: these two have been fixed because of

  the virtualization as the height of the table and the rows must be

  known. I could have play around with dynamic row heights but I think

  is out of the scope of the test. Additionally, having a table height

  fixed will help to see the rows while not loosing the heads and action

  buttons.

- **Non-responsive table**: as mentioned in the test description, this

  table is not supposed to work on mobile or being responsive, so I just

  made sure it works fine with a viewport greater than 992px, which

  bootstrap and other UI framework consider as the minimum width for

  desktops. Anyway, the columns widths are fixed with percentages so it

  will look better in wider screens.

- **Custom table elements**: I didn't use the HTML `table` element

  because of the limitation from virtualizing the list (responsiveness

  wouldn't be a problem with table tag from the previous point), so I

  made my custom table layout with divs elements and flex styling. I

  could have used some UI framework for it but it was a simple layout so

  I coded it myself.

- **Filtering**: Really simple for this one as I just filter by checking

  if the title includes the value the user entered and then keep the

  filtered movies as a draft in a temporary state so the sorting can be

  applied later. Here I'm doing insensitive comparison, trimming the

  strings and deburring characters. Ideally I would delegate this to

  corresponding API too but obviously that's not possible for this test.

- **Sorting**: I'm relying on lodash.orderBy for this and the sorting

  process is quite fast so the table is rendered sorted almost

  instantly. The sort is always executed over the filtered movies list

  but the performance is really good anyway. There are still some edge

  cases to address for strings with special characters at the start of

  the values but most of them are addressed properly as insensitive

  comparison, trim strings and deburr characters. Ideally I would

  delegate this to corresponding API too but obviously that's not

  possible for this test.



### Improvements



- Sanitize fields for sorting: removing weird chars from the beginning

- Handle fetch errors

- Apply debouncing while user type on filter title input so table do the

  filtering when user has stopped writing (500ms for example) and we

  avoid weird re-renders

- Extract filtering and sorting process into its own hook