JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <input type="text" ng-model="filter" placeholder="Search">
    
    <table ng-controller="rows">
        <thead>
            <tr>
                <th>Row</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in tableRows | filter:filter">
                <td>{{row.rowId}}</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

table{
    width:100%;
    border-collapse:collapse;
}

th{
    background:black;
    color:white;
    padding:5px;
}

td{
    border-top:1px solid black;
    border-right:1px solid black;
    padding:5px;
}

tr{
    border-bottom:1px solid black;
    border-left:1px solid black;
}

input{
    width:100%;
    margin: 0 0 10px 0;
    padding:5px 0;
    text-indent:5px;
}

JavaScript

function rows($scope) {

    $scope.tableRows = [];
    
    $scope.generateRows = function () {
        for (i = 0; i < 1000; i++) {
            $scope.tableRows.push({
                rowId: 'Row ' + i
            });
        };
    };

    $scope.generateRows();
    
}