ivanjosipovic/blazortable

Blazor Table Component with Sorting, Paging and Filtering

Connect with me

Active Projects

KubeUI - Kubernetes User Interface

BlazorApplicationInsights - Application Insights for Blazor web applications

YamlDotNet.System.Text.Json - Allows YamlDotNet to de/serialize System.Text.Json objects

KubernetesCRDModelGen - Kubernetes CustomResourceDefinition Model Generator for .NET

OIDC-Guard - OpenID Connect (OIDC) & OAuth 2 API Server for securing Kubernetes Ingress

ingress-nginx-validate-jwt - Enables Kubernetes ingress-nginx to validate JWT tokens

BlazorInteropGenerator - Blazor Interop Generator

TSDParser - C# TypeScript Definition Parser

JsonPathLINQ - JsonPath to LINQ Expressions

Inactive Projects

ACR-SyncTool - Command line tool to synchronize Docker Image Registries to private Azure Container Registries

AutoSPInstallerOnlineGithubPage - AngularJS front end of http://AutoSPInstaller.com

BlazorFileSaver - Blazor Component wrapper for FileSaver.js

BlazorTable - Blazor Table Component with Sorting, Paging and Filtering

blazortable's Issues

Roadmap

High level roadmap, any help or suggestions are appreciated!

• Documentation
  • More Examples
• Row
  • Custom Template
  • Per row edit mode
  • Single Select
  • Multi Select
  • Detail Template
  • Per row CSS (by @conficient)
  • Custom Empty Data Template (by @conficient)
  • Custom Loading Data Template
• Column
  • Column Selection
    • Picker of columns to be added/removed
  • Column Resizing
  • Column Hiding (by @NilsPur)
  • Dynamic Columns
  • Column CSS
  • Templateless Columns (by @conficient)
  • Column Reordering
  • Column Sorting/Filtering
• Custom @key expression
• Global Search
• Server Side Paging/Sorting
  • Filtering
• Remove JavaScript
  • Popper.js
• Themes
  • Custom
    • no external dependency
  • Bootstrap 4
  • Material
• Tests
  • UI Tests
  • Wait for Blazor Test Framework?
• Localization (by @chrgraefe)
  • English
  • German
  • Other (PRs welcome)

Footer data is incorrect when using Footer and DetailTemplate

As you can see in the screen shot the new column that is added for the '+' puts the footer data in the wrong column.

CustomSelect filter doesn't provide first value in WASM

Minimal column:

<Column TableItem="Model" Title="Item" Field="@(x => x.Item)" Sortable="true" Filterable="true">
  <CustomIFilters>
    <CustomSelect TableItem="Model">
      <CustomSelectOption Key="1" Value="@("1")"/>
      <CustomSelectOption Key="2" Value="@("2")"/>
      <CustomSelectOption Key="3" Value="@("3")"/>
    </CustomSelect>
  </CustomIFilters>
</Column>

When a user filters on this column and selects "Is Equal To" with a value of 1 (initial value), the filter doesn't pass 1. You need to select a different value other than 1 and switch back to it for 1 to filter through.

Obviously, an empty option would prevent this as it would force users to select a non-empty value.

Redundant TableItem="AnyClass" attribute

Why is the "TableItem" attribute redundant in the markup?

Is it really necessary?

Consider adding non-generic `ITable` interface so child content does not have to use `TableItem`

While working on EmptyDataTemplate I realised that the TypeParam on this component, and the Pager are redundant. However they are used to register with the parent table via the CascadingParameter ITable<TableItem>

It occurred to me that we could also implement a lower interface ITable (which ITable<TableItem> implements) for non-type specific components.

I can put a pull request together if you wish to demo this.

Feature: EmptyDataTemplate

I'm going to create a PR for the EmptyDataTemplate feature. My proposed design is as follows:

• EmptyDataTemplate is an optional render fragment

• If a BlazorTable dataset has no rows and an EmptyDataTemplate is defined, this should be rendered, replacing the current static text <h1>No items....</h1>. It would still be rendered inside a single row+cell spanning the table width.

• If there is no EmptyDataTemplate set then nothing is rendered after the header row.

