Deletable Data Table - Copy this Html, Bootstrap Component to your project
use this code @using HockeyUmpiringApp.Shared.Dto_s @using HockeyUmpiringApp.Shared.Managers <div class="container-fluid my-2"> <div class="row mb-3"> <div class="col-12 fw-bold background-color text-white rounded py-2 px-3"> @GameDate.ToString("dd MMM yyyy") </div> </div> <div class="row fw-bold border-bottom pb-2"> <div class="col-2 col-md-1">Uur</div> <div class="col-4 col-md-3">Wedstrijd</div> <div class="col-2 col-md-1">Locatie</div> <div class="col-2 col-md-2">Arbitrage</div> <div class="col-4 col-md-2">Scheidsrechter 1</div> <div class="col-4 col-md-2">Scheidsrechter 2</div> <div class="col-2 col-md-1">Verwijderen</div> </div> @foreach (var game in Games) { var isEditing = IsEditing.TryGetValue(game.Id, out var editing) && editing; var rowClass = isEditing ? "missing-umpire" : ""; <div class="row align-items-center border-bottom py-2 @rowClass"> <div class="col-1 col-md-1">@game.StartTime</div> <div class="col-3 col-md-3">@game.HomeTeam - @game.AwayTeam</div> <div class="col-1 col-md-1">@game.Pitch</div> <div class="col-2 col-md-2">@game.UmpireSelectionStrategy</div> <div class="col-2 col-md-2"> <RefereeCell UmpireName="@game.UmpireOne" GameId="@game.Id" IsFirst="true" Color="@game.UmpireOneColor" OnOpenPanel="OnOpenPanel" IsEditing="IsEditing" RefereeName="@UmpireOneName[game.Id]" OnRemoveReferee="HandleRemoveReferee"/> </div> <div class="col-2 col-md-2"> <RefereeCell UmpireName="@game.UmpireTwo" GameId="@game.Id" IsFirst="false" Color="@game.UmpireTwoColor" OnOpenPanel="OnOpenPanel" IsEditing="IsEditing" RefereeName="@UmpireTwoName[game.Id]" OnRemoveReferee="HandleRemoveReferee"/> </div> <div class="col-1 col-md-1"> <button class="btn btn-danger btn-sm" @onclick="() => DeleteGame(game.Id)"> <i class="bi bi-trash3-fill"></i> </button> </div> </div> } </div>
