@using WebfrontCore.ViewModels @model WebfrontCore.ViewModels.TableInfo @{ Layout = null; } <h4 class="content-title mb-15 mt-15"> <color-code value="@Model.Header"></color-code> </h4> <table class="table"> <thead> <tr class="bg-primary text-light d-none d-lg-table-row"> @foreach (var column in Model.Columns) { <th>@column.Title</th> } </tr> </thead> <tbody> @{ var start = 0; } @if (!Model.Rows.Any()) { <!-- desktop --> <tr class="bg-dark-dm bg-light-lm d-none d-lg-table-row"> <td colspan="@Model.Columns.Count">@ViewBag.Localization["WEBFRONT_DATATABLE_NO_DATA"]</td> </tr> <!-- mobile --> <tr class="d-flex d-table-row d-lg-none"> <td class="bg-primary text-light text-right w-125"> — </td> <td class="bg-dark-dm bg-light-lm flex-fill w-200">@ViewBag.Localization["WEBFRONT_DATATABLE_NO_DATA"]</td> </tr> } @foreach (var row in Model.Rows) { <!-- desktop --> <tr class="bg-dark-dm bg-light-lm @(Model.InitialRowCount > 0 && start >= Model.InitialRowCount ? "d-none hidden-row-lg" : "d-none d-lg-table-row")"> @for (var i = 0; i < Model.Columns.Count; i++) { var data = row.Datum[i]; <td> @if (data.Template is null) { if (data.Type == ColumnType.Text) { <span>@data.Value</span> } if (data.Type == ColumnType.Link) { <a href="@data.Data" class="no-decoration">@data.Value</a> } if (data.Type == ColumnType.Icon) { <span class="oi @data.Value profile-action" data-action="@data.Data" data-action-id="@data.Id"></span> } if (data.Type == ColumnType.Button) { <div class="btn profile-action" data-action="@data.Data" data-action-id="@data.Id">@data.Value</div> } } else { @data.Template } </td> } </tr> <!-- mobile --> <tr class="@(Model.InitialRowCount > 0 && start >= Model.InitialRowCount ? "d-none hidden-row" : "d-flex d-table-row d-lg-none")"> <td class="bg-primary text-light text-right w-125"> @foreach (var column in Model.Columns) { <div class="mt-5 mb-5 text-truncate">@column.Title</div> } </td> <td class="bg-dark-dm bg-light-lm flex-fill w-200"> @for (var i = 0; i < Model.Columns.Count; i++) { var data = row.Datum[i]; <div class="mt-5 mb-5 text-truncate" style="min-width:0"> @if (data.Type == ColumnType.Text) { <span>@data.Value</span> } @if (data.Type == ColumnType.Link) { <a href="@data.Data">@data.Value</a> } @if (data.Type == ColumnType.Icon) { <span class="oi @data.Value profile-action" data-action="@data.Data" data-action-id="@data.Id"></span> } </div> } </td> </tr> start++; } </tbody> </table> @if (Model.InitialRowCount > 0 && Model.Rows.Count > 0) { <button class="btn btn-block table-slide" data-toggle="tooltip" data-title="@((ViewBag.Localization["WEBFRONT_DATATABLE_LOAD_MORE_FORMAT"] as string).FormatExt(Model.Rows.Count - Model.InitialRowCount))"> <span class="oi oi-chevron-bottom"></span> </button> }