Tehnologii Web/2022-2023/Laborator 6

In this laboratory, we will review the presented front-end techniques in a data table page.


 * You will start from a partial implementation - or you can start your own.


 * Steps 1-5 are provided to you, the rest are lab assignments.

Requirements

 * Fetch an existing API endpoint (e.g. GET https://dummyjson.com/users) using Typescript and fetch
 * Add the table rows dynamically.
 * Add pagination support.
 * Sort the entries by column: ascending or descending.
 * Filter rows by search.
 * Bonus: let the user download the data using .CSV export.



Step 1
Add the HTML markup for your page. It should look like the one below.

The table headers will be statically defined, the rest of the content will be loaded dynamically.

Step 2
Add an interface for your data. In our example (GET https://dummyjson.com/users ) we will expose the following fields.

Step 3
Add a Typescript class controller. We will define a load method in the next step.

Step 4
Our load method will use the fetch call to load the JSON data from an external source.

Please note, we will use a private field _data to store our data, but our table view will be defined in the getter function tableData which is public.

The spread ... operator will make a copy since sort is a mutable call.

Step 5
Make sure your class and helper methods are defined as follows.

Step 6
Your Task


 * Set the class name for the active pagination button accordingly.


 * You can do that in the method addPaginationButtons by setting element.className = isActivePage ? 'A' : 'B'


 * You also need to set the private this._currentPageIdx in your goToPage method
 * Add a CSS transition, you can use also the one below which is animating the width.

Step 7
Your Task


 * Set in the constructor a query selector for each column header.


 * Add a click event listener, whenever you click a column, the private field _sortField would be set accordingly.
 * When you click the second time, the _ascending field would toggle from true to false or from false to true.

Step 8
Your Task


 * Update the tableData getter to implement search filtering and sorting.

Step 9
Bonus Task - add an Export button that will prompt the user to download the data in .csv format.

You can do it from scratch using blobs or using external Javascript libraries.