Basic Usage | Notion

Pagination
- Navigation Controls:
  - "Previous" and "Next" buttons are displayed at the top of the table for easy navigation between pages.
  - Numeric page options are displayed at the bottom of the table, allowing users to jump to a specific page.
Search Functionality
- A search bar allows users to quickly find specific records by typing keywords.
Sorting Functionality
- Users can sort table columns by clicking on the column headers. Sorting toggles between ascending and descending order.
Adjustable Records per Page
- A dropdown or selection control enables users to choose how many records to display per page (e.g., 10, 20, 50).

View page

data-loadtable: Set the URL for retrieving the data from the database
data-filename: Set the file name for the exported files like Excel, CSV, PDF, or DOCX.

@{
    ViewBag.TableId = "Impact" + "TableContainer";
}

<div id="@ViewBag.TableId" data-filename="Impact" data-loadtable="@Url.Action("LoadTable", "Impact")"
     data-table-sort="" data-table-size="" data-table-search="" data-table-pg="">

    @await Html.PartialAsync("_TableLengthAndSearch", new TableLengthViewModel())

    @await Html.PartialAsync("_LoadingTable")
</div>

Table config

In Helpers folder > TableConfig.cs file
Perform the configuration of the table display. The code below is an example of basic configuration.

public static class FaqTableConfig
{
    public static TableConfigViewModel TableConfig = new TableConfigViewModel()
    {
        ShowActionColumn = true,
        EditUrl = $"/faq/edit/[{nameof(FaqViewModel.Id)}]",
        DeleteUrl = $"/faq/delete/[{nameof(FaqViewModel.Id)}]",
        RecordTitleForDeletePopup = nameof(FaqViewModel.Question),
        DefaultSortOrder = $"{nameof(FaqViewModel.CreatedOn)}-desc"
    };

    public static List<ColumnProperty> TableColumns = new List<ColumnProperty>() {
         new ColumnProperty { HeaderKey =nameof(FaqViewModel.Sequence) },
         new ColumnProperty { HeaderKey =nameof(FaqViewModel.Question) },
         new ColumnProperty { HeaderKey =nameof(FaqViewModel.Answer) },
         new ColumnProperty { HeaderKey =nameof(FaqViewModel.CreatedByName)},
         new ColumnProperty { HeaderKey =nameof(FaqViewModel.CreatedOn),IsDateTimeColumn = true,ColumnMinWidth="120" }
        };

    public static List<ColumnProperty> FullTableColumns = TableHelper.GenerateColumnsProperties<FaqViewModel>(TableConfig.DefaultSortOrder, TableColumns);

    public static IQueryable<FaqViewModel> PerformSearch(IQueryable<FaqViewModel> list, string? search)
    {
        if (!string.IsNullOrEmpty(search))
        {
            search = search.TrimStart().TrimEnd();
            list = list.Where(s =>
               (!string.IsNullOrEmpty(s.Question) && s.Question.Contains(search)) ||
               (!string.IsNullOrEmpty(s.Answer) && s.Answer.Contains(search)) ||
               (!string.IsNullOrEmpty(s.CreatedByName) && s.CreatedByName.Contains(search)));
        }
        return list;
    }
}

Controller

[HttpPost]
public async Task<IActionResult> LoadTable([FromBody] dynamic requestData)
{
    try
    {
        TableViewModel tableView = await _faqService.LoadTable(requestData, ViewData);
        return PartialView("~/Views/Shared/_Table.cshtml", tableView);
    }
    catch (Exception)
    {
        return PartialView("~/Views/Shared/_Error.cshtml");
    }
}

Service

public async Task<TableViewModel> LoadTable(dynamic requestData, ViewDataDictionary viewData)
{
    try
    {
        TableActionViewModel tableAction = TableHelper.SetSortSizeSearchPg(requestData, FaqTableConfig.TableConfig);
        List<ColumnProperty> headers = TableHelper.SetColumnOrderAction(FaqTableConfig.FullTableColumns, tableAction.Sort);
        var list = ReadRecords();
        list = FaqTableConfig.PerformSearch(list, tableAction.Search);
        list = TableHelper.PerformSort(list, FaqTableConfig.TableConfig, tableAction.Sort);

        int total = list.Count();
        TableHelper.SetViewData(viewData, tableAction, total, FaqTableConfig.TableConfig);
        int size = int.TryParse(tableAction.Size.ToString(), out int parsedSize) ? parsedSize : tableAction.Size;
        PaginatedList<FaqViewModel> currentPageResult = await PaginatedList<FaqViewModel>.CreateAsync(list, tableAction.Page, size, total, headers);

        TableViewModel tableView = TableHelper.GenerateTableView(currentPageResult, headers, FaqTableConfig.TableConfig, tableAction.Search, total);
        tableView = TableHelper.GenerateRowsColumns(currentPageResult, headers, tableView, FaqTableConfig.TableConfig);

        return tableView;
    }
    catch (Exception ex)
    {
        _generalService.LogError(ex);
        throw;
    }
}

public IQueryable<FaqViewModel> ReadRecords()
{
    var result = from t1 in _db.Faqs
                 join t2 in _db.UserProfiles on t1.CreatedByUserId equals t2.AspNetUserId
                 where t1.IsDeleted == false
                 select new FaqViewModel
                 {
                     Id = t1.Id,
                     Question = t1.Question,
                     Answer = t1.Answer,
                     Sequence = t1.Sequence,
                     CreatedOn = t1.CreatedOn,
                     CreatedByName = t2.FullName
                 };
    return result;
}