TableReport25

TableReport25 is a reusable and extensible reporting control designed to render structured tabular data with built-in pagination, sorting, dynamic columns, AJAX loading, and responsive behavior. It integrates seamlessly with AdminLTE and Bootstrap-based layouts.

Key Features

• Server-side and AJAX-based pagination
• Sortable columns with persistent state
• Dynamic column visibility and export options
• Expandable rows for additional details
• Mobile-optimized pagination
• Responsive AdminLTE-compatible UI

Public Enums

ColumnType

• Text, Number, Date
• DateTime12, DateTime24
• LastActivity
• Overdue, OverdueWithDays
• Percentage
• CurrencyINR
• Tag, Mobile, Option, Label

SortOrder

• None
• Asc
• Desc

TextAlign

• Auto
• Left
• Center
• Right

DownloadOptions

• CSV
• Excel
• Pdf

Table Rendering

The GetHtml method renders the complete table structure, including headers, body, pagination, alerts, and optional AJAX scripts.

Rendered Components

• Optional table title
• Dynamic column toolbar (export and visibility)
• Responsive table layout
• Striped and hover-enabled rows
• Pagination bar

Dynamic Columns

TableReport25 supports dynamic column visibility and export functionality.

• Column visibility toggle
• Export options (CSV / Excel / PDF)
• Hidden inputs to persist column state

Sorting & Paging Information

The GetTableInfo method extracts paging and sorting values from the HTTP request.

• Current page number
• Sort field
• Sort order (Ascending / Descending)
• Rows per page

Internal Architecture

Private Fields

• _Columns – Column definitions
• _Rows – Row and cell data
• sbHeader – Header HTML
• sbBody – Body HTML
• sbFooter – Footer HTML
• sbPagebar – Pagination HTML
• sbTable – Final table markup
• sbTableTitle – Optional title
• sbAlertMessage – Alert messages
• _dynamicCnt – Dynamic column UI
• _AjaxCnt – AJAX scripts
• _AjaxFunc – AJAX function name
• _ControlId – Unique table ID
• _IsExpandableTable – Expandable row flag

Pagination

TableReport25 provides multiple pagination methods to support desktop, mobile, and AJAX-driven interfaces. Pagination is generated dynamically based on total rows, page size, and the current page.

AddPageBar

Generates a full-featured pagination bar for desktop views. It supports page navigation, record count display, and an optional Rows-Per-Page selector.

Method Signature

