logo

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 with DataIndex="'User.Name'".

Other column types

  • ActionColumn for operation buttons or template, would not bind the data.
  • Selection for add checkboxes for row selection.

Examples

Basic query and editing cases. Used Generate Columns and Generate FormItem.

expand code expand code

Simple table with actions.

expand code expand code

In .NET 5 and later versions, it is recommended to use @bind-Feild or DataIndex for <Colum> to bind data easily.

Limitation: When using @bind-Feild to bind an entity of interface type, the property must be a reference type, such as int need to be changed to int?. Using DataIndex does not have this issue.

expand code expand code

Instead of using @bind-Field, you can specify the property to be bound by setting the data type TData and the data index string DataIndex, which can bind descendant properties. The type of the column data is the same as the definition of TData.

When the bound property is ValueType and is Nullable, TData should be set to Nullable type. For example: <Column TData="int?" DataIndex="prop1" /> or <Column TData="Nullable<int>" DataIndex="prop1" />.

When Column uses DataIndex, Table's OnChange event parameter QuerModel<TItem>.SortModel[].FieldName is equal to DataIndex.

See Member path helper for details of the access modes supported by DataIndex.

expand code expand code

Columns can be automatically generated by the 'TItem' type.

Notice: This feature is in iteration, and incompatible changes may occur in subsequent releases.

expand code expand code

You can set any property to a row or cell by passing in a delegate that returns the dictionary. Such as 'onclick', 'style', 'class' and so on. Same as OnRow OnHeaderRow OnCell OnHeaderCell.

For the rules for returning dictionaries, please refer to the official documentation [Attribute splatting and arbitrary parameters].

expand code expand code

Pagging using router.

expand code expand code

Rows can be selectable by making first column as a selectable column. You can use rowSelection.type to set selection type. Default is checkbox.

Default values can be set for SelectedRows to set the default selection. The default is to compare the column data with the object reference, so select the object from the DataSource. You can also customize the compare key using the RowKey parameter on the Table.

expand code expand code

For scenarios where the database is queried using ADO.NET, DataTable can also be used as the data source.

expand code expand code

Generate the table from json dynamicly.

expand code expand code

Add border, title and footer for table.

expand code expand code

Use Filters to generate filter menu in columns, OnFilter to determine filtered result, and FilterMultiple to indicate whether it's multiple or single selection.

Uses defaultFilteredValue to make a column filtered by default.

Use Sortable to make a column sortable. Or use SorterCompare, a function of the type (a, b) => int for sorting data locally.

SortDirections: ['ascend' | 'descend'] defines available sort methods for each columns, effective for all columns when set on table props. You can set as ['ascend', 'descend', 'ascend'] to prevent sorter back to default status.

Uses DefaultSortOrder to make a column sorted by default.

If a SortOrder or DefaultSortOrder is specified with the value ascend or descend, you can access this value from within the function passed to the sorter as explained above. Such a function can take the form: function(a, b, sortOrder) { ... }.

You can also customize the filtering logic in the 'OnChange' event method, using the method 'QueryModel.ExecuteQuery(data)' to build query expressions.

expand code expand code

Passing compare functions to SorterCompare for custom sorting. The return value definition is the same as System.Collections.Generic.IComparer<T>.

expand code expand code

When Filters is not set, filters can also be displayed using the Filterable property on Column, which by default creates built-in filters based on the type of property bound.

The built-in filters are displayed based on the type of the bound property, and currently support numeric, enum, string, bool, Guid and DateTime.

expand code expand code

For types that are not supported by the built-in filters, or when you want different semantics like customizing the default operator, you can specify a custom FieldFilterType on the column.

In this example, the Color column can be filtered by the colors brightness (or sorted by its hue).

The custom Filter Types should implement IFieldFilterType, but may use the provided BaseFieldFilterType or DateFieldFilterType as a base implementation.

Your custom filter types can also be applied for a whole table, by setting its FieldFilterTypeResolver property, or globally by registering a different IFilterTypeResolver service. (See DefaultFieldFilterTypeResolver as a reference/fallback implementation.)

expand code expand code

Implement a customized column search example via FilterDropdown.

expand code expand code

Every table configuration with 'Filter', 'Sort', 'PageSize' and 'PageIndex' can be saved and later re-applied by ReloadData(). Also applied sorting and filters can be reseted by ResetData().

expand code expand code

Column support SorterMultiple to config the priority of sort columns. Though SorterCompare to customize compare function. You can also leave it empty to use the interactive only.

expand code expand code

This example shows how to fetch and present data from a remote server, and how to implement filtering and sorting in server side by sending related parameters to server.

