Table
A table displays rows of data.
When To Use
- To display a collection of structured data.
- To sort, search, paginate, filter data.
How To Use
Specify dataSource
of Table as an array of data, the OnChange
event and its incoming query state can be paged and filtered.
Two data column types
- PropertyColumn inherits from Column and is bound with 'Property="c=> c.User.Name "' to support cascading access. If used below .NET 6, need to specify the type of 'TItem', 'TProp'.
- Column bound with
@bind-Field="context.UserName"
, but does not support cascading access to class attributes (for example,context.User.Name
), but it can be bound withDataIndex="'User.Name'"
.
Other column types
- ActionColumn for operation buttons or template, would not bind the data.
- Selection for add checkboxes for row selection.
Examples
Table API#
Property | Description | Type | Default Value |
---|---|---|---|
RerenderStrategy | ParameterRender mode of table. See |
RerenderStrategy | -- |
DataSource | ParameterData to display in table | IEnumerable<TItem> | -- |
ChildContent | ParameterContent of the table. Typically will contain PropertyColumn and ActionColumn elements. |
RenderFragment<TItem> | -- |
GroupTitleTemplate | ParameterTemplate for the header of grouping blocks | RenderFragment<GroupResult<TItem>> | -- |
GroupFooterTemplate | ParameterTemplate for the footer of grouping blocks | RenderFragment<GroupResult<TItem>> | -- |
RowTemplate | ParameterTemplate for Rows | RenderFragment<RowData<TItem>> | -- |
ColumnDefinitions | ParameterTemplate for column definitions | RenderFragment<TItem> | -- |
HeaderTemplate | ParameterTemplate for the header | RenderFragment<TItem> | -- |
ExpandTemplate | ParameterTemplate use for what to display when a row is expanded | RenderFragment<RowData<TItem>> | -- |
DefaultExpandAllRows | ParameterInitially, whether to expand all rows | Boolean | -- |
DefaultExpandMaxLevel | ParameterThe max expand level when use DefaultExpandAllRows. This attribute is used to avoid endless loop when the tree records have circular reference. The default value is 4. | Int32 | -- |
RowExpandable | ParameterFunction to determine if a specific row is expandable | Func<RowData<TItem>, Boolean> | true for any rows |
TreeChildren | ParameterChildren tree items | Func<TItem, IEnumerable<TItem>> | Enumerable.Empty |
OnChange | ParameterCallback executed when paging, sorting, and filtering changes | EventCallback<QueryModel<TItem>> | -- |
OnRow | ParameterSet row attributes | Func<RowData<TItem>, Dictionary<String, Object>> | -- |
OnHeaderRow | ParameterSet header row attributes | Func<Dictionary<String, Object>> | -- |
Loading | ParameterIs the table loading | Boolean | false |
Title | ParameterTable title text | String | -- |
TitleTemplate | ParameterTable title content | RenderFragment | -- |
Footer | ParameterFooter text | String | -- |
FooterTemplate | ParameterFooter content | RenderFragment | -- |
Size | ParameterTable size | TableSize | -- |
Locale | ParameterDefault copywriting settings, currently including sorting, filtering, and empty data copywriting | TableLocale | -- |
Bordered | ParameterBordered table or not | Boolean | false |
ScrollX | ParameterSet horizontal scrolling, can also be used to specify the width of the scrolling area, can be set as pixel value, percentage | String | -- |
ScrollY | ParameterSet the vertical scroll, can also be used to specify the height of the scrolling area, can be set as a pixel value | String | -- |
AutoHeight | ParameterAutomatically raise the table height to full screen display | Boolean | -- |
ScrollBarWidth | ParameterScroll bar width | String | 17px |
IndentSize | ParameterWhen displaying tree data, the width of each level of indentation, in px | Int32 | 15 |
ExpandIconColumnIndex | ParameterIndex of the column where the custom expand icon is located | Int32 | 0 |
RowClassName | ParameterFunction to determine the class name of a specific row | Func<RowData<TItem>, String> | -- |
ExpandedRowClassName | ParameterFunction to determine the class name of a specific row when expanded | Func<RowData<TItem>, String> | -- |
OnExpand | ParameterCallback executed when row expands | EventCallback<RowData<TItem>> | -- |
SortDirections | ParameterSupported sorting methods, covering sortDirections in Table | SortDirection[] | -- |
TableLayout | ParameterThe table-layout attribute of the table element, set to fixed means that the content will not affect the layout of the column | String | -- |
OnRowClick | ParameterCallback executed when a row is clicked | EventCallback<RowData<TItem>> | -- |
RemoteDataSource | ParameterIf the datasource is remote or not for more complex use cases | Boolean | false |
Responsive | ParameterWhen set to true and the screen width is less than 960px, the table would switch to small-screen mode. In small-screen mode, only certain features are currently supported, and mis-styling will occur in tables with some features such as group, expanded columns, tree data, summary cell, etc. | Boolean | false |
EmptyTemplate | ParameterCustomize the empty template when the table is empty | RenderFragment | -- |
RowKey | ParameterSpecify the identifier of each row | Func<TItem, Object> | -- |
Resizable | ParameterEnable resizable column | Boolean | -- |
FieldFilterTypeResolver | ParameterSet the field filter type resolver | IFieldFilterTypeResolver | -- |
EnableVirtualization | ParameterWhether to enable virtualization feature or not, only works for .NET 5 and higher | Boolean | -- |
ColumnContext | ColumnContext | -- | |
HidePagination | ParameterWhether to hide pagination or not | Boolean | -- |
PaginationPosition | ParameterPosition of the pagination. Valid values: topLeft, topCenter, topRight, bottomLeft, bottomCenter, bottomRight | String | bottomRight |
PaginationTemplate | ParameterCustom rendering for pagination | RenderFragment<ValueTuple<Int32, Int32, Int32, String, EventCallback<PaginationEventArgs>>> | -- |
Total | ParameterTotal records | Int32 | -- |
TotalChanged | ParameterCallback executed when total records changes | EventCallback<Int32> | -- |
PageIndex | ParameterCurrently visible page | Int32 | 1 |
PageIndexChanged | ParameterCallback executed when currently visible page changes | EventCallback<Int32> | -- |
PageSize | ParameterNumber of records per page | Int32 | 10 |
PageSizeChanged | ParameterCallback executed when page size changes | EventCallback<Int32> | -- |
OnPageIndexChange | ParameterCallback executed when currently visible page changes | EventCallback<PaginationEventArgs> | -- |
OnPageSizeChange | ParameterCallback executed when page size changes | EventCallback<PaginationEventArgs> | -- |
SelectedRows | ParameterRows that are selected across pages | IEnumerable<TItem> | -- |
SelectedRowsChanged | ParameterCallback executed when the selected rows change | EventCallback<IEnumerable<TItem>> | -- |
OnSelectAll | ParameterCallback executed when the SelectAll button is clicked. This is useful for selecting all rows when the table is virtualized or not only shown on current page. The argument is true when selecting all rows, false when unselecting all rows. |
EventCallback<Boolean> | -- |
Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current . |
ForwardRef | -- |
Method Signature | Return Type | Description |
---|---|---|
ReloadData() | void | Reload the data for the table, go to page 1 |
ReloadData(Int32? pageIndex, Int32? pageSize) | void | Reload the data for the table and go to specific page at page size |
ReloadData(QueryModel queryModel) | void | Reload the table's data from the provided query model |
ResetData() | void | Reset the table to its default view. Goes to page 1, default page size and clears sorts and filters. |
GetQueryModel() | QueryModel | Get the query model for the table |
ExpandAll() | void | |
CollapseAll() | void | |
SelectAll() | void | Select all rows of current page |
UnselectAll() | void | Unselect all rows of current page |
SetSelection(ICollection<String> keys) | void | Please use |
SetSelection(IEnumerable<TItem> items) | void | Set all selected items |
SetSelection(TItem item) | void | Select one item |
PropertyColumn API#
Property | Description | Type | Default Value |
---|---|---|---|
Property | ParameterDefines the value to be displayed in this column's cells. | Expression<Func<TItem, TProp>> | -- |
FieldExpression | ParameterExpression to get the data for the field | Expression<Func<TProp>> | -- |
FilterDropdown | ParameterField this column represents | RenderFragment | -- |
Field | ParameterUse @bind-Field to bind to a property of TItem, we recommend using PropertyColumn instead |
TProp | -- |
FieldChanged | ParameterOnly used for @bind-Field and get the expression, no other purpose | EventCallback<TProp> | -- |
Title | ParameterTitle of the column. Uses the following order of priority: AntDesign.ColumnBase.Title , AntDesign.Column`1.DisplayName , then AntDesign.Column`1.FieldName |
String | -- |
DataIndex | ParameterThe corresponding path of the column data in the data item, support for querying the nested path through the array | String | -- |
Format | ParameterColumn data serialization rules, such as DateTime.ToString("XXX") | String | -- |
Sortable | ParameterWhether to allow sorting or not | Boolean | false |
SorterCompare | ParameterComparison function for custom sort | Func<TProp, TProp, Int32> | -- |
SorterMultiple | ParameterNumber of similtaneous sorts allowed | Int32 | -- |
ShowSorterTooltip | ParameterWhether to show tooltip when hovering over sort button or not | Boolean | true |
SortDirections | ParameterAllowable sort directions | SortDirection[] | -- |
DefaultSortOrder | ParameterDefault sort direction | SortDirection | -- |
OnCell | ParameterSet cell attributes | Func<CellData, Dictionary<String, Object>> | -- |
OnHeaderCell | ParameterSet header cell attributes | Func<Dictionary<String, Object>> | -- |
Filterable | ParameterWhether the column is filterable or not | Boolean | false |
Grouping | ParameterWhether the column is used for grouping or not | Boolean | -- |
GroupBy | ParameterSpecifies the grouping function for the column | Func<TProp, Object> | -- |
Filters | ParameterFilter options for the column | IEnumerable<TableFilter<TProp>> | -- |
DefaultFilters | ParameterWhether to allow multiple filters or not | IEnumerable<TableFilter> | true |
FilterMultiple | ParameterWhether to allow multiple filters or not | Boolean | -- |
FieldFilterType | ParameterFilter type for the column | IFieldFilterType | -- |
OnFilter | ParameterFunction that determines if the row is displayed when filtered Parameter 1: The value of the filter item Parameter 2: The value of the column |
Expression<Func<TProp, TProp, Boolean>> | -- |
Filtered | ParameterWhether the dataSource is filtered. Filter icon will be actived when it is true. | Boolean | -- |
CellRender | ParameterSet the column content to be displayed in the table | RenderFragment<CellData<TProp>> | -- |
DisplayName | Display name for the column | String | -- |
FieldName | Field name for the column | String | -- |
SortModel | Sort model of the column | ITableSortModel | -- |
FilterModel | Filter model of the column | ITableFilterModel | -- |
TitleTemplate | ParameterTitle content for column header | RenderFragment | -- |
Width | ParameterWidth for column | String | -- |
HeaderStyle | ParameterStyle for the header cell | String | -- |
RowSpan | ParameterRow span | Int32 | 1 |
ColSpan | ParameterColumn span | Int32 | 1 |
HeaderColSpan | ParameterHeader column span | Int32 | 1 |
Fixed | ParameterFix a column | String | -- |
ChildContent | ParameterContent of the column | RenderFragment | -- |
Ellipsis | ParameterCut off header title with ellipsis when set to true | Boolean | false |
Hidden | ParameterIf the column is hidden or not | Boolean | false |
Align | ParameterAlignment for column contents | ColumnAlign | -- |
ColIndex | Index of this column in the table | Int32 | -- |
Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current . |
ForwardRef | -- |
ActionColumn API#
Property | Description | Type | Default Value |
---|---|---|---|
CellRender | ParameterColumn content for a row. Takes priority over AntDesign.ColumnBase.ChildContent |
RenderFragment<CellData> | -- |
Title | ParameterTitle for column header | String | -- |
TitleTemplate | ParameterTitle content for column header | RenderFragment | -- |
Width | ParameterWidth for column | String | -- |
HeaderStyle | ParameterStyle for the header cell | String | -- |
RowSpan | ParameterRow span | Int32 | 1 |
ColSpan | ParameterColumn span | Int32 | 1 |
HeaderColSpan | ParameterHeader column span | Int32 | 1 |
Fixed | ParameterFix a column | String | -- |
ChildContent | ParameterContent of the column | RenderFragment | -- |
Ellipsis | ParameterCut off header title with ellipsis when set to true | Boolean | false |
Hidden | ParameterIf the column is hidden or not | Boolean | false |
Align | ParameterAlignment for column contents | ColumnAlign | -- |
ColIndex | Index of this column in the table | Int32 | -- |
Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current . |
ForwardRef | -- |
Selection API#
Property | Description | Type | Default Value |
---|---|---|---|
Type | ParameterType of selection column, checkbox or radio. | String | checkbox |
Disabled | ParameterWhether the selection column is disabled. | Boolean | -- |
Key | ParameterNo use now.Please use the RowKey of Table instead. Obsolete Will be removed in a future version. |
String | -- |
CheckStrictly | ParameterCheck table row precisely; parent row and children rows are not associated | Boolean | -- |
CellRender | ParameterCustomize the content of the cell. | RenderFragment<CellData> | -- |
RowSelections | IList<ISelectionColumn> | -- | |
Selected | Boolean | -- | |
Title | ParameterTitle for column header | String | -- |
TitleTemplate | ParameterTitle content for column header | RenderFragment | -- |
Width | ParameterWidth for column | String | -- |
HeaderStyle | ParameterStyle for the header cell | String | -- |
RowSpan | ParameterRow span | Int32 | 1 |
ColSpan | ParameterColumn span | Int32 | 1 |
HeaderColSpan | ParameterHeader column span | Int32 | 1 |
Fixed | ParameterFix a column | String | -- |
ChildContent | ParameterContent of the column | RenderFragment | -- |
Ellipsis | ParameterCut off header title with ellipsis when set to true | Boolean | false |
Hidden | ParameterIf the column is hidden or not | Boolean | false |
Align | ParameterAlignment for column contents | ColumnAlign | -- |
ColIndex | Index of this column in the table | Int32 | -- |
Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current . |
ForwardRef | -- |
QueryModel API#
Property | Description | Type | Default Value |
---|---|---|---|
PageIndex | Int32 | -- | |
PageSize | Int32 | -- | |
StartIndex | Int32 | -- | |
OffsetRecords | Please use StartIndex Obsolete Will be removed in a future version. |
Int32 | -- |
SortModel | IList<ITableSortModel> | -- | |
FilterModel | IList<ITableFilterModel> | -- |
Method Signature | Return Type | Description |
---|---|---|
ExecuteQuery(IQueryable<TItem> query) | IQueryable<TItem> | |
GetFilterExpression() | Expression<Func<TItem, Boolean>> | Get current filters' expression for ORMs like Entity Framework. And you can get the filtered data by executing the expression with the data source. |
CurrentPagedRecords(IQueryable<TItem> query) | IQueryable<TItem> | |
Clone() | Object |