Table: Blazor table component

#	Customer	Trend
1	Northwind Traders	Up
2	Contoso	Down
3	Fabrikam	Up
4	Globex	Up
5	Umbrella Corp	Down

Examples

Basic

Items, HeaderContent and RowTemplate; context is the row's item.

Invoice	Customer	Plan	Amount
INV-2084	Northwind Traders	Enterprise	€1250.00
INV-2085	Contoso	Pro	€290.00
INV-2086	Fabrikam	Pro	€145.50
INV-2087	Initech	Free	€0.00

website/Examples/DataDisplay/TableBasicExample.razor Source

Striped, dense and hover

Three flags for the common looks; cells can hold any component.

#	Customer	Seats	Trend
1	Northwind Traders	42	up
2	Contoso	31	down
3	Fabrikam	18	up
4	Globex	12	down
5	Initech	8	up

website/Examples/DataDisplay/TableStylesExample.razor Source

Paging

RowsPerPage pages the rows; a TablePager in PagerContent changes page and page size.

Date	Service	Environment
04 Mar	Billing API	Production
07 Mar	Customer portal	Staging
10 Mar	Admin dashboard	Production
13 Mar	Auth service	Staging

1-4 / 10

website/Examples/DataDisplay/TablePagingExample.razor Source

Row click

OnRowClick passes the item and its index.

Customer	Plan
Northwind Traders	Enterprise
Contoso	Pro
Fabrikam	Free

Selected: click a row

website/Examples/DataDisplay/TableRowClickExample.razor Source

API

<Table<T>>

DaisyBlazor

Parameters

Dense bool
= false
Applies the daisyUI table-sm class for compact rows.
Hover bool
= false
Highlights the hovered body row (daisyUI row-hover: base-200, base-300 on striped rows).
Items IEnumerable<T>
= null
Source rows; paged client-side and rendered through RowTemplate.
Loading bool
= false
When true, replaces the rows with LoadingContent or a default loading spinner.
RowsPerPage int
= 10
Initial number of rows shown per page; defaults to 10. The pager's choice is kept internally (see PageSize).
Striped bool
= false
Applies the daisyUI table-zebra class for alternating row colors.
Class string
= null
Additional CSS classes merged onto the table element.
Style string
= null
Inline styles applied to the scrolling wrapper div.

Name	Type	Default	Description
Dense	bool	false	Applies the daisyUI table-sm class for compact rows.
Hover	bool	false	Highlights the hovered body row (daisyUI row-hover: base-200, base-300 on striped rows).
Items	IEnumerable<T>	null	Source rows; paged client-side and rendered through RowTemplate.
Loading	bool	false	When true, replaces the rows with LoadingContent or a default loading spinner.
RowsPerPage	int	10	Initial number of rows shown per page; defaults to 10. The pager's choice is kept internally (see PageSize).
Striped	bool	false	Applies the daisyUI table-zebra class for alternating row colors.
Class	string	null	Additional CSS classes merged onto the table element.
Style	string	null	Inline styles applied to the scrolling wrapper div.

Events

OnRowClick EventCallback<TableRowClickEventArgs<T>>
Raised with the item and its page-relative index when a row is clicked; also makes rows look clickable.

Name	Type	Description
OnRowClick	EventCallback<TableRowClickEventArgs<T>>	Raised with the item and its page-relative index when a row is clicked; also makes rows look clickable.

Content

ChildContent RenderFragment
Extra content rendered after the table, inside the cascaded pager-host scope.
HeaderContent RenderFragment
Header cells rendered inside the thead row.
LoadingContent RenderFragment
Content shown while Loading is true, replacing the default spinner.
NoRecordsContent RenderFragment
Content shown in a full-width row when there are no items to display.
PagerContent RenderFragment
Pager (e.g. a TablePager) rendered right-aligned below the table.
RowTemplate RenderFragment<T>
Template rendering the cells of one body row for each item.

Name	Type	Description
ChildContent	RenderFragment	Extra content rendered after the table, inside the cascaded pager-host scope.
HeaderContent	RenderFragment	Header cells rendered inside the thead row.
LoadingContent	RenderFragment	Content shown while Loading is true, replacing the default spinner.
NoRecordsContent	RenderFragment	Content shown in a full-width row when there are no items to display.
PagerContent	RenderFragment	Pager (e.g. a TablePager) rendered right-aligned below the table.
RowTemplate	RenderFragment<T>	Template rendering the cells of one body row for each item.

<Th>

DaisyBlazor

Parameters

Class string
= null
CSS classes applied to the <th> element.
Style string
= null
Inline CSS style applied to the <th> element.

Name	Type	Default	Description
Class	string	null	CSS classes applied to the <th> element.
Style	string	null	Inline CSS style applied to the <th> element.

Content

ChildContent RenderFragment
Header cell content.

Name	Type	Description
ChildContent	RenderFragment	Header cell content.

<Td>

DaisyBlazor

Parameters

DataLabel string
= null
Emitted as the data-label attribute, a hook for custom responsive CSS. DaisyBlazor itself ships no stacked table layout, so it has no visual effect on its own.
Class string
= null
CSS classes applied to the td element.
Style string
= null
Inline styles applied to the td element.

Name	Type	Default	Description
DataLabel	string	null	Emitted as the data-label attribute, a hook for custom responsive CSS. DaisyBlazor itself ships no stacked table layout, so it has no visual effect on its own.
Class	string	null	CSS classes applied to the td element.
Style	string	null	Inline styles applied to the td element.

Content

ChildContent RenderFragment
The cell content.

Name	Type	Description
ChildContent	RenderFragment	The cell content.

<TablePager>

DaisyBlazor

Parameters

PageSizeOptions int[]
= [10, 25, 50, 100]
Page sizes offered in the page-size select; defaults to 10, 25, 50 and 100.
Class string
= null
Extra CSS classes merged onto the root element.
Style string
= null
Inline CSS styles applied to the root element.

Name	Type	Default	Description
PageSizeOptions	int[]	[10, 25, 50, 100]	Page sizes offered in the page-size select; defaults to 10, 25, 50 and 100.
Class	string	null	Extra CSS classes merged onto the root element.
Style	string	null	Inline CSS styles applied to the root element.

From MudTable

Table keeps MudTable's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.