How do you hide column ?

Blazor beginner, How do you hide a column ?

Table shows no items if you don't enter a page size

Not really an issue but it did confuse me for a few minutes :)

Probably should have a default set?

Also do you think there should be a way to always show everything? Apart from entering a very high number that is... or just using the row count. Not really an issue I suppose.

Thanks.

Checkbox (excel) style filter

Hey,

Does BlazorTable component provide an ability to filter column in checkbox style like how we have in Excel? If not, would you consider adding one? Here is an example:

With the current filter functionality you can apply one filter condition on a column like so:

Thanks!

Highlight selected row

Here is how I got the selected row to be highlighted:

1. On Table.razor.cs, add the following:

   internal int SelectedRow { get; set; } = -1;
   internal void RowClicked(int rowIndex)
   {
   SelectedRow = rowIndex;
   StateHasChanged();
   }

2. On Table.razor, modify the following:

   if (TempItems.Any())
   {
   int ith = 0;
   foreach (TableItem item in TempItems)
   {
   int rowIndex = ith;
   <tr @key="item" class="@(SelectedRow == rowIndex ? "table-primary" : "")" @OnClick="() => RowClicked(rowIndex)" @OnClick:stopPropagation>
   @foreach (IColumn column in Columns)

Cannot sort or filter dynamic column

Using this code

<button class="btn btn-sm btn-danger" title="Add Column" @onclick="@((x) => Add())">Add Column</button>

<br />
<Table  TableItem="Item" Items="data" PageSize="5" @ref="Table" ColumnReorder="true">
    <Column TableItem="Item" Title="Id" Field="@(x => x.Id)" Sortable="true" Filterable="true" />
    <Pager ShowPageNumber="true" ShowTotalCount="true" />
</Table>

@code
{
    private ITable<Item> Table;

    private IEnumerable<Item> data;

    protected override Task OnInitializedAsync()
    {
        data = new Item[]{
            new Item {Id=12,Value=876   },
            new Item {Id=13, Value=188   },
            new Item {Id=14, Value=6688   },
            new Item {Id=15,Value=884   },
            new Item {Id=16,Value=1234   },
            new Item {Id=17,Value=838   },
            new Item {Id=18,Value=288   },
            new Item {Id=19,Value=188   }

        };
        return Task.CompletedTask;
    }

    public class Item
    {
        public int Id { get; set; }

        public decimal Value { get; set; }
    }

    private void Add()
    {
        var col = new Column<Item>()
        {
            Title = "Value",
            Field = (x) => x.Value,
            Sortable = true,
            Filterable = true,
            Width = "10%"
            , SortColumn=true
        };

        Table.AddColumn(col);
    }
}

Filtering on the new column gives me

System.NullReferenceException: Object reference not set to an instance of an object.
   at BlazorTable.Column`1.ToggleFilter()
   at BlazorTable.Table`1.<>c__DisplayClass102_0.<BuildRenderTree>b__4(MouseEventArgs x)
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit '53evlbBFkNyGDLRCtfH067Ajr3k1Qo-Gcjsx3f1vFqk'.
System.NullReferenceException: Object reference not set to an instance of an object.
   at BlazorTable.Column`1.ToggleFilter()
   at BlazorTable.Table`1.<>c__DisplayClass102_0.<BuildRenderTree>b__4(MouseEventArgs x)
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

and sorting on the new column gives me

System.NullReferenceException: Object reference not set to an instance of an object.
   at BlazorTable.Column`1.SortBy()
   at BlazorTable.Table`1.<>c__DisplayClass102_0.<BuildRenderTree>b__3()
   at Microsoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsync[T](MulticastDelegate delegate, T arg)
   at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, Object arg)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync(UInt64 eventHandlerId, EventFieldInfo fieldInfo, EventArgs eventArgs)

How can I filter and sort without exceptions?

Global search error

Hi!
Thanks for fantastic library!

I have a strange error:
If I use ShowSearchBar="true" and Columns with Template this causes an error.

Sample

<Table TableItem="Object" Items="data" ShowSearchBar="true" TableClass="table" TableRowClass="@(x => x.GetRowClass())">
  <Column TableItem="Object" Title="Id" Field="@(x => x.ShortId)" Sortable="false" Filterable="true" />
    <Column TableItem="Object" Title="Request" Sortable="false" Filterable="false">
      <Template>
        <button @onclick="@(r => GetLog(@context))" class="btn btn-light">RQ</button>
      </Template>
    </Column>
</Table>

Next, we need to refresh the page, because it stops working.

Thank you!

Images srcs

Hi,

I've included BlazorTable on a Blazor project that is hosted on a Github project page. As the page url is "user.github.id/projectname/", the images of the component are missing because of the absolute path on the src attributes "/_content/BlazorTable/images/sort-desc.png".

Maybe the first "/" of the path should be removed: "_content/BlazorTable/images/sort-desc.png". This way, path is used and the component images are properly visualized.

_content files reference the root of the site

When using BlazorTable on a site in the location of http://domain/site/ the _content files are incorrectly referenced as http://domain/_content rather than http://domain/site/_content.
The root cause of this is Table.razor referencing the site root in the HTML, e.g. < img src="/_content/BlazorTable/images/sort-desc.png" />.

Use OData API to demonstrate real-life scenario

Since this project is relatively new, please consider using https://services.odata.org/V4/TripPinServiceRW as a data source which is ODATA based.

Once you hit that service, it will generate a read-write endpoint as https://services.odata.org/V4/<InstanceId>/TripPinServiceRW/ where InstanceId is something like (S(pfvo2qaqwuyjvcsqafohkyyg))

It would give this project more attention since no other grid/table samples use ODATA as a source.

ODATA will be revamped by Microsoft and community pretty soon via a project called RESTier

Filter popup flicker

The source version of the Filter popup will temporarily display in the upper left of the table grid on the webpage and then (correctly) re-position itself beneath the column. However, the demo version 1.0.5 does not. Is the source code in GitHub up to date? I notice that it still says version 1.0.0. Thanks.

Export datatable to Excel and/or CSV

This is a suggest feature, is it possible to add export to Excel and/or CSV feature? I think this is an essential feature to have for datagrid. Thanks for consideration.

Styling per Row

Is there a way so i can give a color per row in the table ?
This is handy when people want to show in which state some data has.

How this is achieved in Native code:

<table class="table" id="myTable">
            <thead>
                <tr class="header">
                    <th>
                        <span class="sort-link" @onclick="() => SortTable(columnsStrings[0])">Tag</span>
                        <span class="fa @(GetSortStyle(columnsStrings[0]))"></span>
                    </th>
                    <th>
                        <span class="sort-link" @onclick="() => SortTable(columnsStrings[1])">Gepland</span>
                        <span class="fa @(GetSortStyle(columnsStrings[1]))"></span>
                    </th>
                    <th>
                        <span class="sort-link" @onclick="() => SortTable(columnsStrings[2])">Afdeling</span>
                        <span class="fa @(GetSortStyle(columnsStrings[2]))"></span>
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in data)
                {
                    @if (!item.HasBeenSavedBefore && item.Testtype == "vervallen")
                    {
                        <tr @onclick="() => TrClickedAtIndex(item.ID)" style="background-color: crimson;">
                            <td>@item.Tag</td>
                            <td>@item.Gepland</td>
                            <td>@item.Afdeling</td>
                        </tr>
                    }
                    @if(!item.IsDirty && item.Testtype == "nieuw" && !item.HasBeenSavedBefore) 
                    {
                        <tr @onclick="() => TrClickedAtIndex(item.ID)" style="background-color: white;">
                            <td>@item.Tag</td>
                            <td>@item.Gepland</td>
                            <td>@item.Afdeling</td>
                        </tr>
                    }
                    @if (!item.IsDirty && !item.HasBeenSavedBefore && item.Testtype == "hertest")
                    {
                        <tr @onclick="() => TrClickedAtIndex(item.ID)" style="background-color: skyblue;">
                            <td>@item.Tag</td>
                            <td>@item.Gepland</td>
                            <td>@item.Afdeling</td>
                        </tr>
                    }

                }
            </tbody>
        </table>

