JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<div data-ng-app='grid' data-ng-controller='GridCtrl'>
    <!-- Filter -->
    <input type='text' data-ng-model='search' placeholder='Filter..' />
    
    <!-- Sorting -->
    <select data-ng-model='sort' data-ng-options='sort for sort in sorts'>
        <option value=''>-</option>
    </select>
    
    <!-- The table -->
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Band</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat='band in bands | filter:search | orderBy:sort'>
                <td data-ng-bind='band.id'></td>
                <td data-ng-bind='band.name'></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

*{
    font-family: arial, sans-serif;
}

th{
    font-weight: bold;
}

th, td{
    padding: 5px 10px;
}

JavaScript

var app = angular.module('grid', []);
app.controller('GridCtrl', [
    '$scope',
    function($scope){
        $scope.search = '';
        $scope.sort = '';
        $scope.sorts = [
            '+id',
            '-id',
            '+name',
            '-name'
        ];
        $scope.bands = [
            {id: 1, name: 'Slipknot'},
            {id: 2, name: 'Metallica'},
            {id: 3, name: 'Tenacious D'},
            {id: 4, name: 'Kollegha'},
            {id: 5, name: 'Avenged Sevenfold'}
        ];
    }
]);