No style
The style is inherited from the parent project.
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
});