Reason for TableRowClass being an Expression?

I have a quick design question. Why is TableRowClass configured to be Expression<Func<TableItem, string>> when it is just going to be compiled into Func<TableItem, string> and reused?

This is being brought up because my table rows could be 1 of 4 different classes and making an Expression turned into a nested ternary expression.

Retrieve Filter List Like Selected List

Hello, thank you for your great work.
Could we retrieve the list of filtered items as you retrieved th list of selected items

Expanded table collapses when method for event is called

I am using buttons in a nested table (DetailTemplate) to Add/Edit/Delete items. When the onclick method is called the expanded table collapses.

Support programmatic filtering

This is a feature request to support programmatic filtering. My use case stems from having a page with a table that can be navigated to with query parameters (imagine /list?column1=a&column2=b...). My goal is to feed these query parameters directly into the table so that the user doesn't have to fill out the filters when the page loads.

I've had partial success with something like this:

var column = Table.Columns.First(c => c.Title == "Full name");
column.Filter = model => model.FullName.Contains(FullNameParameter);

But this doesn't work out because the StringCondition isn't filled out.

I am not sure how this should be designed since the FilterControls on the columns aren't instantiated until a user manually clicks the filter icon.

Ideally, there could be support at the Table level:

Table<TItem> table;

table.ApplyFilter("Column Title", StringCondition.Contains, "FilterValue");
table.ApplyFilter("Other Column Title", NumberCondition.IsEqualTo, 1);
table.ApplyFilter("XYZ", BooleanCondition.IsTrue);
table.ApplyFilter("ABC", EnumCondition.IsEqualTo, SomeEnum.Member);
...
table.RemoveFilter("Column Title");

