Table Suggestion

[ghost]

Hello, I'm fairly new to Github, but i wanted to share some code... I was making my own components until i found this which is by far better then mine. However i wanted to share some code i made for datatables, perhaps you guys could make some use of it. (i'm sorry if this isn't the proper way to do it)

Essentially what i did was made it in such a way that it allowed Lists to be given as a parameter, together with a header and a format for the table items. (also to avoid the current @foreach bug in .razor formatting.)

Component:

@typeparam TableItem

<table class="table table-sm table-responsive table-striped">
  <thead>
    <tr>
      @GridHeader
      <th>
        @if (CanAdd)
        {
          <button type="button" class="btn-sm btn-outline-primary" @onclick="@OnAdd"><i class="oi oi-plus" /></button>
        }
      </th>
    </tr>
  </thead>
  <tbody>
    @foreach (var item in Items)
    {
      <tr>@TableRow(item)</tr>
    }
  </tbody>
</table>

@code{
  [Parameter] public RenderFragment TableHeader { get; set; }
  [Parameter] public RenderFragment<TableItem> TableRow{ get; set; }
  [Parameter] public IEnumerable<TableItem> Items { get; set; }
  [Parameter] public EventCallback OnAdd { get; set; }
  [Parameter] public bool CanAdd { get; set; }
}

Usage:

<Table Items="PhoneNumbers" CanAdd="true" OnAdd="@AddPhonenumber">
  <TableHeader>
    <th scope="col">Phone</th>
    <th scope="col">Description</th>
  </TableHeader>
  <TableRow Context="phoneNumber">
    <td><InputText class="form-control" @bind-Value="@phoneNumber.Number"></InputText></td>
    <td><InputText class="form-control" @bind-Value="@phoneNumber.Description"></InputText></td>
  </TableRow>
</Table>

I hope this is useful, Thanks for your time.

[chanan]

Love it! We always wanted to add a better grid using Blazor Templates feature, but our concern is to make a really good grid we would have to add a lot of stuff like filtering and sorting (then of course client side and server side) - which is way bigger than we want to tackle. We could add a simpler one that just display what is given (like your example) - but we weren't sure if a lot of people would find it yourself. But I guess you prove that it would be useful!

I will try to add something soonish - No promises on timing as I have other OSS projects that need some love as well.

I know you said you are new, but if you want to learn how to submit a PR and want to submit code to the project, we are always happy to get contributions :)

[ghost]

I will watch a couple guides on how to add a push request and such. I'm looking forward to the update (no rush). Thanks again ^.^

[chucker]

our concern is to make a really good grid we would have to add a lot of stuff like filtering and sorting

Yup. Data grids (or table views) can be anything from a simple table to something that has filtering, sorting, grouping (stacking), aggregating (summing, …), data import, data export (Excel, PDF), … — just look at any data grid component and you'll be astonished how much can be built in. They're often the very largest component. This project should probably only contain a fairly simple one.

This one seems to fit that bill.

A few pedantic (but I think impotant) remarks:

• we should either call this a Table, or a Data Grid. We shouldn't use just Grid, because that's ambiguous particularly in the context of Bootstrap, where Grid means something quite different (namely, a layouting mechanism). So, for example, GridHeader should be DataGridHeader, or maybe TableHeader.

• Likewise, I'm not happy with the word "TableItem". I think that's supposed to be the data model for a row? So maybe GridRowModel? How do its cells/columns work, though? Is there code that iterates the properties?

(Also, I think @chanan wants all classes prefixed BS? But we probably want a separate sub-namespace for some of this?)

[ghost]

Yeah, i wrote this as a Table, it was code i had already written before i found BlazorStrap... it's not meant to be copied 1:1, i just figured i would share one of the components i had made and perhaps the community could do something with it. It seemed more fitting as a datagrid from WPF since originally it did had the functionality to add, edit, remove cells/rows Perhaps in the weekend i'll have a moment to make it fit more with blazorstrap.

we should either call this a Table, or a Data Grid.

• Renamed the Header and Row for consistancy sake.

How do its cells/columns work, though? Is there code that iterates the properties?

• It uses the "GridRow" tag to assign in which "td" tag a property should be. From there it uses the foreach statement to iterate over it within the "tbody" tag. I could also make a default behavoir where if "GridRow" is null it will get the properties of the type then iterate over that to populate the fields...

[MasterSkriptor]

A lot of the components in BlazorStrap would benefit from the capability of making them ItemTemplates with the use of a typeparam. The issue is naming conventions would need to be something agreed on by @chanan and whoever else is involved in the planning.

As in this example, what would you call an itemized template of BSTable? My first thought would be to not change the name at all, but this causes issues in terms of backwards compatibility, and changes the entire design layout. I quickly discovered this while playing with the carousel, and opted to update the CarouselItem rather than the main component.

You could call it, for example, BSDataTable.

The next question is whether you add this to BlazorStrap itself, or make another nuget package called BlazorStrap.DataTemplates that inherits from BlazorStrap. This may be a better option, as it keeps BlazorStrap as a project much cleaner.

In any case, I have a bit of experience with DataTemplates, and would not mind putting some work in to make them once some of these questions are answered. It might be a good idea to make this an entirely separate project though. @chanan let me know what you think.

[chanan]

@jbomhold3 recently added a project to the main solution for extensions. We can follow the same concept and add DataTemplates as well.

We would love your help if you want to create it and submit the PR!

[chanan]

Going to close this issue. The DS Table is there and I plan to release it to Nuget in the next day or 2.

Thamks @MasterSkriptor !

[MasterSkriptor]

Your very welcome