
This is a different approach to input data.
The project itself does not generate a table, but gives the possibility to work interactively with the data, that is, it divides the data into individual pages, and all the things you expect from a data table.
I was originally looking for a way to fine-tune other data panels, e.g. debounce on searching and restoring tables. After that, ways to get additional data, sums, etc. into the header and footer were solved... It was simply complicated, or it was not even possible.
I realized that the key is to provide an option to supply a table template on input, which this project accepts. Passing arbitrary variables and using custom functions also became important. They are worth mentioning implemented options for using checkboxes and moving lines using the draggable method.
The program expects min. 2 things:
Ide o odlišný prístup k vstupným údajom.
Projekt sám o sebe negeneruje tabuľku, ale dáva možnosť interaktívne pracovať s údajmi, čiže rozdelí dáta na jednotlivé stránky, a všetky tie veci, čo očakávate od data table.
Pôvodne som hľadal spôsob ako doladím iné data table, napr. debounce na vyhľadávaní a obnovovaní tabuliek. Potom sa riešili spôsoby ako dostať do hlavičky a zápätia ďalšie dáta, súčty, ... Jednoducho to bolo komplikované, alebo sa to ani nedalo.
Uvedomil som si, že kľúčom je poskytnúť možnosť dodať na vstupe šablónu tabuľky, čo tento projekt akceptuje. Taktiež sa stalo dôležitým odovzdávanie ľubovoľných premenných a použitie vlastných funkcií. Za zmienku stoja implementované možnosti využitia checkbox-ov a presun riadkov draggable metódou.
Program očakáva min. 2 veci:
It doesn't need any installation
Just add an import to your module type js script
import basicDataTable from "https://api.pim.sk/api/basic-data-table/bdt.min.mjs?v=2.1.2"
<div id="bdt"></div>
// import class basicDataTable import basicDataTable from "https://api.pim.sk/api/basic-data-table/bdt.min.mjs?v=2.1.2" // for data & template read by your faurite ajax/fetch/... library import get from 'https://api.pim.sk/api/get/get.min.mjs' // read template & data from file const template = await get( './template-0.html' ) const items = await get( './items-1.json' ) // initialize class basicDataTable const bdt = new basicDataTable({ id: 'bdtRemote0', // string ~ use for temp values in localStorage selector: '#bdt', // string || object items, // array - json data ~ show tabs "Data" template, // string - html & vue ~ show tabs "Template" limit:0, // this example show all items in table })
<!-- TABLE --> <table border="1" cellspacing="0" cellpadding="3"> <thead> <tr> <th>No.</th> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <!-- DATA --> <tr v-for="(item, index) in pageItems" :key="item.fld_ID" > <td> {{ index +1 }} </td> <td> {{ item.fld_ID }} </td> <td> {{ item.fld_Name }} </td> </tr> </tbody> </table>
[ { "fld_ID": 1001, "fld_Group": 20, "fld_Name": "Nelda Raymond", "fld_Url": "//pim.sk/Sawyer/Beach/", "fld_Date_Iso": "2023-01-10", "fld_DateTime_Iso": "2023-01-10T23:15:00", "fld_Date_Format": "10.01.2023", "fld_Date_Format_Short": "2023-01", "fld_Ord": 1 }, ... ]