Modal popup closes immediately when used in template.

I'm trying to show a confirm popup when user clicks on a delete template button. The popup closes immediately instead of waiting for user input. I have used the same component using regular html table and it works fine.

Please let me know how to use this correctly with Blazor Table.

Table:

<Table TableItem="SiteMasterDO" Items="siteMasterDOs" PageSize="15">
            <Column TableItem="SiteMasterDO" Title="Site Number" Field="@(x => x.Site_Number)" Sortable="true" Filterable="true" Width="20%" />
            <Column TableItem="SiteMasterDO" Title="Site Description" Field="@(x => x.Site_Desc)" Sortable="true" Filterable="true" Width="20%" />
            <Column TableItem="SiteMasterDO" Title="Site Abbr" Field="@(x => x.Site_Abbr)" Sortable="true" Filterable="true" Width="20%">
            </Column>
            <Column TableItem="SiteMasterDO" Title="Edit" Field="@(x => x.Site_Number)" Sortable="true" Width="4%">
                <Template>
                    <a href="@($"siteMasterDetail/{context.Site_Number}")" class="btn btn-primary">
                        <i class="fas fa-edit"></i>
                    </a>
                </Template>
            </Column>
            **<Column TableItem="SiteMasterDO" Title="Delete" Field="@(x => x.Site_Number)" Sortable="true" Width="4%">
                <Template>
                    <BlazorDialog [email protected]_Number OnClick=HandleDelete></BlazorDialog>
                </Template>
            </Column>**
            <Pager ShowPageNumber="true" ShowTotalCount="true" ShowPageSizes="true" />
        </Table>

Blazor Dialog:

@page "/blazorDialog"
@page "/blazorDialog/{id}"

<button class="btn btn-primary" @onclick="@ModalShow"><i class="fas fa-trash-alt"></i></button>

@if (showModal)
{
    <div class="modal fade show" id="myModal" style="display:block" aria-modal="true" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Confirm action</h4>
                    <button type="button" class="close" @onclick="@ModalCancel">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <p>This is the modal content!</p>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn" @onclick="@ModalCancel">Cancel</button>
                    <button type="button" class="btn btn-danger" @onclick="@(() => OnClick.InvokeAsync(id))">Delete</button>
                </div>

            </div>
        </div>
    </div>
}

