Data Table

A simple table with automatic sorting and pagination using DataTable. Define columns declaratively with DataTableColumn and mark columns as Sortable to enable click-to-sort on headers. The table handles pagination automatically based on InitialPageSize.

Table with multiple row selection using checkboxes. Set SelectionMode to DataTableSelectionMode.Multiple and use @bind-SelectedItems for two-way binding. When the total number of items exceeds the current page, the header checkbox offers a dropdown with options to select the current page or all items.

Use the CellTemplate render fragment to render cells with badges, buttons, and other components instead of plain text. The template receives the data item as its Context parameter, giving you full control over how each cell is displayed.

Add custom action buttons to the toolbar using the ToolbarActions render fragment. These buttons appear alongside the built-in search and column visibility controls, making it easy to add context-specific operations like "Add" or "Export" without building a custom toolbar.

Shows a loading indicator while data is being fetched. Set IsLoading to true to display the loading state, which replaces the table body with a centered message. You can also provide a custom LoadingTemplate to display a spinner or skeleton instead of the default text.

A minimal table without the toolbar by setting ShowToolbar to false. This removes the search input and column visibility toggle, which is useful for simple data displays where filtering and column management are not needed.

Displays a message when there is no data to show. The built-in Empty component renders automatically, or you can customize the message with the EmptyTemplate render fragment to show a custom illustration, message, or call-to-action button.