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

Simple table with actions.

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

Limitation: When using @bind-Field 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.

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.

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

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

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

Tables can be configured to paginate based on URL query parameters by utilizing NavigationManager.

Rows can be selectable by making first column as a selectable column. You can use Selection.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.

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

Generate the table from JSON dynamically.

Use the Bordered attribute to enable borders on cells. The table's title and footer can also be customized using the Title and Footer attributes.

Use Filters to generate a filter menu in the table's columns, OnFilter to determine filtered result, and FilterMultiple to indicate whether it's a 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.

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

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.

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.)

Implement a customized column search example via FilterDropdown.

Every table configuration with Filter, Sort, PageSize and PageIndex can be saved and later re-applied by ReloadData().

Applied sorting and filters can also be reset by calling ResetData().

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.

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 Selection.PreserveSelectedRowKeys to keep the key when enabling 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').

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();

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

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.)

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.

Tables can nest rows into a tree structure when TreeChildren is set.

You can control the width of the indent by setting IndentSize.

Table can mitigate circular references in tree data.

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

The default value of DefaultExpandMaxLevel is 4.

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)

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.

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.

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.

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

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.

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.

Rows can be given a class by utilizing the RowClassName property. In this example, the row is given a class of danger if the data item's Score property is greater than 70.

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

Table with editable cells.

Table with editable rows.

Additional content can be nested in a table row by using the ExpandTemplate component. In this example another table is nested in the row to show additional data.

Enable resizable columns with the Resizable property.

Ellipsize cell content via setting Column.Ellipsis.

Currently, table header with sorters and filters cannot be ellipsized.

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

Use the Hidden property to control the display of a Column.

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.

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.

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

Table pagination settings.

By using PaginationTemplate can achieve pagination customization.