From f5e232156ef4226f42cfd777845401b91584248d Mon Sep 17 00:00:00 2001
From: Ivan Josipovic <9521987+IvanJosipovic@users.noreply.github.com>
Date: Tue, 31 Mar 2020 19:59:02 -0700
Subject: [PATCH] Made table responsive

Added Search Bar
---
 .../Pages/GlobalSearch.razor                  |   6 +-
 src/BlazorTable/Components/Table.razor        | 245 +++++++++---------
 src/BlazorTable/Components/Table.razor.cs     |   6 +
 src/BlazorTable/Interfaces/ITable.cs          |   5 +
 4 files changed, 140 insertions(+), 122 deletions(-)

diff --git a/src/BlazorTable.Sample.Shared/Pages/GlobalSearch.razor b/src/BlazorTable.Sample.Shared/Pages/GlobalSearch.razor
index 1e90b5d6..7993b3e6 100644
--- a/src/BlazorTable.Sample.Shared/Pages/GlobalSearch.razor
+++ b/src/BlazorTable.Sample.Shared/Pages/GlobalSearch.razor
@@ -4,9 +4,7 @@
 
 <h1>Global Search</h1>
 
-Search: <input type="text" class="form-controls" value="@Table?.GlobalSearch" @onchange="@(x => Table.GlobalSearch = x.Value.ToString())" />
-
-<Table TableItem="PersonData" Items="data" PageSize="15" ColumnReorder="true" @ref="Table">
+<Table TableItem="PersonData" Items="data" PageSize="15" ColumnReorder="true" ShowSearchBar="true">
     <Column TableItem="PersonData" Title="Id" Field="@(x => x.id)" Sortable="true" Filterable="true" Width="10%" DefaultSortColumn="true" />
     <Column TableItem="PersonData" Title="Full Name" Field="@(x => x.full_name)" Sortable="true" Filterable="true" Width="20%" />
     <Column TableItem="PersonData" Title="Email" Field="@(x => x.email)" Sortable="true" Filterable="true" Width="20%">
@@ -38,8 +36,6 @@ Search: <input type="text" class="form-controls" value="@Table?.GlobalSearch" @o
     [Inject]
     private HttpClient Http { get; set; }
 
-    private ITable<PersonData> Table;
-
     private PersonData[] data;
 
     protected override async Task OnInitializedAsync()