@code {
    [Parameter]
    public string id { get; set; }
    [Parameter] public EventCallback<string> OnClick { get; set; }
    [CascadingParameter] public bool showModal { get; set; } = false;

    void ModalShow() => showModal = true;
    void ModalCancel() => showModal = false;
    void ModalOk()
    {
        var res = id;
        showModal = false;
    }
}

Toggle custom popover on row

I want to assign data-toggle="popover" to the row to show a custom popover on the row. Can this be currently done?

System.NullReferenceException when using Globalsearch in a template column with related data

I'm using version 1.11.1 and I get an error when I have a template column that uses shows a field from a related model. The error is System.NullReferenceException: 'Object reference not set to an instance of an object.'

Here is what the offending column look like:

<Column TableItem="Model" Title="Region" Field="@(x => x.Region.Name)" Sortable="true" Filterable="true" Width="5%">
	<Template>
		@(context.Region != null ? context.Region.Name : string.Empty)
	</Template>
</Column> 

Here is my entire table definition:

<Table TableItem="Model" Items="_models" PageSize="50" ColumnReorder="true" ShowSearchBar="true" RowClickAction="RowClick" SelectionType="SelectionType.Single"
	   TableClass="table table-hover table-sm" TableHeadClass="thead-light">
	<Column TableItem="Model" Title="Name" Field="@(x => x.Name)" Sortable="true" Filterable="true" DefaultSortColumn="true" Width="10%" />
	<Column TableItem="Model" Title="Phone Number" Field="@(x => x.PhoneNumber)" Sortable="true" Filterable="false" Width="5%" />
	<Column TableItem="Model" Title="Email" Field="@(x => x.EmailAddress)" Sortable="true" Filterable="false" Width="10%">
		<Template>
			<a href="mailto:@context.EmailAddress">@context.EmailAddress</a>
		</Template>
	</Column> 
	<Column TableItem="Model" Title="Locality" Field="@(x => x.Locality)" Sortable="true" Filterable="true" Width="5%" />
   <Column TableItem="Model" Title="Region" Field="@(x => x.Region.Name)" Sortable="true" Filterable="true" Width="5%">
		<Template>
			@(context.Region != null ? context.Region.Name : string.Empty)
		</Template>
	</Column>                
	<LoadingDataTemplate>
		<div class="text-center">
			<p><em>Loading...</em></p>
		</div>
	</LoadingDataTemplate>
	<Pager ShowPageNumber="true" ShowTotalCount="true" />
</Table>

Everything works great if I comment out the "Region" column.

Originally posted by @tkennedy13 in #135 (comment)

Server-Side

Hi, I just want to ask if how to make a server side paging?

Thank You!

Filtering popup shows in incorrect position when rendering server side

I assume this issue is related to it running server side. I'm not sure how much server side support you have at the moment but normal rendering of the table works fine as well as sorting and pagination.

If you open the filter popup it shows at the top left of the page as it doesn't know where to go.

How can I load a page with a table in EditMode?

How can I load a page with a table in EditMode?

Documentation and examples

Do we need to consider the structure of the examples and documentation? I noticed you separated the code samples app into a "Shared" project, and then added Server and WASM versions - that was a good idea.

Samples

When I added EmptyDataTemplate I added an example page, EmptyData.razor, but that could lead a very cluttered Pages folder. Perhaps we could add a Features folder to the sample app, and have a page per-feature inside that folder?

Documentation

I did want to add a documentation page for the new feature, but wasn't sure where to do this. We could use the Wiki on Github but I don't think that supports pull requests? Or perhaps just add a /docs/ folder to the source, with markdown content, and refer to a table on contents from the main ReadMe.md ?

Happy to sort this out if you're agreeable.

Trying to make generic BlazorTable component - cannot sort, filter, or use global search

I'm trying to make a generic table component so I can write something like:
<GeneralBlazorTable TItem="Person" MyId="Table1" MyData="PeopleData"></GeneralBlazorTable>
Instead of a full table definition in my markup.

I have the following component that half works:

@namespace TestBlazorApp.Pages
@using BlazorTable
@using System.Reflection
@using System.ComponentModel

@typeparam TItem