public void AddPageBar(
    int TotalRows,
    int PageSize,
    int CurrentPage,
    bool RowsPerPage = false
)

      public ActionResult ManageForm(string btnsubmit, FormModel.ReportPage model, string BtnExport)
  {
      try
      {

          if (BtnExport == "Excel")
          {
              model.Response = AlertBox25.GetHtml(AlertBox25.AlertType.Success, "File Downloaded").ToString() ?? "";

          }
          string page = "1";
          string sort = "Name";
          string order = "desc";
          int Rowspp = 10;
      var tableNameList = new List { "", "Date", "", "Email", "Mobile", "City", "LastActivity", "" };
          var selectedColumns = model.SelectedColumns;
          var tableReport = new TableReport25("ManageForm", false, false);
          var GetTableInfo = tableReport.GetTableInfo();
          sort = GetTableInfo.SortField ?? "Name";
          if (GetTableInfo.SortOrder == TableReport25.SortOrder.Asc)
              order = "asc";
          else if (GetTableInfo.SortOrder == TableReport25.SortOrder.Desc)
              order = "desc";
          if (string.IsNullOrWhiteSpace(GetTableInfo.SortField) == true) sort = "Name";
          if (!string.IsNullOrEmpty(GetTableInfo.CurrentPage))
              page = GetTableInfo.CurrentPage ?? "1";
          Rowspp = GetTableInfo.RowsPerPage;
          if (string.IsNullOrEmpty(model.Status)) model.Status = "All";
          var RefreshProperties = new Button25.Properties()
          {
              ButtonColor = Button25.ButtonColor.Grey,
              ButtonAlign = Button25.ButtonAlign.Left,
              StandardWidth = Button25.Size.Auto,
              FontAwesomeIcon = "fas fa-download"
          };
          var downbtn = new Button25("BtnExport", "Download", "Refresh");
          var HtmlStr = downbtn.GetHtml(RefreshProperties).ToString();
          var OptionList = new List { DownloadOptions.CSV, DownloadOptions.Excel };
          var DynamicColumn = new TableReport25.DynamicColumn
          {
              ColumnList = tableNameList,
              SelectedValues = selectedColumns,
              ShowDynamicColumn = true,
              ShowExport = true,
              ControlId = "SelectedColumns",
              DownloadOptions = OptionList,
              ButtonHtml = HtmlStr ?? ""
          };
          var column = new TableReport25.Column();
          column = new TableReport25.Column()
          { Sort = sort, ColumnType = TableReport25.ColumnType.Tag, Name = "", Field = "", Order = order, TextAlign = TableReport25.TextAlign.Center };
          tableReport.AddColumn(column);

          column = new TableReport25.Column()
          { Sort = sort, ColumnType = TableReport25.ColumnType.Date, Name = "Date", Field = "Date", Order = order, TextAlign = TableReport25.TextAlign.Center };
          tableReport.AddColumn(column);

          column = new TableReport25.Column()
          { Sort = sort, ColumnType = TableReport25.ColumnType.General, Name = "Name", Field = "Name", Order = order, TextAlign = TableReport25.TextAlign.Left, Width = "Auto" };
          tableReport.AddColumn(column);

          column = new TableReport25.Column()
          { Sort = sort, ColumnType = TableReport25.ColumnType.General, Name = "Email", Field = "Email", Order = order, TextAlign = TableReport25.TextAlign.Left, Width = "300" };
          tableReport.AddColumn(column);

          column = new TableReport25.Column()
          { Sort = sort, ColumnType = TableReport25.ColumnType.Mobile, Name = "Mobile", Field = "Mobile", Order = order, TextAlign = TableReport25.TextAlign.Left };
          tableReport.AddColumn(column);

          column = new TableReport25.Column()
          { Sort = sort, ColumnType = TableReport25.ColumnType.General, Name = "City", Field = "City", Order = order, TextAlign = TableReport25.TextAlign.Left, Width = "120" };
          tableReport.AddColumn(column);
          column = new TableReport25.Column()
          { Sort = sort, ColumnType = TableReport25.ColumnType.LastActivity, Name = "Last Activity", Field = "LastActivity", Order = order, TextAlign = TableReport25.TextAlign.Center, Width = "120" };
          tableReport.AddColumn(column);
          column = new TableReport25.Column()
          { Sort = sort, ColumnType = TableReport25.ColumnType.Option, Name = "Option", Field = "", Order = order, TextAlign = TableReport25.TextAlign.Center, Width = "80" };
          tableReport.AddColumn(column);
          string url = "/Form/Form1";
          string dwn_url = "/Form/Download";


          var leadDataList = new List<(string id, string name, string email, string mobile, string city, string date, bool isDownload)>
          {
              ("100456", "Test", "test.a@.gmail.com", "1122233334", "xxx", DateTime.Now.ToString(), false),
              ("100457", "User 2", "test.s@gmail.com", "369258147", "Thoothukudi", DateTime.Now.ToString(), false),
              ("100458", "User 3", "testemail@gmail.com", "9876543210", "Thoothukudi", DateTime.Now.ToString(), false),
              ("100459", "User 4", "testuser.s@gmail.com", "+910258741963", "Thoothukudi", "26-Jun-2023", true)
          };

          foreach (var lead in leadDataList)
          {
              var row = new TableReport25.Row();

              AddCell(row, new Link25.Properties
              {
                  Icon = Icon25.IconCollection.TooltipDefault,
                  TargetUrl = url,
                  ShowPopup = true,
                  PopupWidth = 500,
                  PopupHeight = 650
              });
              AddCell(row, new Link25.Properties { Name = lead.date });
              AddCell(row, new Link25.Properties { Name = lead.name });
              AddCell(row, new Link25.Properties { Name = lead.email });
              AddCell(row, new Link25.Properties { Name = lead.mobile });
              AddCell(row, new Link25.Properties { Name = lead.city });
              AddCell(row, new Link25.Properties { Name = lead.date });

              AddCell(row, new Link25.Properties
              {
                  //FontAwesomeIcon = "fas fa-star",
                  TargetUrl = lead.isDownload ? dwn_url : url,
                  ToolTip = lead.isDownload ? "Download" : "Edit",
                  NewTab = lead.isDownload,
                  Icon = Icon25.IconCollection.ActionDelete
              });
              //AddCell(row, new Link25.Properties { Name = expandContent });

              tableReport.AddRow(row);
          }

          tableReport.AddPageBar(4, Rowspp, int.Parse(page));
          string table = tableReport.GetHtml();



          model.Table = table;
          return View(model);
      }
      catch
      {
          return View(model);
      }
  }

Behavior

• Calculates total pages using TotalRows and PageSize
• Displays record range (e.g. Showing 11 to 20 of 100 entries)
• Shows Previous and Next navigation buttons
• Displays page numbers with ellipsis for large datasets
• Optionally shows a Rows-Per-Page dropdown
• Triggers form submission on page or page-size change

AddPageBarForMobile

Generates a simplified pagination bar optimized for mobile devices. The layout is compact and touch-friendly.

Method Signature

public void AddPageBarForMobile(
    int TotalRows,
    int PageSize,
    int CurrentPage
)

Behavior

• Displays current record range
• Shows minimal page navigation
• Optimized for small screen interaction
• Does not include a Rows-Per-Page selector

AddPageBarForAjax

Generates an AJAX-enabled pagination bar. Page navigation is handled through JavaScript without a full page refresh.

Method Signature

public void AddPageBarForAjax(
    int TotalRows,
    int PageSize,
    int CurrentPage,
    string TabFunction = ""
)

Smaple Manage Form Code

Behavior

• Uses JavaScript callbacks for page navigation
• Supports dynamic data loading
• Binds pagination to the configured AJAX function
• Displays Previous / Next buttons and page numbers

AjaxMethod

Configures AJAX behavior for the table and injects the required JavaScript to load data asynchronously.

Method Signature

public void AjaxMethod(
    string FormId,
    string Url,
    string FunctionName = ""
)

Behavior

• Registers a JavaScript function for AJAX data loading
• Binds the form ID and table ID to the AJAX handler
• Loads table content dynamically from the specified URL