Custom HTML Element - Table

Am nevoie de un tabel cu multe functionalitati care sa se poata adapta dupa lista de obiecte care ii este asignata. Trebuie sa fie capabil sa citeasca denumirile proprietatilor si tipul datelor din proprietati ca sa-si genereze coloanele "during runtime" ori de cate ori ii este asignata o loua lista de obiecte.

Designul trebuie sa urmeze un anume stil care va fi prezentata dezvoltatorilor la acceptarea proiectului.

Functionalitatile tabelului:
- Prima coloana si headerul trebuie sa fie sticky
- Coloanele trebuie sa se poata reordona cu drag-and-drop
- Latimea coloanele trebuie sa se poata ajusta manual (UX similar cu excel)
- Coloanele trebuie sa se poata ascunde la alegere
- Sortarea elementelor dupa coloana la alegere
- Filtrarea elementelor dupa criterii specifice tipului de date: (de exemplu daca vorbim de un tip de date "boolean" filtrele trebuie sa fie doar (da/nu/toate), daca e vorba de text, filtrul va trebui sa fie un input pentru text.
- Paginare / setarea elementelor per pagina trebuie sa fie posibila
- Va trebui sa contina un rand de totaluri unde se vor afisa sumele coloanelor cu date numerice

Proprietati personalizate:
- Elementul HTML final trebuie sa se poata ajusta la latime si inaltime in in functie de unde este folosit
- Elementul HTML final trebuie sa se poata mari prin schimbarea valoarei de "scale" printr-o proprietate personalizata
- Elementul HTML trebuie sa aiba eventuri personalizate pentru click-dreapta, click-stanga, dublu-click, rearanjare coloana, schimbare marime coloana, schimbarea paginii (next/previous), la citirea carora datele aferte eventului trebui sa fie transmise (de exemplu cand se detecteaza un event de tip click-dreapta, acel event trebuie sa contina randul si coloana pe care s-a dat click, obiectul complet si pozitia cursorului)

Pluginul final va trebui sa arate in acest fel:

<tabel-personalizat id="untabel" data="{{json_array}}" columndata="" filters="" sort=""  style="width:400px; height: 100%" ></tabel-personalizat>

Din javascript:

untabel.data = my_json_array;
untabel.columndata = [{
"Name": "Column0",
"Index": 0, //numarul de ordine a coloanei
"Visible": false,
"Width": "200px",
"DataType": "DateTime"
}]

In cazul in care columndata nu este specificat deloc sau doar pentru unele coloane, aceste date vor fi generate automat de catre plugin cu valori de baza. 

untabel.addEventListener("click-dreapta",  e => {
console.log(e.detalii);
/*
Xpos = "11"
Ypos = "421"
ColIndex =  0
ColName = "Column0"
RowIndex = 21
Object = {
"_id": "923jsa902",
"name": "New Item",
"date": null,
"value": 28,
"active": false
}
*/
})

Eventurile personalizate:
- click-stanga / click-dreapta
- dublu-click
- rearanjare-coloane
- ascundere-coloana
- filtrare-date
- sortare-date
- schimbarea paginii

ATENTIE! - Dezvoltatorul nu va trebui sa rezolve aceste operatiuni ci doar sa le transmita. Singurele operatiuni care vor fi rezolvate de dezvoltator este cel de modificarea latimii coloanelor si de rearanjarea coloanelor.

HTML JavaScript CSS (Cascading Style Sheet)