diff --git a/src/BlazorTable/Components/Table.razor b/src/BlazorTable/Components/Table.razor
index 344089e2..1710b3ec 100644
--- a/src/BlazorTable/Components/Table.razor
+++ b/src/BlazorTable/Components/Table.razor
@@ -3,144 +3,155 @@
 
 @if (Columns.Any())
 {
-    <table class="@TableClass" @attributes="UnknownParameters">
-        <thead class="@TableHeadClass">
-            <tr style="cursor: pointer;">
+    <div class="table-responsive">
+        <table class="@TableClass" @attributes="UnknownParameters">
+            @if (ShowSearchBar)
+            {
+                <thead>
+                    <tr>
+                        <th colspan="@Columns.Count"><input type="text" class="form-control form-control-sm float-right" style="width:33%" value="@GlobalSearch" @onchange="@(x => { GlobalSearch = x.Value.ToString(); Update(); })" placeholder="Global Search..." /></th>
+                    </tr>
+                </thead>
+            }
 
-                @if (_detailTemplate != null)
-                {
-                    <th style="width: 1%">
-                    </th>
-                }
-                @foreach (IColumn<TableItem> column in Columns)
-                {
-                    <th style="@(!string.IsNullOrEmpty(column.Width) ? $"width:{column.Width};" : "") user-select: none"
-                        @ondrop="@(() => HandleDrop(column))"
-                        @ondragstart="@(() => HandleDragStart(column))"
-                        ondragover="event.preventDefault();"
-                        draggable="@(ColumnReorder.ToString())"
-                        @key="column"
-                        class="@(column.Class)">
+            <thead class="@TableHeadClass">
+                <tr style="cursor: pointer;">
 
-                        <div @onclick="@(() => column.SortBy())">
-                            <span>@column.Title</span>
+                    @if (_detailTemplate != null)
+                    {
+                        <th style="width: 1%">
+                        </th>
+                    }
+                    @foreach (IColumn<TableItem> column in Columns)
+                    {
+                        <th style="@(!string.IsNullOrEmpty(column.Width) ? $"width:{column.Width};" : "") user-select: none"
+                            @ondrop="@(() => HandleDrop(column))"
+                            @ondragstart="@(() => HandleDragStart(column))"
+                            ondragover="event.preventDefault();"
+                            draggable="@(ColumnReorder.ToString())"
+                            @key="column"
+                            class="@(column.Class)">
 
-                            @if (column.SortColumn)
-                            {
-                                if (column.SortDescending)
-                                {<span>&#11014;</span> }
-                                else
-                                { <span>&#11015;</span>}
-                            }
+                            <div @onclick="@(() => column.SortBy())">
+                                <span>@column.Title</span>
 
-                            @if (column.Filterable)
-                            {
-                                <div class="float-right" @onclick="@((x) => column.ToggleFilter())" @onclick:stopPropagation>
-                                    <a href="javascript:;" @ref="column.FilterRef" style="text-decoration: none"><span style="@(column.Filter == null ? "opacity: 0.2;" : string.Empty)">&#128269;</span></a>
-                                </div>
-                                <CascadingValue Value="column" Name="Column">
-                                    <Popover Reference="@column.FilterRef" IsOpen="@column.FilterOpen" Placement="Placement.Bottom" DismissOnNextClick="false">
-                                        <h3 class="popover-header">Filter</h3>
-                                        <div class="popover-body">
-                                            <FilterManager TableItem="TableItem">
-                                                <StringFilter TableItem="TableItem" />
-                                                <BooleanFilter TableItem="TableItem" />
-                                                <NumberFilter TableItem="TableItem" />
-                                                <DateFilter TableItem="TableItem" />
-                                                <EnumFilter TableItem="TableItem" />
-                                                @if (column.CustomIFilters != null)
-                                                {
-                                                    @column.CustomIFilters(column)
-                                                }
-                                            </FilterManager>
-                                        </div>
-                                    </Popover>
-                                </CascadingValue>
-                            }
-                        </div>
-                    </th>
-                }
-            </tr>
-        </thead>
-        <tbody class="@TableBodyClass">
-            @if (FilteredItems != null)
-            {
-                if (FilteredItems.Any())
-                {
-                    int i = 0;
+                                @if (column.SortColumn)
+                                {
+                                    if (column.SortDescending)
+                                    {<span>&#11014;</span> }
+                                    else
+                                    { <span>&#11015;</span>}
+                                }
 
-                    foreach (TableItem item in FilteredItems)
+                                @if (column.Filterable)
+                                {
+                                    <div class="float-right" @onclick="@((x) => column.ToggleFilter())" @onclick:stopPropagation>
+                                        <a href="javascript:;" @ref="column.FilterRef" style="text-decoration: none"><span style="@(column.Filter == null ? "opacity: 0.2;" : string.Empty)">&#128269;</span></a>
+                                    </div>
+                                    <CascadingValue Value="column" Name="Column">
+                                        <Popover Reference="@column.FilterRef" IsOpen="@column.FilterOpen" Placement="Placement.Bottom" DismissOnNextClick="false">
+                                            <h3 class="popover-header">Filter</h3>
+                                            <div class="popover-body">
+                                                <FilterManager TableItem="TableItem">
+                                                    <StringFilter TableItem="TableItem" />
+                                                    <BooleanFilter TableItem="TableItem" />
+                                                    <NumberFilter TableItem="TableItem" />
+                                                    <DateFilter TableItem="TableItem" />
+                                                    <EnumFilter TableItem="TableItem" />
+                                                    @if (column.CustomIFilters != null)
+                                                    {
+                                                        @column.CustomIFilters(column)
+                                                    }
+                                                </FilterManager>
+                                            </div>
+                                        </Popover>
+                                    </CascadingValue>
+                                }
+                            </div>
+                        </th>
+                    }
+                </tr>
+            </thead>
+            <tbody class="@TableBodyClass">
+                @if (FilteredItems != null)
+                {
+                    if (FilteredItems.Any())
                     {
-                        <tr @key="item" class="@RowClass(item) @(SelectedItems.Contains(item) ? "table-active" : "")" @onclick="(() => OnRowClickHandler(item))">
+                        int i = 0;
 
-                            @{int locali = i;}
-                            @if (_detailTemplate != null)
-                            {
-                                <td>
-                                    <a href="javascript:;" style="text-decoration: none" @onclick="@(() => { detailsViewOpen[locali] = !detailsViewOpen[locali]; StateHasChanged(); })" title="Details View"><span style="">@(detailsViewOpen[locali] ? "➖" : "➕")</span></a>
-                                </td>
-                            }
+                        foreach (TableItem item in FilteredItems)
+                        {
+                            <tr @key="item" class="@RowClass(item) @(SelectedItems.Contains(item) ? "table-active" : "")" @onclick="(() => OnRowClickHandler(item))">
 
-                            @foreach (IColumn<TableItem> column in Columns)
-                            {
-                                <td @key="column"
-                                    style="@(column.Align > 0 ? $"text-align: {column.Align};" : "")"
-                                    class="@(column.Class)">
+                                @{int locali = i;}
+                                @if (_detailTemplate != null)
+                                {
+                                    <td>
+                                        <a href="javascript:;" style="text-decoration: none" @onclick="@(() => { detailsViewOpen[locali] = !detailsViewOpen[locali]; StateHasChanged(); })" title="Details View"><span style="">@(detailsViewOpen[locali] ? "➖" : "➕")</span></a>
+                                    </td>
+                                }
 
-                                    @if (IsEditMode && column.EditTemplate != null)                                        
-                                        @column.EditTemplate(item)
-                                    else
-                                        if (column.Template == null)
-                                            @column.Render(item)
-                                        else
-                                            @column.Template(item)
-                                </td>
-                            }
-                        </tr>
+                                @foreach (IColumn<TableItem> column in Columns)
+                                {
+                                    <td @key="column"
+                                        style="@(column.Align > 0 ? $"text-align: {column.Align};" : "")"
+                                        class="@(column.Class)">
 
-                        if (_detailTemplate != null && detailsViewOpen[locali])
-                        {
-                            <tr>
-                                <td></td>
-                                <td colspan="@(Columns.Count)">
-                                    @_detailTemplate(item)
-                                </td>
+                                        @if (IsEditMode && column.EditTemplate != null)
+                                            @column.EditTemplate(item)
+                                            else
+                                               if (column.Template == null)
+                                                @column.Render(item)
+                                                else
+                                                    @column.Template(item)
+                                    </td>
+                                }
                             </tr>
-                        }
 
-                        { i = locali + 1; }
+                            if (_detailTemplate != null && detailsViewOpen[locali])
+                            {
+                                <tr>
+                                    <td></td>
+                                    <td colspan="@(Columns.Count)">
+                                        @_detailTemplate(item)
+                                    </td>
+                                </tr>
+                            }
+
+                            { i = locali + 1; }
+                        }
+                    }
+                    else if (_emptyDataTemplate != null)
+                    {
+                        <tr>
+                            <td colspan="@Columns.Count">
+                                @_emptyDataTemplate
+                            </td>
+                        </tr>
                     }
                 }
-                else if (_emptyDataTemplate != null)
+                else
                 {
                     <tr>
                         <td colspan="@Columns.Count">
-                            @_emptyDataTemplate
+                            @if (_loadingDataTemplate != null)
+                            {
+                                @_loadingDataTemplate
+                            }
+                            else
+                            {
+                                <div class="text-center">
+                                    Loading...
+                                </div>
+                            }
                         </td>
                     </tr>
                 }
-            }
-            else
-            {
-                <tr>
-                    <td colspan="@Columns.Count">
-                        @if (_loadingDataTemplate != null)
-                        {
-                            @_loadingDataTemplate
-                        }
-                        else
-                        {
-                            <div class="text-center">
-                                Loading...
-                            </div>
-                        }
-                    </td>
-                </tr>
-            }
-        </tbody>
-    </table>
+            </tbody>
+        </table>
+    </div>
 }
 
 <CascadingValue Value="(ITable<TableItem>)this" Name="Table">
     @ChildContent
-</CascadingValue>
\ No newline at end of file
+</CascadingValue>
diff --git a/src/BlazorTable/Components/Table.razor.cs b/src/BlazorTable/Components/Table.razor.cs
index c2f16a28..18131af1 100644
--- a/src/BlazorTable/Components/Table.razor.cs
+++ b/src/BlazorTable/Components/Table.razor.cs
@@ -450,5 +450,11 @@ private Expression<Func<TableItem, bool>> GlobalSearchQuery(string value)
 
             return expression;
         }
+
+        /// <summary>
+        /// Shows Search Bar above the table
+        /// </summary>
+        [Parameter]
+        public bool ShowSearchBar { get; set; }
     }
 }
diff --git a/src/BlazorTable/Interfaces/ITable.cs b/src/BlazorTable/Interfaces/ITable.cs
index df6aa317..d2634276 100644
--- a/src/BlazorTable/Interfaces/ITable.cs
+++ b/src/BlazorTable/Interfaces/ITable.cs
@@ -107,5 +107,10 @@ public interface ITable
         /// Search all columns for the specified string, supports spaces as a delimiter
         /// </summary>
         string GlobalSearch { get; set; }
+
+        /// <summary>
+        /// Shows Search Bar above the table
+        /// </summary>
+        bool ShowSearchBar { get; set; }
     }
 }
\ No newline at end of file