JSFiddle - React, Tailwind, and code Playground

by rodhartzell

HTML

<html ng-app>
    <head>
        <title>Angular JS Searchable Table Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <style type="text/css">
            table
            {
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <div>Search: <input type="text" ng-model="search">
        <div ng-controller="tableData">
            <table>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Student Number</th>
                    <th>Specialization</th>
                </tr>
                <tr ng-repeat="student in class | filter:search">
                    <td>{{student.fname}}</td>
                    <td>{{student.lname}}</td>
                    <td>{{student.studentNumber}}</td>
                    <td>{{student.specialization}}</td>
                </tr>
            </table>
        </div>
         
        <script>
            var tableData = function($scope)
            {
                $scope.class = [
                    {fname: "Kyle", lname: "Hayhurst", studentNumber: "2094378591", specialization: "Web Development"},
                    {fname: "Sandy", lname: "Beach", studentNumber: "2094378545", specialization: "Game Design"},
                    {fname: "Bill", lname: "Ding", studentNumber: "2094378534", specialization: "Business"},
                    {fname: "John", lname: "Doe", studentNumber: "2094378595", specialization: "Software Development"},
                    {fname: "Jimmy", lname: "Hampton", studentNumber: "2094378234", specialization: "Web Design"}
                ]
            }
        </script>
    </body>
</html>