<Table id="@MyId" TableItem="TItem" Items="MyData" PageSize="15" ShowSearchBar="true">

    @foreach (var propertyInfo in typeof(TItem).GetProperties())
    {
        string Title = propertyInfo.Name;

    <Column TableItem="TItem" Title="@Title" Field="@(x => typeof(TItem).GetProperty(propertyInfo.Name).PropertyType)" Sortable="true" Filterable="true">
        <Template>
            @RenderProperty(context, propertyInfo)
        </Template>
    </Column>

    }

    <LoadingDataTemplate>
        <div class="text-center">
            <h1>Custom Loading Template</h1>
        </div>
    </LoadingDataTemplate>
    <Pager ShowPageNumber="true" ShowTotalCount="true" />
</Table>

@code {

    [Parameter]
    public IList<TItem> MyData { get; set; }

    [Parameter]
    public string MyId { get; set; }


    public string RenderProperty(TItem data, PropertyInfo property)
    {
        object rawData = typeof(TItem).GetProperty(property.Name).GetValue(data);

        if (rawData == null)
            return "";

        if (rawData.GetType().IsEnum)
        {
            Type enumType = data.GetType().GetProperty(property.Name).GetValue(data).GetType();

            MemberInfo[] memberInfo = enumType.GetMember(rawData.ToString());
            if (memberInfo != null && memberInfo.Length > 0)
            {
                object[] attrs = memberInfo[0].GetCustomAttributes(typeof(DescriptionAttribute), false);

                if (attrs != null && attrs.Length > 0)
                {
                    //Pull out the description value
                    return ((DescriptionAttribute)attrs[0]).Description;
                }
            }
        }

        return rawData.ToString();
    }
}

For further reference, the Person class I'm using is the following:

public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
        public Gender Gender { get; set; }
    }

public enum Gender
    {
        [Description("A Male")] Male,
        [Description("A Female")] Female
    } 

And this is the exact page that I'm putting the component on:

@page "/BlazorTableTest"
@inject FakeDataAccessService myData
@namespace TestBlazorApp.Pages
@using BlazorTable
@using TestBlazorApp.Data
<h3>BlazorTableTest</h3>

<GeneralBlazorTable TItem="Person" MyId="Table1" MyData="PeopleData"></GeneralBlazorTable>

@code {
    IList<Person> PeopleData;

    protected override void OnInitialized()
    {
        GetPeopleData();
    }

    private async Task GetPeopleData()
    {
        PeopleData = await myData.GetFakePeople();
        StateHasChanged();
    }

}

My issue is that although the data is inserted into the table as expected, all filtering, sorting, and searching appears to be non-functioning.

This could very well be something wrong with my code as I'm not a very experienced C# developer, but I wasn't able to find any examples of what I'm doing to guide me so I figured I would ask here about it.

Thanks for your time.

Translation

Are you planning to translate (or option to customize) static strings - in page and filer? It would be fine for non-english speaking end users.

Warning on `UnknownParameters`

I noticed there is a compiler warning on

        [Parameter(CaptureUnmatchedValues = true)]
        public IDictionary<string, object> UnknownParameters { get; set; }

of Change 'UnknownParameters' to be read-only by removing the property setter. - That seemed odd since it has to be settable. I checked the Blazor code at InputBase.cs - Steve used an IReadOnlyDictionary here which removes that warning.

Search value in all columns

Hello everybody,

First of all, I think that this repository is awesome.

I use to use JQuery Datatable in my web projecs but since I would like to move to blazor webassembly I was searching for a library written in C# and I have found this repository that I was able to intregate very smoothly in my solution.

I would like to ask if you are thinking about a search field like the one that JQuery Datatable has.

Thank you for the nice job!

DateTime filter

Has it been considered to Change/add the option to filter on DateTime rather than just date?
DateFilter.Razor uses
<input type="date" class="form-control form-control-sm" @bind-value="FilterValue" />
Perhaps either having a DateTimeFilter.Razor or making an option to make the above use
<input type="datetime-local" class="form-control form-control-sm" @bind-value="FilterValue" />

Default selection of row

