Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Load SharePoint data to Tabulator table via REST, then save selected items to LocalStorage
<!-- Tabulator.js styles-->
<link href="/site/wz-eva/makecard/js/tabulator.min.css" rel="stylesheet">
<!-- Custom styles-->
.tabulator-selected .workzonecheckbox::after {
content: 'x';
#personnelTable {
min-height: 100px;
background-image: url('/_layouts/15/images/gears_an.gif');
background-repeat: no-repeat;
background-position: center center;
.tabulator-paginator button {
width: auto;
min-width: auto;
#makeCardsWrapper {
position: fixed;
bottom: 0;
background: #fff;
padding: 0% 3%;
right: 0;
z-index: 100;
width: 94%;
border-top: 2px solid #999;
box-shadow: -0px 3px 14px #999;
<!-- tabulator generated table is injected here -->
<div id="personnelTable">
Loading Records...
<!-- Button to grab selected IDs and save to local storage -->
<div id="makeCardsWrapper">
<button class="button important" disabled id="getSelectedItems">Make <span id="getSelectedItemsNumber"></span>
<!-- Axios to load SharePoint Data, Moment.js to format dates, and Tabulator to build the table -->
<script src="/Style%20Library/js/axios.min.js"></script>
<script src="/site/wz-eva/makecard/js/moment.min.js"></script>
<script src="/site/wz-eva/makecard/js/tabulator.min.js"></script>
// This section handles buildling the table, injecting loaded data, and hanlding interactivity.
// Get selected IDs from list, passes them to make-multi-card.aspx
var getSelectedItems = document.getElementById('getSelectedItems');
var getSelectedItemsNumber = document.getElementById('getSelectedItemsNumber');
// Event listener for button to make cards
getSelectedItems.addEventListener("click", function (e) {
var _cardsToPrint = localStorage.getItem("cardsToPrint")"/site/wz-eva/makecard/default.aspx?cardID=multi", "_blank");
// Make the table in the DOM first, then populate with data.
var selectedNumber;
function makeTable() {
var personneBuildlTable = new Tabulator("#personnelTable", {
selectable: true,
selectableRangeMode: "click",
layout: "fitDataFill",
reactiveData: true,
data: loadedData,
// autoColumns:true,
pagination: "local", //enable local pagination.
paginationSize: 100,
paginationSizeSelector: [100, 250, 500, 1000],
rowSelectionChanged: function (data, rows) {
// Fire after a row selection occurs. Creates an array of SharePoint IDs!
var _selectedRows = []
rows.forEach(function (_rowdetails) {
// ... and stores it in LocalStorage
localStorage.setItem("cardsToPrint", JSON.stringify(_selectedRows))
selectedNumber = rows.length;
if (selectedNumber > 0) {
} else {
getSelectedItems.setAttribute("disabled", "disabled");
rows.forEach(function (row) {
// console.log(getSelectedItems)
getSelectedItemsNumber.innerHTML = selectedNumber
columns: [
{ title: "", align: "center", headerSort: false, cssClass: "workzonecheckbox" },
{ title: "ID", field: "Id", visible: false },
{ title: "Last Name", field: "LastName", formatter: "plaintext", headerFilter: "input" },
{ title: "First Name", field: "FirstName", formatter: "plaintext", headerFilter: "input" },
{ title: "MI", field: "MI", formatter: "plaintext" },
{ title: "Unique #", field: "UniqueNum", headerFilter: "input" },
{ title: "Training Firm", field: "TrainingFirm", formatter: "plaintext", headerFilter: "input" },
{ title: "Cert. Type", field: "CertificationType", formatter: "plaintext", headerFilter: "input" },
{ title: "Training Program", field: "TrainingProgram", formatter: "plaintext", headerFilter: "input" },
{ title: "Trained By", field: "TrainedBy", formatter: "plaintext", headerFilter: "input" },
title: "Expires", field: "ExpirationDate",
formatter: "datetime",
sorter: "date",
formatterParams: {
inputFormat: "YYYY-MM-DD",
outputFormat: "MM/DD/YY",
invalidPlaceholder: "(invalid date)",
}, sorterParams: { format: "YYYY-MM-DD" }
title: "Class Date",
field: "ClassDate",
formatter: "datetime",
sorter: "date",
formatterParams: {
inputFormat: "YYYY-MM-DD",
outputFormat: "MM/DD/YY",
invalidPlaceholder: "(invalid date)",
}, sorterParams: { format: "YYYY-MM-DD" }
// This section loads the data, and instructs the interface to create a tabulator table.
// SharePoint List data source and REST query
var personnelList = 'Personnel'
var fullQueryTop = "/site/wz-eva/_api/web/lists/GetByTitle('" + personnelList + "')/Items?$top=1000&$skiptoken=Paged=TRUE&$select=ID,UniqueNum,Title,MI,LastName,FirstName,ExpirationDate,TrainedBy,ClassDate,TrainingFirm,CertificationType,TrainingProgram,AuthorId&?OrderBy=Created";
// Holds REST loaded results:
var loadedData = [];
// This function is recursive and is called repeatedly until all paginated results are loaded into the table.
// Recursive!
function loadPersonnel(nextLink) {
.then((response) => { (items) {
// If there's another batch of results, run this function again
if (["odata.nextLink"]) {
console.log('Some records loaded. Going back for more records now.')
return loadPersonnel(["odata.nextLink"])
} else {
// If there's only one batch, or this is the last one, build the table.
return console.log("All data loaded. Make table")
.then((response) => {
console.log('Recording Loading Function Complete');
}).catch(function (err) {
alert("There was an error loading this data: " + err);
// Kicks off the above function
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.