JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="CourtCtrl" ng-app>
    <h1>Bookings per court</h1>
    <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Number</td>
                <td>Nr of players</td>
                <td></td>
            </tr>
        </thead>
        <tbody ng-repeat="court in courts">
            <tr>
                <td>{{court.name}}</td>
                <td>{{court.number}}</td>
                <td>{{court.nrOfPlayers}}</td>
                <td>	
                    <a href ng:click="showDetails(court.number)">Details</a>
                </td>
            </tr>
            <tr ng-repeat="player in court.players">
                <td colspan="4">{{player}}</td>
            </tr>
            <tr ng-show="court.players.length == 0 && court.isVisible"><td>No players</td></tr>
        </tbody>
    </table> 
</div>

JavaScript

var byPropertyValue = function (coll, prop, value) {
    for (var i = coll.length - 1; i >= 0; i--) {
        if (coll[i][prop] === value) return coll[i];
    };
};

function CourtCtrl($scope) {

    function playersBycourt(courtid) {
        for (var i = $scope.playersPerCourt.length - 1; i >= 0; i--) {
            if ($scope.playersPerCourt[i].number === courtid) {
                return $scope.playersPerCourt[i].players;
            }
        };
    }

    $scope.playersPerCourt = [{
        "number": 1,
            "players": ["jonathan", "peter"]
    }, {
        "number": 2,
            "players": []
    }];

    $scope.courts = [{
        "number": 1,
            "name": "the best court",
            "nrOfPlayers": 2,
            "playersToggledOn": false
    }, {
        "number": 2,
            "name": "the bad court",
            "nrOfPlayers": 0,
            "playersToggledOn": false
    }];

    $scope.showDetails = function (courtid) {

        // fetch data
        var court = byPropertyValue($scope.courts, "number", courtid);
        
        if (court.isVisible == true) {
            court.players = [];
            court.isVisible = false;
            return;
        }
        
        court.players = playersBycourt(courtid);
        court.isVisible = true;
        
        /* this can be an alternative for the extra tr with ng-show for "No Players" message
        if (!court.players) {
            court.players = ['No players'];
        }
        */
    }
};