This is a challenge to build a data table using vanilla JavaScript (no libraries or frameworks) similar to this one https://www.datatables.net/ but without using jQuery.
- Sorting
- Pagination
- Show/hide columns
- Search
- Ability to edit/save any of the cells
- Provide some basic styling, so it looks decent
- Build logic that will help with performance
- if dataset is less than or equal to 100 rows then pull data from the client side (stored data)
- if dataset is greater than 100 then pull via API/service
- Clone the repo -
https://github.com/billdevcode/javascript-data-table.git
- Go into the folder -
cd javascript-data-table
- Launch the html file -
open index.html
- There are definitely accomplishments and hurdles while each user story required research, tinkering and creative approaches.
- The one I'm most proud of is the search feature.
- If we're dealing with individual table cells then it would have been simple but we're dealing with each row with multiple columns so the early iteration code would only take the last column as the final show or hide condition.
- After some tinkering,
I thought of using
break
to stop the loop once any row's table cell qualifies to be visible.
MIT License