JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<style type="text/css">  
.files-table th{ background-color:#ddd; border:2px solid #fff; text-align:left}  
.files-table td{ background-color:#eee; border:2px solid #fff;}  
.web-heading{ padding:2px;}  
</style>  
<!-- HTML Snippet -->
<script type="text/javascript" src="/siteassets/angular.min.js"></script>  
<div ng-app="spng-App">  
<h2 class="web-heading">Folder and Files</h2>  
<div ng-controller="spng-WebCtrl">  
<select id="lib-folder" ng-model="libFolders" ng-options="fldr as fldr.Title for fldr in Folders" >  
<option value="">--Select Folder--</option>  
</select>  
<input type="button" value="Get Files" ng-click="btnGetFiles()"/>  
<!-- Populate Files based on selected Folder -->  
<table width="100%" cellpadding="10" cellspacing="2" class="files-table">  
<thead>  
<tr>  
<th>Title</th>  
<th>Author</th>   
</tr>  
</thead>  
<tbody>  
<tr ng-repeat="file in Files">  
<td><a href="{{file.ServerRelativeUrl}}">{{file.Name}}</a></td>  
<td>{{file.Author.Title}}</td>   
</tr>  
</tbody>  
</table>  
<p ng-show="!Files.length">There are no files available under this folder.</p>  
</div>  
</div>  

<!-- Script Snippet -->
<script type="text/javascript">  
var spApp= angular.module('spng-App', []);  
spApp.controller('spng-WebCtrl', function($scope, $http){  
  
//Controller load event to append the choices with folder value to the dropdown  
$http({  
method: "POST",  
url: 'https://accounts.accesscontrol.windows.net/2d94daf0-3519-4a12-bacf-9e5a9bf37417/tokens/OAuth/2', 
headers: {"Accept":"application/json;odata=verbose","content-type": "application/x-www-form-urlencoded"}  
}  
).success(function(data, status, headers, config){  
//Store the folder collections to the Folders scope variable  
$scope.Folders = data.d.results;  
//Set the default value to the dropdown  
$scope.libFolders = $scope.DocumentSets[0];  
}).error(function (data, status, headers, config){  
});  
  
//Button click event to populate the files in table  
$scope.btnGetFiles =...

CSS

.lst-table th{ background-color:#ddd; border:2px solid #fff; text-align:left}     
.lst-table td{ background-color:#eee; border:2px solid #fff;}     
.web-heading{ padding:2px;}