How can I select a row on runtime?
When table is rendered...
I have added a param SelectObject with get and set and I clear selection and after I have added the item in Selection list, but doesn't work...

Thanks,
Luigi.

Dynamic Columns

Hello I'm planning to use your grid in a simple application. But It should have atleast dynamic columns base on the date of the current month.

Can you help me how to figure it out? I love your grid component.

Filtering nullable inner object throws NRE [WASM]

I am working with this object template:

public class Outer
{
  public string Id { get; set; }

  public Inner Inner { get; set; }
}

public class Inner
{
  public string Value { get; set; }
}

And this table:

<Table TableItem="Outer">
  <Column TableItem="Outer" Title="Inner value" Field="@(x => x.Inner.Value)" Sortable="true" Filterable="true">
    <Template>
      @if (@context.Inner == null)
      {
        <text>N/A</text>
      }
      else
      {
        <a href="" @onclick="@(() => SomeMethod(@context))" @onclick:preventDefault>@context.Inner.Value</a>
      }
    </Template>
  </Column>
</Table>

The table renders fine and the appropriate string filter is detected. However, whenever Outer.Inner is null, a null reference exception is thrown. If I filter the table before hand to make sure Outer.Inner has values, the exception is not thrown.

Here is the exception:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] blazor.webassembly.js:1:36074
      Unhandled exception rendering component: Object reference not set to an instance of an object. blazor.webassembly.js:1:36074
System.NullReferenceException: Object reference not set to an instance of an object. blazor.webassembly.js:1:36074
  at (wrapper managed-to-native) System.Reflection.RuntimeMethodInfo.InternalInvoke(System.Reflection.RuntimeMethodInfo,object,object[],System.Exception&) blazor.webassembly.js:1:36074
  at System.Reflection.RuntimeMethodInfo.Invoke (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) <0x27408c8 + 0x000ce> in <filename unknown>:0 blazor.webassembly.js:1:36074
--- End of stack trace from previous location where exception was thrown --- blazor.webassembly.js:1:36074
<empty string> blazor.webassembly.js:1:36074
  at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion (System.Threading.Tasks.Task task) <0x2dfa1b8 + 0x000e6> in <filename unknown>:0 blazor.webassembly.js:1:36074
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x2e00d10 + 0x000c2> in <filename unknown>:0 

Pager's AlwaysShow doesn't work

When Pager.AlwaysShow is false, the Page is supposed to only display if there's more than one page, but as you can see here:

BlazorTable/src/BlazorTable/Components/Pager.razor

Line 3 in f5e2321

@if (AlwaysShow || (Table.TotalPages >= 1))

the Pager will also display if there's only one page.

Sorting nullable table columns

I have a table that contains a DateTime? column which I'd like to sort descending, however with the null values coming first. Currently, they come first if you sort ascending. It would be great if we could somehow set the sorting behavior for nullable columns in such a way that null values come first.

Unhandled exception when filtering Enum column

Using version 1.12.0 (downgrading to version 1.11.1 fixed this issue)

When I filter a column with an Enum value (Caf.Midden.Utils.Models.Zones) I get the following error:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: The binary operator NotEqual is not defined for the types 'Caf.Midden.Utils.Models.Zones' and 'System.Object'.
System.InvalidOperationException: The binary operator NotEqual is not defined for the types 'Caf.Midden.Utils.Models.Zones' and 'System.Object'.
  at (wrapper managed-to-native) System.Reflection.RuntimeMethodInfo.InternalInvoke(System.Reflection.RuntimeMethodInfo,object,object[],System.Exception&)
  at System.Reflection.RuntimeMethodInfo.Invoke (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) <0x262b9e8 + 0x000ce> in <filename unknown>:0 
--- End of stack trace from previous location where exception was thrown ---

Relevant Razor code:

 <Column TableItem="Dataset" Title="Zone" Field="@(d => d.Zone)" Sortable="true" Filterable="true" Width="5%" />

Great component, btw. Thanks!

Navigation from Field

Any ideas on a NavLink within a TableItem to navigate on selection of a column/row item?

[Feat] Use Ant Design

