/*
 DetailWidthsAsString in ColumnLayout specifies percentage width 
 for different device screen widths, while WidthsAsString
 percentage width when shown in-line within a collection control.
 Oder specify the order columns are rendered. Higher Order come first.
 All setting, included Display/Name may be overriden by providing
 a column definition TagHelper within the control definition.
*/
public class SimpleProductViewModel 
{
    public int? Id { get; set; }
    [MaxLength(128)]
    [ColumnLayout(DetailWidthsAsString = "100 50")]
    [Required]
    [Display(Name = "Name", Order = 400)]
    public string Name { get; set; }
    [ColumnLayout(DetailWidthsAsString = "60 30")]
    [Display(Name = "Price", Order = 300)]
    public decimal Price { get; set; }
    [Display(Name = "Cur", Order = 280)]
    [ColumnLayout(WidthsAsString = "10", DetailWidthsAsString = "40 20")]
    public Currency ChosenCurrency { get; set; }
    [ColumnLayout(DetailWidthsAsString = "20")]
    [Display(Name = "Av", Order = 230)]
    public bool Available { get; set; }
 
}   
 
public class SimpleProductViewModelDetail: SimpleProductViewModel
{
    [MaxLength(256)]
    [Display(Name = "Description", Order = 100)]
    [ColumnLayout(DetailWidthsAsString = "80")]
    [DisplayFormat(NullDisplayText = "no description available")]
    public string Description { get; set; }
}

public async Task<IActionResult> DetailServer(int? page)
{
    int pg = page.HasValue ? page.Value : 1;
    if (pg < 1) pg = 1;
 
    var model = new SimpleProductlistViewModel
    {
        Products = await Repository.GetPage<SimpleProductViewModel>(
        null,
        q => q.OrderBy(m => m.Name),
        pg, 5)
    };
    return View(model);
}

tfoot .pagination, thead .pagination
 {
    margin: 0;
    display: inline !important;
}
 
.full-cell {
    width: 100%;
}
 
table .input-validation-error {
    border: 1px solid red;
    background-color: mistyrose;
}