Table of Contents

Class TwDataTable<TItem>

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a generic data table component for displaying and managing a collection of items with features such as search, pagination, and customizable rendering.

public class TwDataTable<TItem> : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent

Type Parameters

TItem

The type of items displayed in the table.

Inheritance
TwDataTable<TItem>
Implements
Inherited Members

Remarks

This component allows for flexible rendering of table headers and rows, supports pagination, and provides options for styling and behavior customization. It is designed to work seamlessly with Blazor components.

Constructors

TwDataTable() 

public TwDataTable()

Properties

BodyClass

Additional CSS classes for the table body.

[Parameter]
public string? BodyClass { get; set; }

Property Value

string

Bordered

Whether to show borders.

[Parameter]
public bool Bordered { get; set; }

Property Value

bool

Caption

Optional caption content for the table, forwarded to the underlying TwTable. Provides an accessible name/description for the table that is programmatically associated with it via <caption>. Visually hidden by default unless CaptionVisible is true.

[Parameter]
public RenderFragment? Caption { get; set; }

Property Value

RenderFragment

CaptionVisible

Whether the Caption should be visible. Defaults to false, rendering the caption visually hidden (but still available to assistive technology).

[Parameter]
public bool CaptionVisible { get; set; }

Property Value

bool

Columns

Defines the columns for the table. When provided, headers will be auto-generated with sorting support. Leave null to use manual TableHeader and TableRow fragments.

[Parameter]
public List<TwDataTableColumn<TItem>>? Columns { get; set; }

Property Value

List<TwDataTableColumn<TItem>>

ComfortablePagination

Whether to render the pagination controls with more comfortable, regular-size buttons instead of the default dense (smaller, more compact) buttons. Defaults to false. Only applies when Pageable is true.

[Parameter]
public bool ComfortablePagination { get; set; }

Property Value

bool

DefineTableRows

If true, manually define <tr> elements in TableRow. Otherwise, they are auto-generated.

[Parameter]
public bool DefineTableRows { get; set; }

Property Value

bool

EmptyContent

Content to display when there are no items.

[Parameter]
public RenderFragment? EmptyContent { get; set; }

Property Value

RenderFragment

HeaderClass

Additional CSS classes for the table header.

[Parameter]
public string? HeaderClass { get; set; }

Property Value

string

HeaderRowClass

Additional CSS classes for the header row (tr element) when using Columns. Applied on top of the shared Header theme token, so customizing that theme property affects this header row too.

[Parameter]
public string? HeaderRowClass { get; set; }

Property Value

string

Hoverable

Whether to show hover effect on rows.

[Parameter]
public bool Hoverable { get; set; }

Property Value

bool

Items

The data items to display in the table.

[Parameter]
public List<TItem> Items { get; set; }

Property Value

List<TItem>

ItemsChanged

Event callback when Items parameter changes.

[Parameter]
public EventCallback<List<TItem>> ItemsChanged { get; set; }

Property Value

EventCallback<List<TItem>>

Pageable

Whether the table has pagination.

[Parameter]
public bool Pageable { get; set; }

Property Value

bool

RowClass

Additional CSS classes for table rows.

[Parameter]
public string? RowClass { get; set; }

Property Value

string

RowsPerPage

Number of rows per page.

[Parameter]
public int RowsPerPage { get; set; }

Property Value

int

RowsPerPageChanged

Event callback when RowsPerPage parameter changes.

[Parameter]
public EventCallback<int> RowsPerPageChanged { get; set; }

Property Value

EventCallback<int>

RowsPerPageOptions

Options for rows per page dropdown.

[Parameter]
public int[] RowsPerPageOptions { get; set; }

Property Value

int[]

SearchLabel

Label for the search field.

[Parameter]
public string SearchLabel { get; set; }

Property Value

string

SearchPlaceholder

Placeholder text for the search field.

[Parameter]
public string SearchPlaceholder { get; set; }

Property Value

string

Searchable

Whether the table has search functionality.

[Parameter]
public bool Searchable { get; set; }

Property Value

bool

Striped

Whether to show striped rows.

[Parameter]
public bool Striped { get; set; }

Property Value

bool

TableAttributes

Additional attributes for the table element.

[Parameter]
public Dictionary<string, object> TableAttributes { get; set; }

Property Value

Dictionary<string, object>

TableClass

Additional CSS classes for the table element itself.

[Parameter]
public string? TableClass { get; set; }

Property Value

string

TableHeader

RenderFragment for table header cells.

[Parameter]
public RenderFragment? TableHeader { get; set; }

Property Value

RenderFragment

TableRow

RenderFragment for table row cells, receives the row item.

[Parameter]
public RenderFragment<TItem>? TableRow { get; set; }

Property Value

RenderFragment<TItem>

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

OnInitialized()

Method invoked when the component is ready to start, having received its initial parameters from its parent in the render tree.

protected override void OnInitialized()

OnParametersSet()

Invoked when the component's parameters have been set. Ensures that the component has a unique identifier by generating one if none is provided.

protected override void OnParametersSet()

Remarks

If the component's identifier is not set, a unique ID is generated based on the component's type name (with a 'Tw' prefix removed if present) and a GUID. This helps ensure that each component instance can be uniquely identified, which is useful for scenarios such as associating labels with form elements or targeting elements in client-side scripts.

Edit this page