Hi.
I would like to know if it is possible to use Ant Blazor Design (https://ant-design-blazor.github.io/en-US/) instead of Bootstrap?

Thank you.

@onclick method per Row

Is there a way at the moment to attach a method when a single row is clicked?

The following snippet works for a normal table selection, but i was wondering if something similar is integrated in BlazorTable?

<table class="table" id="myTable">
   <thead>
      <tr class="header">
         <th>Tag</th>
         <th>Gepland op</th>
         <th>Afdeling</th>
     </tr>
   </thead>
   <tbody>
     @foreach (var item in data)
        {
         <tr @onclick="() => TrClickedAtIndex(item.ID)">
            <td>@item.Tag</td>
            <td>@item.Gepland</td>
            <td>@item.Afdeling</td>
          </tr>
        }
   </tbody>
</table>

private void TrClickedAtIndex(int id)
    {
        selectedItem = data.FirstOrDefault(d => d.ID == id);
        previousSelectedItem = selectedItem;
        dialogIsOpen = true;
    }

Issue when Integrating BlazorTable 1.1.0 blazor component in aspnet core3.1 razor page

I am using BlazorTable component in my core3.1 razor application and I have added below changes

<script src="/_framework/blazor.server.js"></script> BlazorTable.min.js to layout page. MapBlazorHub() and AddServerSideBlazor() to Startup Added component razor page But I am facing below issues :

Information: Normalizing '_blazor' to 'https://localhost:44349/_blazor'. blazor.server.js:1
Information: WebSocket connected to wss://localhost:44349/_blazor?id=9wnA2r08fNJCHJ45sDWimg.
Error: The list of component records is not valid.
Information: Connection disconnected.
Uncaught (in promise) Error: Invocation canceled due to the underlying connection being closed.
at e.connectionClosed (blazor.server.js:1)
at e.connection.onclose (blazor.server.js:1)
at e.stopConnection (blazor.server.js:1)
at e.transport.onclose (blazor.server.js:1)
at e.close (blazor.server.js:1)
at e.stop (blazor.server.js:1)
at e. (blazor.server.js:1)
at blazor.server.js:1
at Object.next (blazor.server.js:1)
at a (blazor.server.js:1)

2. I have column Roles with multiple rows but it is giving error when i tried to loop to get each rolename. public class PersonData { public ICollection Roles { get; set; } }

Adding buttons Column rows

Is it possible to add buttons to rows. I have had a look and tried a few things, maybe I'm missing something.

Column with buttons with click events for that record.

Great job on what you have created its awesome and so powerful.

Question: How do I show the item number (index) ?

In the first column I want to show the item no. For example, first row would would show 1, second row 2 and so on. The last row would obviously show the number of rows in the table.
Even if sorting or filtering, this will be same. First row would show 1, last row would show the number of items in the filtered list.

If I don't use this component, I maybe doing:
@for (i=0; i< filteredList.Count; i++)

{
  <span>i+1</span>
}

Enable template-less columns to simplify markup?

I really like this repo! I was considering writing something like this and it would be pretty similar to what you've done already (though perhaps not as good!).

I see in the code that each column has to have a <Template> to render and in many cases all you do is emit the value, e.g. @context.id - this does make for a lot of boilerplate code that does a default operation which perhaps could be avoided?

Could I suggest that if the Template is null, the code tries to render the value in this manner by default? Optionally it could also have a Format attribute on the column to indicate how the Table should try to render the object, e.g. for a decimal value it might be Format="$#,##0.00" ?

I'll have a play in my fork and see if I can put together a pull request for this. Any suggestions or ideas welcome.

Table from dynamic datasets

I have list of string headers and well behaved list of list of string rows. Is there a way to get this going with this excellent control? Somehow loop through the columns, instead of using a strongly typed dataset? Cheers, Gregor

Table Edit Validation using Class Data Annotation

Hello,

Many thanks for the great data table. The one feature I'd love is Validation using class data annotation. Is there a way to currently implement this? I'm trying using the EditTemplate, but coming up short.

Best

Column CSS?

The roadmap has a checkmark in front of "Column CSS", but I don't see any way to actually use it. Is there a way? If so, how?