BDT - simple-table-noShadow

Basic Data Table

v 2.1.2

No style

The style is inherited from the parent project.

<div id="basicdatatable"></div>
[
  {
    "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
  },
  {
    "fld_ID": 1002,
    "fld_Group": 22,
    "fld_Name": "Šípková Rú┼żenka - ignore diacritics",
    "fld_Url": "//pim.sk/Pugh/Ratliff/",
    "fld_Date_Iso": "2023-01-11",
    "fld_DateTime_Iso": "2023-01-11T23:15:00",
    "fld_Date_Format": "11.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 2
  },
  {
    "fld_ID": 1003,
    "fld_Group": 20,
    "fld_Name": "Kasey Harrington",
    "fld_Url": "//pim.sk/Kaufman/Tanya/",
    "fld_Date_Iso": "2023-01-12",
    "fld_DateTime_Iso": "2023-01-12T23:15:00",
    "fld_Date_Format": "12.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 3
  },
  {
    "fld_ID": 1004,
    "fld_Group": null,
    "fld_Name": "Cooley Waldstraße",
    "fld_Url": "//pim.sk/Alexander/Melody/",
    "fld_Date_Iso": "2023-01-13",
    "fld_DateTime_Iso": "2023-01-13T23:15:00",
    "fld_Date_Format": "13.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 4
  },
  {
    "fld_ID": 1005,
    "fld_Group": null,
    "fld_Name": "Casey Curry",
    "fld_Url": "//pim.sk/Clark/Rivera/",
    "fld_Date_Iso": "2023-01-14",
    "fld_DateTime_Iso": "2023-01-14T23:15:00",
    "fld_Date_Format": "14.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 5
  },
  {
    "fld_ID": 1006,
    "fld_Group": 0,
    "fld_Name": "Leach Burgess",
    "fld_Url": "//pim.sk/Robles/Natalie/",
    "fld_Date_Iso": "2023-01-15",
    "fld_DateTime_Iso": "2023-01-15T23:15:00",
    "fld_Date_Format": "15.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 6
  },
  {
    "fld_ID": 1007,
    "fld_Group": 0,
    "fld_Name": "Emilia Graham",
    "fld_Url": "//pim.sk/Parker/Cannon/",
    "fld_Date_Iso": "2023-01-16",
    "fld_DateTime_Iso": "2023-01-16T23:15:00",
    "fld_Date_Format": "16.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 7
  },
  {
    "fld_ID": 1008,
    "fld_Group": "",
    "fld_Name": "Neva Hays",
    "fld_Url": "//pim.sk/Hatfield/Gillespie/",
    "fld_Date_Iso": "2023-01-17",
    "fld_DateTime_Iso": "2023-01-17T23:15:00",
    "fld_Date_Format": "17.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 8
  },
  {
    "fld_ID": 1009,
    "fld_Group": "",
    "fld_Name": "Deborah Kent",
    "fld_Url": "//pim.sk/Riggs/Burnett/",
    "fld_Date_Iso": "2023-01-18",
    "fld_DateTime_Iso": "2023-01-18T23:15:00",
    "fld_Date_Format": "18.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 9
  },
  {
    "fld_ID": 1010,
    "fld_Group": 20,
    "fld_Name": "Frazier Kinney",
    "fld_Url": "//pim.sk/Pitts/Carlson/",
    "fld_Date_Iso": "2023-01-19",
    "fld_DateTime_Iso": "2023-01-19T23:15:00",
    "fld_Date_Format": "19.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 10
  },
  {
    "fld_ID": 1011,
    "fld_Group": 21,
    "fld_Name": "Joy Osborne",
    "fld_Url": "//pim.sk/Howell/Hinton/",
    "fld_Date_Iso": "2023-01-20",
    "fld_DateTime_Iso": "2023-01-20T23:15:00",
    "fld_Date_Format": "20.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 11
  },
  {
    "fld_ID": 1012,
    "fld_Group": 22,
    "fld_Name": "Gordon Gregory",
    "fld_Url": "//pim.sk/Atkinson/Megan/",
    "fld_Date_Iso": "2023-01-21",
    "fld_DateTime_Iso": "2023-01-21T23:15:00",
    "fld_Date_Format": "21.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 12
  },
  {
    "fld_ID": 1013,
    "fld_Group": 20,
    "fld_Name": "Davenport Puckett",
    "fld_Url": "//pim.sk/Morin/Allison/",
    "fld_Date_Iso": "2023-01-22",
    "fld_DateTime_Iso": "2023-01-22T23:15:00",
    "fld_Date_Format": "22.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 13
  },
  {
    "fld_ID": 1014,
    "fld_Group": 22,
    "fld_Name": "Mindy Stafford",
    "fld_Url": "//pim.sk/Finch/Tessa/",
    "fld_Date_Iso": "2023-01-23",
    "fld_DateTime_Iso": "2023-01-23T23:15:00",
    "fld_Date_Format": "23.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 14
  },
  {
    "fld_ID": 1015,
    "fld_Group": 21,
    "fld_Name": "Annmarie Clayton",
    "fld_Url": "//pim.sk/Le/Kimberley/",
    "fld_Date_Iso": "2023-01-24",
    "fld_DateTime_Iso": "2023-01-24T23:15:00",
    "fld_Date_Format": "24.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 15
  },
  {
    "fld_ID": 1016,
    "fld_Group": 20,
    "fld_Name": "Jimenez Gilmore",
    "fld_Url": "//pim.sk/Burch/Barbra/",
    "fld_Date_Iso": "2023-01-25",
    "fld_DateTime_Iso": "2023-01-25T23:15:00",
    "fld_Date_Format": "25.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 16
  },
  {
    "fld_ID": 1017,
    "fld_Group": 21,
    "fld_Name": "Mara West",
    "fld_Url": "//pim.sk/Page/Colleen/",
    "fld_Date_Iso": "2023-01-26",
    "fld_DateTime_Iso": "2023-01-26T23:15:00",
    "fld_Date_Format": "26.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 17
  },
  {
    "fld_ID": 1018,
    "fld_Group": 20,
    "fld_Name": "Whitney Mccarthy",
    "fld_Url": "//pim.sk/Kemp/Crawford/",
    "fld_Date_Iso": "2023-01-27",
    "fld_DateTime_Iso": "2023-01-27T23:15:00",
    "fld_Date_Format": "27.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 18
  },
  {
    "fld_ID": 1019,
    "fld_Group": 20,
    "fld_Name": "Butler Castillo",
    "fld_Url": "//pim.sk/Burke/Tabitha/",
    "fld_Date_Iso": "2023-01-28",
    "fld_DateTime_Iso": "2023-01-28T23:15:00",
    "fld_Date_Format": "28.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 19
  },
  {
    "fld_ID": 1020,
    "fld_Group": 22,
    "fld_Name": "Patti Payne",
    "fld_Url": "//pim.sk/Hansen/Case/",
    "fld_Date_Iso": "2023-01-29",
    "fld_DateTime_Iso": "2023-01-29T23:15:00",
    "fld_Date_Format": "29.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 20
  },
  {
    "fld_ID": 1021,
    "fld_Group": 20,
    "fld_Name": "Swanson Chase",
    "fld_Url": "//pim.sk/Day/Griffith/",
    "fld_Date_Iso": "2023-01-09",
    "fld_DateTime_Iso": "2023-01-09T23:15:00",
    "fld_Date_Format": "09.01.2023",
    "fld_Date_Format_Short": "2023-01",
    "fld_Ord": 21
  },
  {
    "fld_ID": 1022,
    "fld_Group": 22,
    "fld_Name": "Jerri Shields",
    "fld_Url": "//pim.sk/Pena/Bettye/",
    "fld_Date_Iso": "2023-02-08",
    "fld_DateTime_Iso": "2023-02-08T23:15:00",
    "fld_Date_Format": "8.2.2023",
    "fld_Date_Format_Short": "2023-02",
    "fld_Ord": 22
  }
]
<table border="1" width="100%" cellspacing="0" cellpadding="3">
	<thead>
		<tr>
			<th>No.</th>
			<th>ID</th>
			<th>Name</th>
		</tr>
	</thead>
	<tbody>
		<!-- READ 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>
import basicDataTable from "https://api.pim.sk/api/basic-data-table/bdt.min.mjs"


// ------------/ OPTIONAL PART /------------------------------ //
// data & template read by your faurite ajax/fetch/... library

import get from "https://api.pim.sk/api/get.min.mjs"

const data = await get("path/to/json/file/data.json");
const template = await get("path/to/html/template.html");

// ------------/ END OPTIONAL PART /-------------------------- //


const bdt = new basicDataTable({
	id: "bdtBex",                 // string ~ use for temp values in localStorage
	selector: "#basicdatatable",  // string || object
	items: data,          	   	  // array - json data  ~ show tabs "Data"
	template: template,    		    // string - html & vue ~ show tabs "Template"
	isShadowRoot: false,         // boolean ~ object implement to your project
                                // => It inherits styles from your parent project
});