Razor View Html Table layout

Question

I have a table in a razor view that is displaying data like so

There are fields that I'd like to group like so

I dont think I'm going to achieve this by grouping because I'm going to loose data. Not sure what approach to take?

This is my markup

<div class="row">
    <table class="arrowes-table table-striped">
        <thead>
            <tr>
                <th>Driver Name</th>
                <th>Alarm Type : Count</th>
                <th>Total Distance For Period</th>
                <th>Avg Per Km Driven</th>
                <th>Relative Driver Score</th>
            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model.DriverBehaviour.OrderByDescending(x => x.DriverName))
            {               
                <tr>
                    <td>@Html.HiddenFor(m => item.DriverId) @Html.ActionLink(item.DriverName, "Operator", "Operators", new { area = "VehicleManagement", operatorId = item.DriverId })</td>
                    <td>@item.AlarmType : <span class="brand-red">@item.TypeCount</span></td>
                    <td>@item.TotalDistanceForPeriod</td>
                    <td>
                        @{
                            var avg = @Math.Truncate(1000 * item.AverageAlarmPerKmDriven) / 1000;
                        }
                        @avg
                    </td>
                    <td>
                        @{
                            var relScore = @Math.Truncate(1000 * @item.RelativeDriverScore) / 1000;

                            if (relScore.ToString().StartsWith("-") == true)
                            {
                                <span class="brand-red">@relScore</span>
                            }
                            if (relScore.ToString().StartsWith("-") == false)
                            {
                                <span class="brand-green">+@relScore</span>
                            }

                        }
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

Thanks for any ideas :)

Answer 1

It's ok, I got it

<div class="row">
    <table class="arrowes-table table-striped">
        <thead>
            <tr>
                <th>Driver Name</th>
                <th>Alarm Type : Count</th>
                <th>Total Distance For Period</th>
                <th>Avg Per Km Driven</th>
                <th>Relative Driver Score</th>
            </tr>
        </thead>

        <tbody>
            @foreach (var group in Model.DriverBehaviour.GroupBy(item => item.DriverName))
            {
                <tr>
                    <td>@Html.ActionLink(@group.Key, "Operator", "Operators", new { area = "VehicleManagement", operatorId = group.FirstOrDefault().DriverId })</td>
                    <td>
                        <ul class="list-unstyled">
                            @foreach (var item in group)
                            {
                                <li> @item.AlarmType : <span class="brand-red">@item.TypeCount</span></li>
                            }
                        </ul>

                    </td>
                    <td>
                        <ul class="list-unstyled">
                            @foreach (var item in group.GroupBy(x => x.TotalDistanceForPeriod))
                            {
                                <li>@item.Key</li>
                            }
                        </ul>
                    </td>
                    <td>
                        <ul class="list-unstyled">
                            @foreach (var item in group)
                            {
                                var avg = @Math.Truncate(1000 * item.AverageAlarmPerKmDriven) / 1000;

                                <li>
                                    @avg
                                </li>
                            }
                        </ul>
                    </td>
                    <td>
                        <ul class="list-unstyled">
                            @foreach (var item in group)
                            {
                                var relScore = @Math.Truncate(1000 * @item.RelativeDriverScore) / 1000;

                                if (relScore.ToString().StartsWith("-") == true)
                                {
                                    <li class="brand-red">@relScore</li>
                                }
                                if (relScore.ToString().StartsWith("-") == false)
                                {
                                    <li class="brand-green">+@relScore</li>
                                }
                            }
                        </ul>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

Produces this