Skip to content
This repository has been archived by the owner on Jul 10, 2024. It is now read-only.

Commit

Permalink
Made table responsive
Browse files Browse the repository at this point in the history 
Added Search Bar
  • Loading branch information
@IvanJosipovic
IvanJosipovic authored Apr 1, 2020
1 parent d3516d9 commit f5e2321
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 122 deletions.
6 changes: 1 addition & 5 deletions src/BlazorTable.Sample.Shared/Pages/GlobalSearch.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%">
Expand Down Expand Up @@ -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()
Expand Down
245 changes: 128 additions & 117 deletions src/BlazorTable/Components/Table.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</CascadingValue>
6 changes: 6 additions & 0 deletions src/BlazorTable/Components/Table.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
}
}
5 changes: 5 additions & 0 deletions src/BlazorTable/Interfaces/ITable.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
}
}

0 comments on commit f5e2321

Please sign in to comment.