BDT - dashboard

Basic Data Table

v 2.1.0
flag-usa

Why the new "data table" project?

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:

  1. data field
  2. own HTML/VUE template

Basic data in points:

  • HTML & CSS / isShadowRoot = true
    • - separate web component
    • - custom css encapsulated in the web component
  • HTML & CSS / isShadowRoot = false
    • - classic object in DOM
    • - inherited css
  • CSS - does not use any custom CSS, everything is left on supplied (or inherited) styles
  • JS - loaded via module, uses VUE, but does not need to be installed on server
  • Table template - fully under control - flexible options for arranging control elements
  • Input / Output methods to control the component

Properties:

  • sorting
  • searching (ignores diacritics)
  • filtering (set/append)
  • pagination
  • moving rows - drag & drop
  • user function
  • user variables
  • "on" methods
  • integrate checkbox
  • implement debouncing
flag-sk

Prečo nový "data table" project?

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:

  1. pole údajov
  2. vlastnú HTML/VUE šablónu

It doesn't need any installation

What do you need to initialize?

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.0"

Základné údaje v bodoch:

  • HTML & CSS / isShadowRoot = true
    • - samostatný web komponent
    • - vlastné css zapúzdrené vo web komponente
  • HTML & CSS / isShadowRoot = false
    • - klasický objekt v DOM
    • - dedené css
  • CSS - nepoužíva žiadne vlastné CSS, všetko sa necháva na dodaných (alebo zdedených) štýloch
  • JS - načítané cez module, využíva VUE, ale netreba ho inštalovať na serveri
  • Template tabuľky - plne pod kontrolu - flexibilné možnosti usporiadania ovládacích prvkov
  • Vstupno / Výstupné metódy na ovládanie komponentu

Vlastnosti:

  • triedenie
  • vyhľadávanie (ignoruje diakritiku)
  • filtrovanie (vloženie/doplnenie)
  • stránkovanie
  • presun poradia riadkov - drag & drop
  • užívateľské funkcie
  • uživateľské hodnoty
  • "on" metódy
  • integrovaný checkbox
  • implementovaný debouncing

HTML

<div id="bdt"></div>

JS ( type=module )

// import class basicDataTable
import basicDataTable from "https://api.pim.sk/api/basic-data-table/bdt.min.mjs?v=2.1.0"

// 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
})

TEMPLATE ( HTML / VUE ) './template-0.html'

<!-- 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>

Data ( json ) './items-1.json'

[
  {
    "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
  },
  ...
]