Table - Fod.DemoPage

Interactive Demo

Configure the table to see different features in action.

razor

<FodTable TItem="Employee"
          Items="_employees"
          Selection="SelectionMode.Multiple"
          Paginate="true"
          PageSize="10"
          SortMode="SortMode.Multiple"
          Hover="true"
          Density="TableDensity.Comfortable"
          HeaderVariant="TableHeaderVariant.Default"
          EditMode="EditMode.Row"
          EditTrigger="TableEditTrigger.EditButton"
          RowCommitted="HandleEditCommit"
          SelectedItemsChanged="HandleSelectionChanged">
    <Columns>
        <FodTextColumn TItem="Employee"
                       Field="@nameof(Employee.Id)"
                       Title="ID"
                       Sortable="true" />

        <FodTextColumn TItem="Employee"
                       Field="@nameof(Employee.Name)"
                       Title="Name"
                       Sortable="true"
                       Editable="true" />

        <FodNumericColumn TItem="Employee" TValue="decimal"
                          Field="@nameof(Employee.Salary)"
                          Property="@(e => e.Salary)"
                          PropertyChanged="@((e, val) => e.Salary = val)"
                          Title="Salary"
                          Format="C"
                          Sortable="true"
                          Editable="true" />

        <FodDateColumn TItem="Employee"
                       Field="@nameof(Employee.HireDate)"
                       Property="@(e => e.HireDate)"
                       PropertyChanged="@((e, val) => e.HireDate = val ?? DateTime.Now)"
                       Title="Hire Date"
                       Format="MMM dd, yyyy"
                       Sortable="true"
                       Editable="true" />

        <FodCheckboxColumn TItem="Employee"
                           Field="@nameof(Employee.IsActive)"
                           Property="@(e => e.IsActive)"
                           PropertyChanged="@((e, val) => e.IsActive = val)"
                           Title="Active"
                           Editable="true" />

        <FodTemplateColumn TItem="Employee" Title="Actions">
            <CellTemplate Context="employee">
                <FodIconButton OnClick="() => EditEmployee(employee)">
                    <Icon><FodIcon Icon="IconName.Edit" /></Icon>
                </FodIconButton>
            </CellTemplate>
        </FodTemplateColumn>
    </Columns>
</FodTable>

Column Types

FodTable supports multiple column types for different data formats.

FodTextColumn

Basic text display and editing. Supports automatic field binding via Field parameter.

FodNumericColumn

Numeric values with formatting, min/max validation, step controls, and culture-aware display. Supports int, decimal, double, float types.

FodDateColumn

Date/DateTime display with customizable format strings. Edit mode uses native date picker.

FodCheckboxColumn

Boolean values rendered as checkboxes. Supports tri-state (true/false/null) when property is nullable.

FodTemplateColumn

Fully custom cell rendering via CellTemplate. Use for action buttons, badges, custom layouts, or complex content. Does not support inline editing.

Keyboard Navigation

Full keyboard navigation is supported for accessibility.

Tab / Shift+Tab - Navigate through interactive elements (checkboxes, buttons, editable cells)
Space - Toggle checkbox selection on focused row
Enter - Activate edit mode on editable cells (when EditMode is Cell)
Escape - Cancel editing and restore original value
Arrow Keys - Navigate pagination buttons and controls
Click column headers to sort (with visual sort indicators)

Accessibility

FodTable follows WCAG 2.1 AA guidelines for accessible data tables.

ARIA Roles & Attributes

Tables use semantic table elements with proper role="table" or role="grid" when interactive. Column headers include scope="col", and sortable columns have aria-sort attributes indicating sort direction. Selected rows are marked with aria-selected="true" for screen reader announcement.

Screen Readers

Checkboxes include aria-label attributes describing their purpose (e.g., "Select all rows", "Select row"). Pagination controls announce current page and total pages. Sort indicators are announced with "ascending" or "descending". Loading and empty states provide descriptive messages.

Visual Focus Indicators

All interactive elements (buttons, checkboxes, sortable headers) have visible focus rings that meet WCAG 2.1 contrast requirements. Currently editing cells are visually distinct with highlight borders and background changes.

Best Practices

Recommendations for using FodTable effectively.

Performance: Use pagination for datasets larger than 100 rows to maintain smooth scrolling and rendering.
Selection: Provide a SelectionToolbar for batch operations when using Multiple selection mode.
Editing: Use Row edit mode for forms with multiple fields, Cell mode for quick single-value updates.
Headers: Keep column titles concise (1-2 words). Use tooltips for longer descriptions if needed.
Sticky Columns: Limit to 1-2 sticky columns (typically ID on left, actions on right) to avoid horizontal scroll issues.
Loading States: Always provide LoadingTemplate and EmptyTemplate for better user experience.
Density: Use Compact density for data-heavy dashboards, Comfortable for general content.
Sorting: Enable sorting on numeric, date, and text columns. Avoid sorting on template columns with complex content.
Mobile: Consider hiding less important columns on small screens using CSS media queries on column Class.
Accessibility: Ensure all interactive elements (edit buttons, checkboxes) have proper aria-labels.

Events

FodTable events for handling user interactions.

No properties defined.

API Reference

FodTable component properties and their descriptions.

No properties defined.

Predefined TotalCount

Supply an external TotalCount to override the component's auto-calculation. Useful for server-side pagination where the API returns total separately from the page slice.

razor

<FodTable TItem="MyItem"
          Items="_pageItems"
          TotalCount="_serverTotalCount"
          Paginate="true"
          PageSize="10"
          PageIndexChanged="OnPageChanged">
    <Columns>
        <FodTextColumn TItem="MyItem" Field="@nameof(MyItem.Id)" Title="ID" />
        <FodTextColumn TItem="MyItem" Field="@nameof(MyItem.Name)" Title="Name" />
    </Columns>
</FodTable>

@code {
    private List<MyItem> _pageItems = [];
    private int _serverTotalCount = 500; // received from API

    private async Task OnPageChanged(int pageIndex)
    {
        var result = await _api.GetPageAsync(pageIndex, pageSize: 10);
        _pageItems = result.Items;
        _serverTotalCount = result.TotalCount;
    }
}