TechFlurry.Sve.Blazor.DataTable
5.0.0-alpha
dotnet add package TechFlurry.Sve.Blazor.DataTable --version 5.0.0-alpha
NuGet\Install-Package TechFlurry.Sve.Blazor.DataTable -Version 5.0.0-alpha
<PackageReference Include="TechFlurry.Sve.Blazor.DataTable" Version="5.0.0-alpha" />
paket add TechFlurry.Sve.Blazor.DataTable --version 5.0.0-alpha
#r "nuget: TechFlurry.Sve.Blazor.DataTable, 5.0.0-alpha"
// Install TechFlurry.Sve.Blazor.DataTable as a Cake Addin #addin nuget:?package=TechFlurry.Sve.Blazor.DataTable&version=5.0.0-alpha&prerelease // Install TechFlurry.Sve.Blazor.DataTable as a Cake Tool #tool nuget:?package=TechFlurry.Sve.Blazor.DataTable&version=5.0.0-alpha&prerelease
Sve-Blazor-DataTable
Blazor DataTable component with support for client/server side paging, filtering and sorting, build on top of bootstrap 4.
Important Notice
This project is still under active development! Currently an alpha version is available on NuGet, but keep in mind that a later version might contain breaking changes. Make sure to always check the Changelog for more information.
### Planned work:
- [] Code cleanup
- [] Better documentation
- [] Test cases
- [] Performance tests
- [] Memory consumption tests
- [] CPU usage tests
Installation
Install the NuGet package:
> dotnet add package TechFlurry.Sve.Blazor.DataTable OR PM> Install-Package TechFlurry.Sve.Blazor.DataTable
Use the
--version
option to specify a specific version to install.Or use the build in NuGet package manager of your favorite IDEA. Simply search for
TechFlurry.Sve.Blazor.DataTable
, select a version and hit install.Import the components:
Add the following using statement
@using Sve.Blazor.DataTable.Components
to one of the following:- For global import add it to your
_Imports.razor
file - For a scoped import add it to your desired Blazor component
- For global import add it to your
Reference js interop file:
Add
<script src="/_content/Sve.Blazor.DataTable/js/DataTable.js"></script>
to your _Host.cshtml or your index.html
Usage
DataTable properties
<table style="width: 1005px;"> <tbody> <tr> <td style="width: 271px;"><strong>Name</strong></td> <td style="width: 198px;"><strong>Type</strong></td> <td style="width: 14px;"><strong>Default</strong></td> <td style="width: 521px;"><strong>Description</strong></td> </tr> <tr> <td style="width: 271px;">Items</td> <td style="width: 198px;">IList</td> <td style="width: 14px;">List</td> <td style="width: 521px;">The list of items to display</td> </tr> <tr> <td style="width: 271px;">UsePaging</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Boolean indicating whether to use paging or not</td> </tr> <tr> <td style="width: 271px;">PageNr</td> <td style="width: 198px;">int</td> <td style="width: 14px;">1</td> <td style="width: 521px;">The number of the current page (only applicable when property UsePaging is true)</td> </tr> <tr> <td style="width: 271px;">PageSize</td> <td style="width: 198px;">int</td> <td style="width: 14px;">10</td> <td style="width: 521px;">The amount of items shown on a page (only applicable when property UsePaging is true)</td> </tr> <tr> <td style="width: 271px;">PageCount</td> <td style="width: 198px;">int</td> <td style="width: 14px;">1</td> <td style="width: 521px;">The total amount of pages (only applicable when property UsePaging is true)</td> </tr> <tr> <td style="width: 271px;">FetchData</td> <td style="width: 198px;">Func<RequestArgs, Task>?</td> <td style="width: 14px;">null</td> <td style="width: 521px;">The method used for fetching and manipulating data (paging, filtering, sorting) on the server. When this method is null, all these actions will be performed on the initial dataset on the client.</td> </tr> <tr> <td style="width: 271px;">ShowHeaderFilters</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">true</td> <td style="width: 521px;">Indicates whether or not to show the header/grid filters</td> </tr> <tr> <td style="width: 271px;">AllowRowSelection</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not it's possible to select a row</td> </tr> <tr> <td style="width: 271px;">RowClickedEvent</td> <td style="width: 198px;">EventCallback</td> <td style="width: 14px;">null</td> <td style="width: 521px;">The callback for when a row is clicked (only applicable when property AllowRowSelection is true)</td> </tr> <tr> <td style="width: 271px;">SelectedItem</td> <td style="width: 198px;">TModel</td> <td style="width: 14px;">null</td> <td style="width: 521px;">The selected item</td> </tr> <tr> <td style="width: 271px;">SelectedItemCssClass</td> <td style="width: 198px;">string</td> <td style="width: 14px;">bg-info</td> <td style="width: 521px;">The css class for the selected row</td> </tr> <tr> <td style="width: 271px;">EmptyGridText</td> <td style="width: 198px;">string</td> <td style="width: 14px;">"No records to show"</td> <td style="width: 521px;">The text to show when the Items list is empty</td> </tr> <tr> <td style="width: 271px;">IsLoading</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not data is being fetched, used to show a spinner</td> </tr> <tr> <td style="width: 271px;">Id</td> <td style="width: 198px;">string</td> <td style="width: 14px;">""</td> <td style="width: 521px;">The html identifier of the table tag</td> </tr> <tr> <td style="width: 271px;">ContainerCssClass</td> <td style="width: 198px;">string</td> <td style="width: 14px;">"table-responsive"</td> <td style="width: 521px;">The css class for the container/parent tag of the table</td> </tr> <tr> <td style="width: 271px;">CssClass</td> <td style="width: 198px;">string</td> <td style="width: 14px;">"table"</td> <td style="width: 521px;">The css class for the table tag</td> </tr> <tr> <td style="width: 271px;">ApplyButtonCssClass</td> <td style="width: 198px;">string</td> <td style="width: 14px;">""</td> <td style="width: 521px;">The css class for the "apply" buttons on grid/header filters</td> </tr> <tr> <td style="width: 271px;">InputCssClass</td> <td style="width: 198px;">string</td> <td style="width: 14px;">""</td> <td style="width: 521px;">The css class for the input tags in the grid/header filters</td> </tr> <tr> <td style="width: 271px;">Styles</td> <td style="width: 198px;">TableStyle [Enum FLAGS]</td> <td style="width: 14px;">null</td> <td style="width: 521px;">The style flags used for the table</td> </tr> <tr> <td style="width: 271px;">TableAttributes</td> <td style="width: 198px;">Dictionary<string, object>?</td> <td style="width: 14px;">null</td> <td style="width: 521px;">Any custom attributes for the table tag (see Blazor docs for more info)</td> </tr> <tr> <td style="width: 271px;">RowAttributes</td> <td style="width: 198px;">Dictionary<string, object>?</td> <td style="width: 14px;">null</td> <td style="width: 521px;">Any custom attributes for the rows (see Blazor docs for more info)</td> </tr> <tr> <td style="width: 271px;">ContainerHeight</td> <td style="width: 198px;">int</td> <td style="width: 14px;">300</td> <td style="width: 521px;">The height of the table container in pixels</td> </tr> <tr> <td style="width: 271px;">ContainerHeightUnit</td> <td style="width: 198px;">CssUnit</td> <td style="width: 14px;">CssUnit.Px</td> <td style="width: 521px;">The unit of the container height</td> </tr> <tr> <td style="width: 271px;">IncludeAdvancedFilters</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">true</td> <td style="width: 521px;">Indicates whether to allow advanced filtering or not</td> </tr> <tr> <td style="width: 271px;">IncludeHeaderFilters</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not to include grid/header filters</td> </tr> <tr> <td style="width: 271px;">IncludeSearchButton</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not to include a search icon. When clicked filters, sorting and paging is performed on the server is FetchData has a value otherwise it happens on the client</td> </tr> <tr> <td style="width: 271px;">IncludeToggleFilters</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not to include a toggle icon. When clicked header/grid filters will re or disappear (only applicable when property</td> </tr> <tr> <td style="width: 271px;">SearchOnApplyHeaderFilter</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">true</td> <td style="width: 521px;">Indicates whether or not a search is instantly triggered when a header/grid filter is applied</td> </tr> <tr> <td style="width: 271px;">AutoAddFilterWhenClickedAndNoneActive</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">true</td> <td style="width: 521px;">Indicates whether or not to add an empty filter rule when a filterable column is clicked an no other filter rules exist.</td> </tr> <tr> <td style="width: 271px;">ItemHeight</td> <td style="width: 198px;">int?</td> <td style="width: 14px;">null</td> <td style="width: 521px;">The pixel height of a an item (tr) in the grid. Customize this to get better virtualization.</td> </tr> </tbody> </table>
DataTableColumn properties
<table style="width: 1005px;"> <thead> <tr> <th style="width: 271px;">Name</th> <th style="width: 198px;">Type</th> <th style="width: 14px;">Default</th> <th style="width: 521px;">Description</th> </tr> </thead> <tbody> <tr> <td style="width: 271px;">Property</td> <td style="width: 198px;">Expression<Func<TModel, object>>?</td> <td style="width: 14px;">null</td> <td style="width: 521px;">The selector of a field/property of TModel to use for the column</td> </tr> <tr> <td style="width: 271px;">IsSortable</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not sorting is enabled for this column</td> </tr> <tr> <td style="width: 271px;">IsFilterable</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not filtering is enabled for this column</td> </tr> <tr> <td style="width: 271px;">IsResizable</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether the column is resizable</td> </tr> <tr> <td style="width: 271px;">IsVisible</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">true</td> <td style="width: 521px;">Indicates whether the column should be rendered</td> </tr> <tr> <td style="width: 271px;">CustomTitle</td> <td style="width: 198px;">string</td> <td style="width: 14px;">null</td> <td style="width: 521px;">The name of the column header (by default the name of the property is used)</td> </tr> <tr> <td style="width: 271px;">HeaderTemplate</td> <td style="width: 198px;">RenderFragment<string></td> <td style="width: 14px;">null</td> <td style="width: 521px;">The template to use for the grid header, the string is the name of the column</td> </tr> <tr> <td style="width: 271px;">Id</td> <td style="width: 198px;">string</td> <td style="width: 14px;">""</td> <td style="width: 521px;">The html identifier of the table tag</td> </tr> <tr> <td style="width: 271px;">ContainerCssClass</td> <td style="width: 198px;">string</td> <td style="width: 14px;">"table-responsive"</td> <td style="width: 521px;">The css class for the container/parent tag of the table</td> </tr> <tr> <td style="width: 271px;">CssClass</td> <td style="width: 198px;">string</td> <td style="width: 14px;">"table"</td> <td style="width: 521px;">The css class for the table tag</td> </tr> <tr> <td style="width: 271px;">IsDefaultSortColumn</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not this column is sorted on by default</td> </tr> <tr> <td style="width: 271px;">DefaultSortDirection</td> <td style="width: 198px;">SortDirection [Enum]</td> <td style="width: 14px;">SortDirection.Ascending</td> <td style="width: 521px;">The sort direction of the default sorting column</td> </tr> <tr> <td style="width: 271px;">TextAlignment</td> <td style="width: 198px;">TextAlignment [Enum]</td> <td style="width: 14px;">TextAlignment.Left</td> <td style="width: 521px;">The text alignment for the column</td> </tr> <tr> <td style="width: 271px;">VerticalAlignment</td> <td style="width: 198px;">VerticalAlignment [Enum]</td> <td style="width: 14px;">VerticalAlignment.Bottom</td> <td style="width: 521px;">The vertical alignment for the column</td> </tr> <tr> <td style="width: 271px;">Styles</td> <td style="width: 198px;">TableStyle [Enum FLAGS]</td> <td style="width: 14px;">null</td> <td style="width: 521px;">The style flags used for the table</td> </tr> <tr> <td style="width: 271px;">Attributes</td> <td style="width: 198px;">Dictionary<string, object>?</td> <td style="width: 14px;">null</td> <td style="width: 521px;">Any custom attributes for the table tag (see Blazor docs for more info)</td> </tr> <tr> <td style="width: 271px;">HeaderFilterAttributes</td> <td style="width: 198px;">Dictionary<string, object>?</td> <td style="width: 14px;">null</td> <td style="width: 521px;">Any custom attributes for the header inputs</td> </tr> <tr> <td style="width: 271px;">ContainerHeight</td> <td style="width: 198px;">int</td> <td style="width: 14px;">300</td> <td style="width: 521px;">The height of the table container in pixels</td> </tr> <tr> <td style="width: 271px;">MinWidthHeader</td> <td style="width: 198px;">int</td> <td style="width: 14px;">10</td> <td style="width: 521px;">The height of the table container in the set units (default vw)</td> </tr> <tr> <td style="width: 271px;">MinWidthHeaderUnit</td> <td style="width: 198px;">CssUnit</td> <td style="width: 14px;">CssUnit.Vw</td> <td style="width: 521px;">The unit of the minWidthHeader property</td> </tr> <tr> <td style="width: 271px;">IncludeHeaderFilter</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not to add header/grid filters</td> </tr> <tr> <td style="width: 271px;">IncludeSearchButton</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not to include a search icon. When clicked filters, sorting and paging is performed on the server is FetchData has a value otherwise it happens on the client</td> </tr> <tr> <td style="width: 271px;">IncludeToggleFilters</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not to include a toggle icon. When clicked header/grid filters will re or disappear (only applicable when property</td> </tr> <tr> <td style="width: 271px;">SearchOnApplyHeaderFilter</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not a search is instantly triggered when a header/grid filter is applied</td> </tr> <tr> <td style="width: 271px;">AutoAddFilterWhenClickedAndNoneActive</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">true</td> <td style="width: 521px;">Indicates whether or not to add an empty filter rule when a filterable column is clicked an no other filter rules exist.</td> </tr> <tr> <td style="width: 271px;">RowTemplate</td> <td style="width: 198px;">RenderFragment?</td> <td style="width: 14px;">null</td> <td style="width: 521px;">The custom render fragment to use for the column</td> </tr> <tr> <td style="width: 271px;">RowAttributes</td> <td style="width: 198px;">Dictionary<string, object>?</td> <td style="width: 14px;">null</td> <td style="width: 521px;">Any custom attributes for the rows (see Blazor docs for more info)</td> </tr> <tr> <td style="width: 271px;">ContainerHeight</td> <td style="width: 198px;">int</td> <td style="width: 14px;">300</td> <td style="width: 521px;">The height of the table container in pixels</td> </tr> <tr> <td style="width: 271px;">MaxWidth</td> <td style="width: 198px;">int</td> <td style="width: 14px;">100</td> <td style="width: 521px;">The max width in pixels of a column</td> </tr> <tr> <td style="width: 271px;">MaxWidthUnit</td> <td style="width: 198px;">CssUnit</td> <td style="width: 14px;">CssUnit.Px</td> <td style="width: 521px;">The unit of the MaxWidth property</td> </tr> <tr> <td style="width: 271px;">DateTimeFormat</td> <td style="width: 198px;">DateTimeFormat</td> <td style="width: 14px;">DateTimeFormat.Date</td> <td style="width: 521px;">The DateTimeFormat to use in header/grid filters</td> </tr> <tr> <td style="width: 271px;">IsHeaderVisible</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">true</td> <td style="width: 521px;">Indicates whether the column is visible or not</td> </tr> <tr> <td style="width: 271px;">IncludeAdvancedFilters</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether to allow advanced filtering or not</td> </tr> <tr> <td style="width: 271px;">IncludeSearchButton</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not to include a search icon. When clicked filters, sorting and paging is performed on the server is FetchData has a value otherwise it happens on the client</td> </tr> <tr> <td style="width: 271px;">IncludeToggleFilters</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not to include a toggle icon. When clicked header/grid filters will re or disappear (only applicable when property</td> </tr> <tr> <td style="width: 271px;">SearchOnApplyHeaderFilter</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">false</td> <td style="width: 521px;">Indicates whether or not a search is instantly triggered when a header/grid filter is applied</td> </tr> <tr> <td style="width: 271px;">AutoAddFilterWhenClickedAndNoneActive</td> <td style="width: 198px;">bool</td> <td style="width: 14px;">true</td> <td style="width: 521px;">Indicates whether or not to add an empty filter rule when a filterable column is clicked an no other filter rules exist.</td> </tr> </tbody> </table>
Basic table
<DataTable TModel="WeatherForecast" Items="forecasts">
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.Date" />
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureC" CustomTitle="Celsius"/>
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.MyNullableInt"/>
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.Summary"/>
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.Country"/>
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>
<br /> <br />
Custom template
<DataTable TModel="WeatherForecast" Items="forecasts">
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.Date" />
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureC" CustomTitle="Celsius" />
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit" />
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.MyNullableInt" />
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.Summary" />
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.Country" />
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated">
<Template Context="forecast">
@if (forecast.UpdatedRecently)
{
<i class="fas fa-check-circle" style="color: green;"></i>
}
else
{
<i class="far fa-times-circle" style="color: red;"></i>
}
</Template>
</DataTableColumn>
</DataTable>
<br /> <br />
Sorting
<DataTable TModel="WeatherForecast" Items="forecasts">
<DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.Date"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.MyNullableInt"/>
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.Summary"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.Country"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>
<br /> <br />
Pagination
<DataTable TModel="WeatherForecast" Items="forecasts" UsePaging="true">
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.Date"/>
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureC" CustomTitle="Celsius" />
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit" />
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.MyNullableInt"/>
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.Summary"/>
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.Country"/>
<DataTableColumn TModel="WeatherForecast" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>
<br /> <br />
Filtering
<DataTable TModel="WeatherForecast" Items="forecasts">
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.Date"/>
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius" />
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.MyNullableInt"/>
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.Summary"/>
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.Country"/>
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>
<br /> <br />
Header/Grid filters
<DataTable TModel="WeatherForecast" Items="forecasts" SearchOnApplyHeaderFilter="true">
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.Date"/>
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius" />
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.MyNullableInt"/>
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.Summary"/>
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.Country"/>
<DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>
<br /> <br />
Out of the box Virtualization
<DataTable TModel="WeatherForecast" Items="forecasts">
<DataTableColumn TModel="WeatherForecast">
<Template Context="forecast">
@(Array.IndexOf(forecasts, forecast) + 1)
</Template>
</DataTableColumn>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.Date"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius" />
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.MyNullableInt"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.Summary"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.Country"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>
<br /> <br />
Server side support
<DataTable TModel="WeatherForecast" Items="pagedForecasts.Data" UsePaging="true" FetchData="DoFetchData" PageCount="@pagedForecasts.Paging.PageCount" PageSize="@pagedForecasts.Paging.PageSize">
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.Date"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius" />
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.MyNullableInt"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.Summary"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.Country"/>
<DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>
// Method will be called by the DataTable when necessary
private async Task DoFetchData(RequestArgs<WeatherForecast> args)
{
pagedForecasts = await ForecastService.SearchForecastAsync(args);
// Don't forget to call StateHasChanged() since your component is the owner of the DataTable
StateHasChanged();
}
// ForecastService:
public async Task SearchForecastAsync(RequestArgs<WeatherForecast> args)
{
IQueryable<WeatherForecast> result = context.Forecasts.AsQueryable();
// RequestArgs contains all the information about sorting, paging and filtering
foreach (var filter in args.AppliedFilters)
{
// Filters can easily be translated into expressions,
// or use the filtering info to create your own filtering solution
result = result.Where(filter.GenerateExpression());
}
// Use the Core.Utils to easily apply paging and sorting
// Or use the paging info in RequestArgs to build your own paging solution
pagedResult = Sve.Blazor.Core.Utils.ApplyPaging(result, pager);
return Task.FromResult(pagedResult);
}
<br /> <br />
Support bootstrap table styles
<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Sm">
....
</DataTable>
<br /> <br />
<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Bordered">
....
</DataTable>
<br /> <br />
<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Borderless">
....
</DataTable>
<br /> <br />
<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Dark">
....
</DataTable>
<br /> <br />
<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Hover">
....
</DataTable>
<br /> <br />
<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Striped">
....
</DataTable>
<br /> <br />
Alignment
<DataTable TModel="WeatherForecast" Items="forecasts">
<DataTableColumn TModel="WeatherForecast" TextAlignment="Core.Models.TextAlignment.Center" IsSortable="true" Property="(e) => e.Date"/>
<DataTableColumn TModel="WeatherForecast" TextAlignment="Core.Models.TextAlignment.End" IsSortable="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius" />
<DataTableColumn TModel="WeatherForecast" TextAlignment="Core.Models.TextAlignment.Left" IsSortable="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
<DataTableColumn TModel="WeatherForecast" TextAlignment="Core.Models.TextAlignment.Right" IsSortable="true" Property="(e) => e.MyNullableInt"/>
<DataTableColumn TModel="WeatherForecast" TextAlignment="Core.Models.TextAlignment.Start" IsSortable="true" Property="(e) => e.Summary"/>
</DataTable>
<br /> <br />
License
This project is licensed under the MIT License - see the LICENSE file for details
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 is compatible. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net5.0
- Microsoft.AspNetCore.Components (>= 5.0.17)
- Microsoft.AspNetCore.Components.Web (>= 5.0.17)
- Microsoft.CSharp (>= 4.7.0)
- Sve.Blazor.Core (>= 1.0.15-alpha)
- Sve.Blazor.Pagination (>= 1.0.15-alpha)
- System.Linq.Dynamic.Core (>= 1.2.18)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
5.0.0-alpha | 361 | 6/16/2022 |
- Added support for column resizing
- Added support for conditional rendering of columns
- Added support for more flexible sizing through css units