Change Look for SharePoint List using Datatable JS

Here I am showing you to change the look of SharePoint list view using datatabse js and SharePoint JS link. If your SharePoint list having more items than performance will be quite slow, but still manageable.

So, here are the steps:

    • Create a view in your target SharePoint List. If you want “Edit” button on view then add “Edit (link to edit item)” field to that view.
    • Now edit the view Page and add script editor web part to the header of the page and add below references to script editor.
<link rel="stylesheet" href="//"/>
<link rel="stylesheet" href="//"/>
<script type="text/javascript" src="//"></script>
<script type="text/javascript" src="//"></script>
    • Now edit the List view web part > Navigate to open web part properties > expand “Miscellaneous” and under JSLink > set your file URL as below. In my case, I kept the file under SiteAssets. Download source code from GitHub

Your output will be like this.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s