-
Notifications
You must be signed in to change notification settings - Fork 2
Home
Paul edited this page Jan 2, 2019
·
7 revisions
Welcome to the datatables.webcomponent wiki!
datatables.webcomponent supplies a standalone script for quick usage in your applications.
Example View in Browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Standalone Example</title>
</head>
<body>
<h2>Example Usage using ajax url with Standalone script</h2>
<pmac-data-table
data-ajax='{"url": "https://unpkg.com/@p_mac/datatables.webcomponent/test/support/data/generated.json"}'
data-filterable='{"colIndexes":[5]}'
data-summable='{"colIndexes":[2]}'
></pmac-data-table>
<script src="https://unpkg.com/@p_mac/datatables.webcomponent/dist/datatables.webcomponent.js"></script>
</body>
</html>Alternatively, you can choose to npm install @p_mac/datatables.webcomponent --save and take a look at the other usage options in this wiki. For frameworks, currently, only lit-element is officially supported, but examples for react and vue are coming soon.
This package also supplies a standalone-ld.js the forgoes the shadow dom encapsulation.
Example View in Browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Standalone Example</title>
</head>
<body>
<h2>Example Usage With Standalone Light Dom Script</h2>
<style>
table, input, select {
background-color: lavender;
}
pmac-data-table .pure-form select {
background-color: lavender;
color: #000;
}
pmac-data-table .pure-button {
background-color: mediumorchid;
color: #fff;
}
pmac-data-table .pure-table thead {
background-color: mediumpurple;
color: #fff;
}
</style>
<pmac-data-table
data-ajax='{"url": "https://unpkg.com/@p_mac/datatables.webcomponent/test/support/data/generated.json"}'
data-filterable='{"colIndexes":[5]}'
data-summable='{"colIndexes":[2]}'
></pmac-data-table>
<script src="https://unpkg.com/@p_mac/datatables.webcomponent/dist/datatables.webcomponent-ld.js"></script>
</body>
</html>