PivotTable.js in .Net Core Razor Pages - Tutorial (With Some More Javascript)

Being a former accountant, and my current projects also serving business processes, I find that Pivot Tables are a must in any application of this kind. I struggled without them but now I found a solution, using an Open Source Javascript Library.

I already implemented some of the functionality in one of my projects, but I have to admit that it was a little bit hard, that's why I want to help by showing this example.

Prerequisites for this tutorial:
1. intermediate javascript;
2. basic .Net Core Razor pages knowledge (recommended reading list: https://mydev-journey.blogspot.com/2019/11/razor-pages-not-for-shaving.html
3. study briefly the documentation of pivottable.js, take the simple one: https://pivottable.js.org/examples/simple_ui.html;
4. clone the official repo https://github.com/nicolaskruchten/pivottable
5. my previous tutorial on ChartJS, has a very similar approach and result, and might be a learning step towards this more advanced tutorial: https://mydev-journey.blogspot.com/2019/12/chartjs-tutorial-with-aspnet-core-22.html
6. Repo on Github for this project, to try it:
https://github.com/zoltanhalasz/PivotTableJS

Steps to follow if you want to do it yourself:

A. Create .Net Core Web App (default, razor pages)

B. download pivot table repository from point 4.
Then take the pivot.js and pivot.css files and copy them under the newly created pivot folder in wwwroot.

C. take my _LayoutPivot file and use it instead of the default generated _Layout file from Shared. My _LayoutPivot file will contain all proper references to jquery and pivot.js. Then include it in the _ViewStart file, like :     Layout = "_LayoutPivot";

D. Create InvoiceModel Class, with Json Properties Annotation, this is the main entity for the listing.


E. Create InvoiceService Class which will be injected in the constructor of Index page class. (and set up in Startup.cs).


F. The index cshtml page will just iterate through the list of invoices retrieved by the service and display them.
The backend part in PageModel class will be comprised of:
1. the OnGet function - prepare the data to display
2. the other function - OnGetInvoicePivotData - will pass the JSON array to the javascript fetch in the page.


G. The scripts in the index.cshtml page: below the list of invoices you can find:
1. the pivot - javascript code - retrieving the list using fetch and then giving it to pivotUI function, as per documentation mentioned above.
2. an export to excel (code from stack overflow- how to export an html table to excel from javascript), tailored to export our pivot table.


H. Final result should display as below, showing the list and the pivot table also, together with the Export button: