DataTables

DataTables is the most feature-rich table implementation in HtmlForgeX. It provides sorting, searching, pagination, and many extensions.

Basic DataTable

doc.Body.Page(page => {
    page.Table<Employee>(employees, table => {
        table.EnableSearch()
             .EnablePaging(25)
             .EnableSorting();
    });
});

Configuration Options

Search and Filtering

table.EnableSearch()           // Global search box
     .EnableColumnSearch()     // Per-column filters
     .EnableRegexSearch();     // Regex support in search

Pagination

table.EnablePaging(25)         // 25 rows per page
     .EnableLengthChange()     // Allow user to change page size
     .EnableInfo();            // Show "Showing X to Y of Z entries"

Sorting

table.EnableSorting()
     .OrderBy("Name", SortDirection.Ascending);

Column Configuration

table.Column("Name", col => {
    col.Width("200px")
       .Searchable(true)
       .Orderable(true);
});

table.Column("Salary", col => {
    col.Width("120px")
       .Type(ColumnType.Numeric);
});

Extensions

Buttons

table.EnableButtons()          // Export buttons
     .EnableCopyButton()
     .EnableCsvButton()
     .EnableExcelButton()
     .EnablePdfButton()
     .EnablePrintButton();

Responsive Mode

table.EnableResponsive();      // Collapse columns on small screens

Column Visibility

table.EnableColumnVisibility(); // User can toggle columns

State Saving

table.EnableStateSave();       // Remember sort/filter/page state

Type-Aware Formatting

DataTables automatically formats values based on type:

• DateTime — Formatted dates with relative time
• TimeSpan — Human-readable durations
• Numeric — Formatted numbers with separators
• Boolean — Checkmark or cross icons

Cell Highlighting

table.Highlighter("Status", value => {
    if (value == "Active") return TablerColor.Green;
    if (value == "Inactive") return TablerColor.Red;
    return TablerColor.Default;
});