This JSOM SharePoint example explains how to display SharePoint list data in an HTML table using JavaScript. We will use the JSOM code to display SharePoint list items in the HTML table.
Here we will discuss how to display SharePoint list data in an HTML table in a tabular format using jsom and jQuery in SharePoint.
We will also see how to retrieve list items using JavaScript SharePoint Online using SharePoint hosted apps or add-ins.
Display SharePoint list data in an HTML table using JavaScript
I have a SharePoint list that has a few columns like the one below:
- User Name (single line text )
- Password(single line text)
- Address (Multiline textbox)
- Gender (Choice)
- Country (Choice / Dropdown list)
- Submission Date (Date and Time)
The SharePoint list has some items shown below screenshot:

Now, we have to display these SharePoint List items in a tabular format using HTML and JavaScript (jsom).
In SharePoint, you can use the jsom code inside a content editor web part or a script editor web part.
First, I will show you how can we use the code inside a SharePoint content editor web part. In the same way, you can use the code inside the script editor web part.
Here, we will create an HTML file, JS file, and CSS file.
HTML File
The HTML code to display SharePoint list items using JavaScript looks like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/Mytable.js"></script>
<link rel="stylesheet" href="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/Mytablestyle.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p id="ptitle"></p>
</body>
</html>
In this HTML Code, I have given the JS path link as well as the CSS path link. Then, add a paragraph tag <P> with the ID attribute. Here I have given (id=”ptitle”).
JavaScript (.js) file for get list items using javascript SharePoint 2013/Online
Below is the code that contains the JSOM (JavaScript object model) code to retrieve and display SharePoint list items in an HTML table using JavaScript.
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});
var siteUrl = _spPageContextInfo.siteServerRelativeUrl;
var collListItem;
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('CmpanyInfoList');
var camlQuery = new SP.CamlQuery();
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemEnumerator = collListItem.getEnumerator();
var mytable = "<table class=\"alternate\"><tr>" +
"<th>Title</th>" +
"<th>Address</th>" +
"<th>Gender</th>" +
"<th>Country</th>" +
"<th>EmailID</th>" +
"<th>SubmissionDate</th></tr>";
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
mytable += "<tr><td>" + oListItem.get_item('Title') + "</td><td>" + oListItem.get_item('Address') + "</td><td>" + oListItem.get_item('Gender') + "</td><td>" + oListItem.get_item('Country') + "</td><td>" + oListItem.get_item('EmailID') + "</td><td>" + oListItem.get_item('SubmissionDate') + "</td></tr>";}
mytable += "</table>";
$("#ptitle").html(mytable);
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}
Here in this js code, I have created the table dynamically, and in the last, I have bound the variable with the ID by using the below code-
$("#ptitle").html(mytable);
.CSS File
Here, I have added the .css file to add some styling to the HTML table.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.alternate tr:nth-child(2n) {
background-color: silver;
}
.alternate tr {
background-color: white;
}
.alternate tr:nth-child(2n):hover, .alternate tr:hover {
background-color: grey;
}
Then upload these three files(Mytable.html File, Mytable.JS File, Mytablestyle.CSS File) in the “Site Assets” document library in SharePoint.
Then, create a web part page Edit the page and click on Add a web part link; then, it will open the Web part categories in the ribbon. From the web part categories, select Media and Content, and then from the Parts, select Content Editor web part.
By clicking on the “Edit web part“, we can give the HTML File path in the content editor web part. Once you save the page, the HTML file will be displayed on that Web Part Page like the below:-

This is how to display SharePoint list data in an HTML table using javascript.
Display SharePoint list items in HTML table using SharePoint Hosted Apps
Now, we will see another example of how to display SharePoint list items using JavaScript in SharePoint-hosted apps or add-ins.
The example is about how to display SharePoint list items in an HTML table using jQuery and jsom in SharePoint Online.
Here I have a SharePoint Online list which looks like below:

Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App
Next, Open your Visual Studio and create a SharePoint Add-In. To create this, go to the File menu, click on the new item, and next click on the Project item. It displays a new project.
Here, in the left side panel, go to the Office/SharePoint tab, here, you select Add-in.
Now it displays the list of add-ins, here, you select SharePoint Add-In. Now, enter your project name and location. Then click on OK.
Next, it will display the new SharePoint Add-In window. Here, select your SharePoint host URL (Choose your SharePoint developer site URL), select SharePoint Hosted, and click Next. Now, it will ask for your Microsoft Account details. Enter your username and password and click on sign-in.
Here, you select SharePoint Online as shown below and click on Finish.
Go to the aspx page. Add this code to this page.
<asp:ContentContentPlaceHolderID="PlaceHolderMain"runat="server">
<divid="empdata">
<%–<p id="message">
<!– The following content will be replaced with the user name when you run the app – see App.js –>
initializing…
</p>–%>
</div>
</asp:Content>
Here, just add id=”empdate” in div tag because for displaying, we bind data to this tag.
'use strict';
ExecuteOrDelayUntilScriptLoaded(RetrieveList, "sp.js");
var listItems;
functionRetrieveList() {
var hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
var clientContext = newSP.ClientContext.get_current();
var hostcontext = newSP.AppContextSite(clientContext, hostUrl);
var web = hostcontext.get_web();
var list = web.get_lists().getByTitle(‘Employee’);
var cmlquery = newSP.CamlQuery();
listItems = list.getItems(cmlquery);
load(listItems);
executeQueryAsync(onQuerySucceeded, onQueryFailed);
}
functiononQuerySucceeded() {
var listItemEnumerator = listItems.getEnumerator();
var displaytable = "<table border=\"1\"><tr>" +
"<th>Title</th>" +
"<th>Country</th>" +
"<th>State</th></tr>";
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
displaytable += "<tr><td>" + oListItem.get_item(‘Title’) + "</td><td>"
+ oListItem.get_item(‘Country’).get_lookupValue() + "</td><td>"
+ oListItem.get_item(‘State’).get_lookupValue() + "</td></tr>";
}
displaytable += "</table>"
$("#empdata").html(displaytable)
}
functiononQueryFailed(sender, args) {
alert(‘Error: ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}
functiongetURLParameters(param) {
var params = document.URL.split(‘?’)[1].split(‘&’);
var strParams = ";
for (vari = 0; i<params.length; i = i + 1) {
var singleParam = params[i].split(‘=’);
if (singleParam[0] == param) {
returnsingleParam[1];
}
}
}
Go to appmanifest.xml file and open it. Then go to the permission here, and you select scope: site collection and permission: Full Control.

Go to your solution explorer, select your project name, right-click on it, and click on the deploy option.
Here is your output.

This is how we can get list items using JavaScript SharePoint 2013 and display SharePoint list items in html table in SharePoint-hosted apps or add-ins.
Conclusion
In this SharePoint JSOM tutorial, we discussed how to display the List Item in a tabular format in SharePoint Online by using JSOM (JavaScript Object Model). We saw how to display list data in tabular format using jsom in SharePoint using script editor web part or content editor web part and in SharePoint hosted apps or add-ins.
You may also like:
- Display SharePoint list data using HTML and jQuery table using Rest API
- Create a SharePoint List using Rest API
- Uncaught ReferenceError: web is not defined
- CRUD Operations using JSOM in SharePoint
I am Bijay a Microsoft MVP (10 times – My MVP Profile) in SharePoint and have more than 17 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com