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="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></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

~sitecollection/SiteAssets/dataTablesListView.js

Your output will be like this.