Setting rowSelection.preserveSelectedRowKeys to keep the key when enable selection.

Note, this example use Mock API that you can look up in Network Console.

From version 0.9.0, you can set RemoteDataSource to true to forbid client side pagination behaviors(this is useful when your datasource records can not fulfill a whole page so that Table component doesn't know whether the data is from a local data storage or a remote one').

expand code expand code

Since the QueryModel already provides all the information needed for a query (page number, sort, filter), query protocols such as OData are well supported.

It is recommended to use OData Client and the 'IQueryable' extension method 'ExecuteTableQuery' performs fluid queries. But there's a known problem that needs to be solved.

  DefaultContainer dsc = new DefaultContainer(new Uri("https://services.odata.org/V4/(S(uvf1y321yx031rnxmcbqmlxw))/TripPinServiceRW/"));
  var _data = dsc.People.ExecuteTableQuery(queryModel).ToArray();
expand code expand code

There are two compacted table sizes: middle and small. The small size is used in Modals only.

expand code expand code

When there's too much information to show and the table can't display all at once. (Different implementation classes used for abstract classes in this example.)

expand code expand code

Table column title supports HeaderColSpan that set in column. When each of them is set to 0, the cell will not be rendered.

Table cell supports ColSpan and RowSpan that set in Column return object. When each of them is set to 0, the cell will not be rendered.

expand code expand code

Display tree structure data in Table when there is field key children in dataSource, try to customize childrenColumnName property to avoid tree table structure.

You can control the indent width by setting indentSize.

expand code expand code

Table component can solve the circular reference in tree data.

When you are using DefaultExpandAllRows, the max expand level is limited by DefaultExpandMaxLevel to avoid endless loop.

The deault value of DefaultExpandMaxLevel is 4.

expand code expand code

Set Grouping to specify the column property values for grouping, and you can also set GroupBy delegation to specify the grouping values. You can also set GroupTitleTemplate to customize the group title.

Note: Currently implementation is client-side grouping , so if DataSource is bound to IQueryable<T>, make sure it includes database grouping operations (paging, sorting, and filtering are still in effect)

expand code expand code

Display large amounts of data in scrollable view.

Specify width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout.

expand code expand code

To fix some columns and scroll inside other columns, and you must set ScrollX meanwhile.

Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout.

A fixed value which is greater than table width for ScrollX is recommended. The sum of unfixed columns should not greater than ScrollX.

expand code expand code

A Solution for displaying large amounts of data with long columns.

Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout.

A fixed value which is greater than table width for ScrollX is recommended. The sum of unfixed columns should not greater than ScrollX.

Note: If the fixed column on the right is misplaced, set 'ScrollBarWidth' to fix the width of the table scroll bar.

expand code expand code

You can set AutoHeight to make the table fill the height of the container. The header will also be fixed.

expand code expand code

You can use HeaderTemplate to customize the table header.

In this example, theColumnDefinitions is separated from the HeaderTemplate, and the definition in the ColumnDefinitions controls only the cell binding.

expand code expand code

You can use RowTemplate to customize the template for a single data item. In this example, each row of data consists of two table rows.

'TableRow' is the table row component.

expand code expand code

A solution for displaying custom styling on rows.

When you need to conditionally style rows based on the data provided. The example highlights rows where score is < 70.

Note: If you set a fixed column, you also need to specify a style for the cell.

expand code expand code

Table with editable cells.

expand code expand code

Table with editable rows.

expand code expand code

Showing more detailed info of every row.

expand code expand code

Enable resizable column with Resizable parameter.

expand code expand code

Ellipsize cell content via setting column.ellipsis.

Cannot ellipsize table header with sorters and filters for now.

expand code expand code

Set summary content by SummaryRow prop. Sync column fixed status with SummaryCell.

expand code expand code

Can use the Hidden property to control the display of the Column.

expand code expand code

If you want to display list mode on a small screen device (<960px), please set the 'Responsive' attribute. (v0.10.6+ Default to false)

This example needs to adjust the width of the browser to be effective.

expand code expand code

Can use the Align property to control which way that column is aligned.

expand code expand code

Set EnableVirtualization and ScrollY to enable virtualization, improve performence when you have many rows in one page, .NET 5 or higher framework is required. Enable RemoteDataSource to load on demand.

expand code expand code

Table pagination settings.

expand code expand code

By using PaginationTemplate can achieve pagination customization.

expand code expand code

Table API#

Property Description Type Default Value
RerenderStrategy ParameterRender mode of table. See documentation for details. 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 instead if possible, as this method won't correctly select items from invisible rows when virtualization is enabled.
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
Statistic Tabs
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.