Simpler Table Sort example that works

[bobtnt]

Is your feature request related to a problem? Please describe.

I saw the sample code for Table with Sorting but the c# code is too complex for me (the razor code is fine). I tried creating something much simpler. I was able to get the data and the sort button to show up. When the sort button is clicked, it toggles between "Asc", "Desc", "Unset" which is correct but the rows in the table don't get sorted at all. What am I missing? Thanks in advance.

Describe the solution you'd like

Is it possible to provide simpler example for Table with Sort?

Additional context

Here's what I tried:

========================= Razor ==================

@page "/"

<Table TItem="Lot" Items="simpleList">
    <TableColumns>
        <TableColumn @bind-Field="@context.lotnum" Sortable="true" />
    </TableColumns>
</Table>

======================== c# ======================

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;

namespace Testing.Shared.Pages
{
  public partial class Index : ComponentBase
    {

     public class Lot
        {
            public string lotnum { get; set; }

            public Lot()
            {
            }

            public Lot(string lotnum)
            {
                this.lotnum = lotnum;
            }
        }

    public List<Lot> simpleList { get; set; } = new List<Lot>() { new Lot("a"), new Lot ("b")};

    }
}

[ArgoZhang]

@bobtnt hi thank you for contacting us. I will repro this issue. I will fix it if the rows in the table don't get sorted at all

[ArgoZhang]

@bobtnt hi. I found something.

please use OnQueryAsync instead of Items parameter.

<Table TItem="Lot" OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.lotnum" Sortable="true" />
    </TableColumns>
</Table>

@code {
    public class Lot
    {
        public string lotnum { get; set; }

        public Lot() { }

        public Lot(string lotnum)
        {
            this.lotnum = lotnum;
        }
    }

    public List<Lot> simpleList { get; set; } = new List<Lot>() { new Lot("a"), new Lot("b") };

    private Task<QueryData<Lot>> OnQueryAsync(QueryPageOptions option)
    {
        IEnumerable<Lot>? items = null;
        switch (option.SortOrder)
        {
            case SortOrder.Asc:
                items = simpleList.OrderBy(i => i.lotnum);
                break;
            case SortOrder.Desc:
                items = simpleList.OrderByDescending(i => i.lotnum);
                break;
            default:
                items = simpleList;
                break;
        }

        return Task.FromResult(new QueryData<Lot>()
        {
            IsSorted = true,
            Items = items
        });
    }
}

[ArgoZhang]

@bobtnt

BTW: The Items parameter is used to display functions only. not provide the other functions like Sort Filter Pagination

[bobtnt]

Thank you very very much for the amazing great support!!!

[bobtnt]

Improvement to the above: I found out I can replace the 12 lines of code below with just 2 lines. The saving is even greater when there are more columns (if there are N columns then the 12 lines of code becomes 12 x N lines while the 2 lines of code I added will stay at 2 lines).

private Task<QueryData<Lot>> OnQueryAsync(QueryPageOptions option)
{
    IEnumerable<Lot>? items = null;



    //Added these 2 lines --------------------------
    var invoker = Utility.GetSortFunc<Lot>();
    items = invoker(simpleList, option.SortName, option.SortOrder);


    /*These 12 lines can be removed ------------------------
    switch (option.SortOrder)
    {
        case SortOrder.Asc:
            items = simpleList.OrderBy(i => i.lotnum);
            break;
        case SortOrder.Desc:
            items = simpleList.OrderByDescending(i => i.lotnum);
            break;
        default:
            items = simpleList;
            break;
    }   
   -------------------------------*/


    return Task.FromResult(new QueryData<Lot>()
    {
        IsSorted = true,
        Items = items
    });
}

[ArgoZhang]

@bobtnt yes. :)

[ScottHuangZL]

@bobtnt

As for below, it is work for Memory sorting, will be low performance in real project.

  var invoker = Utility.GetSortFunc<SampleClass>();
    items = invoker(simpleList, option.SortName, option.SortOrder);

You should need replaced by below to avoid pull large data from database into memory.
private IQueryable? items;

private IQueryable<SampleClass>? items;
items = LambdaExtensions.Sort<SampleClass>(items, options.SortName, options.SortOrder);

And as for filter, should do similar changes:

  var isFiltered = false;
        if (options.Filters.Any())
        {
            //This is for IQuerable 
            items = items.Where(options.Filters.GetFilterLambda<SampleClass>());
            isFiltered = true;
        }