diff --git a/src/BlazorTable.Sample.Shared/NavMenu.razor b/src/BlazorTable.Sample.Shared/NavMenu.razor index 11e34bfc..2a81e847 100644 --- a/src/BlazorTable.Sample.Shared/NavMenu.razor +++ b/src/BlazorTable.Sample.Shared/NavMenu.razor @@ -67,6 +67,11 @@ Dynamic Columns +
  • + + Column Visibility + +
    • diff --git a/src/BlazorTable.Sample.Shared/Pages/ToggleColumnVisibility.razor b/src/BlazorTable.Sample.Shared/Pages/ToggleColumnVisibility.razor new file mode 100644 index 00000000..3d7bf8ff --- /dev/null +++ b/src/BlazorTable.Sample.Shared/Pages/ToggleColumnVisibility.razor @@ -0,0 +1,69 @@ +@page "/ToggleColumnVisibility" +@inject HttpClient Http +@using BlazorTable +@using System.ComponentModel + +

    Toggle Column Visibility

    + + + + + + + + + + + + + + + + + + + + +
    + +@code +{ + [Inject] + private HttpClient httpClient { get; set; } + + private PersonData[] data; + + private bool showSearchBar; + + protected override async Task OnInitializedAsync() + { + data = await httpClient.GetFromJsonAsync("sample-data/MOCK_DATA.json"); + } + + public class PersonData + { + public int? id { get; set; } + public string full_name { get; set; } + public string email { get; set; } + public bool? paid { get; set; } + public decimal? price { get; set; } + public CreditCard? cc_type { get; set; } + public DateTime? created_date { get; set; } + } + + public enum CreditCard + { + none = 0, + [Description("MasterCard")] + MasterCard = 1, + Visa = 2 + } +} diff --git a/src/BlazorTable/Components/Column.razor.cs b/src/BlazorTable/Components/Column.razor.cs index 847bc112..bd0257f6 100644 --- a/src/BlazorTable/Components/Column.razor.cs +++ b/src/BlazorTable/Components/Column.razor.cs @@ -48,6 +48,12 @@ public string Title [Parameter] public bool Filterable { get; set; } + /// + /// Column can be hidden + /// + [Parameter] + public bool Hideable { get; set; } + /// /// Normal Item Template /// @@ -142,6 +148,22 @@ public string Title /// public bool FilterOpen { get; private set; } + private bool _visible = true; + + /// + /// Column visibility + /// True if current column is visible else false. + /// + public bool Visible + { + get { return _visible; } + set + { + _visible = value; + Table.Refresh(); + } + } + /// /// Column Data Type /// diff --git a/src/BlazorTable/Components/Table.razor b/src/BlazorTable/Components/Table.razor index c65cfc25..2f41cff8 100644 --- a/src/BlazorTable/Components/Table.razor +++ b/src/BlazorTable/Components/Table.razor @@ -8,11 +8,51 @@
    - @if (ShowSearchBar) + @if (ShowSearchBar || Columns.Exists(column => !column.Visible)) { - + + } + @if (Columns.Exists(column => !column.Visible)) + { +
    + + + +
    + +

    Column Visibility

    +
    +
    + @if (ShowSearchBar) + { +
    + @foreach (IColumn column in Columns.Where(column => !column.Visible)) + { + + + + + } +
    + @(column.Title) + +
    + +
    +
    + +
    + + } + } @@ -25,56 +65,68 @@ } @foreach (IColumn column in Columns) { - + @if (column.Visible) + { + -
    - @column.Title +
    + @column.Title - @if (column.SortColumn) - { - if (column.SortDescending) - { } - else - { } - } + @if (column.SortColumn) + { + if (column.SortDescending) + { } + else + { } + } - @if (column.Filterable) - { -
    - -
    + + + +
    + + +

    Filter

    +
    + + + + + + + @if (column.CustomIFilters != null) + { + @column.CustomIFilters(column) + } + +
    +     +     + } + + @if (column.Hideable) + { +
    + - -
    - - -

    Filter

    -
    - - - - - - - @if (column.CustomIFilters != null) - { - @column.CustomIFilters(column) - } - -
    -     -     - } -
    - +
    + } +
    + + } } @@ -107,17 +159,20 @@ @foreach (IColumn column in Columns) { - + @if (column.Visible) + { + - @if (IsEditMode && column.EditTemplate != null) - @column.EditTemplate(item) - else if (column.Template == null) - @column.Render(item) - else - @column.Template(item) - + @if (IsEditMode && column.EditTemplate != null) + @column.EditTemplate(item) + else if (column.Template == null) + @column.Render(item) + else + @column.Template(item) + + } } diff --git a/src/BlazorTable/Components/Table.razor.cs b/src/BlazorTable/Components/Table.razor.cs index 824518c3..59470ee3 100644 --- a/src/BlazorTable/Components/Table.razor.cs +++ b/src/BlazorTable/Components/Table.razor.cs @@ -81,6 +81,16 @@ public partial class Table : ITable [Inject] private ILogger> Logger { get; set; } + /// + /// Ref to visibility menu icon for popover display + /// + private ElementReference VisibilityMenuIconRef { get; set; } + + /// + /// True if visibility menu is open otherwise false + /// + private bool VisibilityMenuOpen { get; set; } + /// /// Collection of filtered items /// diff --git a/src/BlazorTable/Interfaces/IColumn.cs b/src/BlazorTable/Interfaces/IColumn.cs index 6ab96d87..8943ebd2 100644 --- a/src/BlazorTable/Interfaces/IColumn.cs +++ b/src/BlazorTable/Interfaces/IColumn.cs @@ -35,6 +35,11 @@ public interface IColumn /// bool Filterable { get; set; } + /// + /// Column can be hidden + /// + bool Hideable { get; set; } + /// /// Set the format for values if no template /// @@ -45,6 +50,12 @@ public interface IColumn /// bool FilterOpen { get; } + /// + /// Column visibility + /// True if current column is visible else false. + /// + bool Visible { get; set; } + /// /// Opens/Closes the Filter Panel ///