feat(module: table): add OnRowClick to Table component (#785)

* Add OnRowClick to Table component

This adds a new Parameter to the Table component called OnRowClick that will trigger whenever a user clicks on any of the rows in the table.

* Updated Table row click to pass RowData

* refactor: clean code

Co-authored-by: ElderJames <shunjiey@hotmail.com>
This commit is contained in:
Alex Friedman 2020-11-18 04:10:35 -05:00 committed by GitHub
parent 4f4b8ea767
commit 456c0819ba
3 changed files with 40 additions and 23 deletions

View File

@ -157,23 +157,24 @@ RenderFragment<(Table<TItem> table, IEnumerable<TItem> showItems, int level)> bo
currentRowData.CacheKey = cacheKey;
currentRowData.Level = level;
currentRowData.HasChildren = hasChildren;
<CascadingValue Value="table.ColumnContext">
<CascadingValue Value="currentRowData" Name="RowData">
<tr data-row-id="@rowIndex" class="ant-table-row ant-table-row-level-@level @(currentRowData.Selected ? "ant-table-row-selected" : "")">
@if (table.ExpandTemplate != null)
{
<td class="ant-table-cell ant-table-row-expand-icon-cell">
@if (table.RowExpandable(currentRowData))
{
<button type="button" @attributes="@(new Dictionary<string,object>() { {"onclick",_callbackFactory.Create(table,()=>table.ToggleExpandRow(currentRowData)) } })"
class="ant-table-row-expand-icon @(currentRowData.Expanded?"ant-table-row-expand-icon-expanded":"ant-table-row-expand-icon-collapsed")" aria-label=""></button>
}
</td>
}
@table.ChildContent(data)
</tr>
</CascadingValue>
<CascadingValue Value="table.ColumnContext">
<CascadingValue Value="currentRowData" Name="RowData">
<tr @attributes="@(new Dictionary<string,object> { {"onclick", _callbackFactory.Create(table, () => table.RowClick(currentRowData)) } })"
data-row-id="@rowIndex" class="ant-table-row ant-table-row-level-@level @(currentRowData.Selected ? "ant-table-row-selected" : "")">
@if (table.ExpandTemplate != null)
{
<td class="ant-table-cell ant-table-row-expand-icon-cell">
@if (table.RowExpandable(currentRowData))
{
<button type="button" @attributes="@(new Dictionary<string,object>() { {"onclick",_callbackFactory.Create(table,() => ToggleExpandRow(currentRowData)) } })"
class="ant-table-row-expand-icon @(currentRowData.Expanded?"ant-table-row-expand-icon-expanded":"ant-table-row-expand-icon-collapsed")" aria-label=""></button>
}
</td>
}
@table.ChildContent(data)
</tr>
</CascadingValue>
</CascadingValue>
@if (hasChildren && currentRowData.Expanded)
{
@table.body((table, table.TreeChildren(data), level + 1));

View File

@ -49,6 +49,9 @@ namespace AntDesign
[Parameter]
public EventCallback<QueryModel<TItem>> OnChange { get; set; }
[Parameter]
public EventCallback<RowData<TItem>> OnRowClick { get; set; }
[Parameter]
public bool Loading { get; set; }
@ -229,7 +232,6 @@ namespace AntDesign
}
}
protected override void OnParametersSet()
{
base.OnParametersSet();
@ -248,9 +250,17 @@ namespace AntDesign
protected override bool ShouldRender() => this._shouldRender;
private void ToggleExpandRow(RowData<TItem> rowData)
private static void ToggleExpandRow(RowData<TItem> rowData)
{
rowData.Expanded = !rowData.Expanded;
}
private void RowClick(RowData<TItem> item)
{
if (OnRowClick.HasDelegate)
{
OnRowClick.InvokeAsync(item);
}
}
}
}

View File

@ -1,6 +1,7 @@
@using System.ComponentModel
@using AntDesign.TableModels
<Table DataSource="@data">
<Table TItem="Data" DataSource="@data" OnRowClick="OnRowClick">
<Column @bind-Field="@context.Name">
<a>@context.Name</a>
</Column>
@ -30,9 +31,9 @@
</Table>
@code{
Data[] data =
Data[] data = new Data[]
{
new Data()
new()
{
Key = "1",
Name = "John Brown",
@ -40,7 +41,7 @@
Address = "New York No. 1 Lake Park",
Tags = new[] {"nice", "developer"}
},
new Data()
new()
{
Key = "2",
Name = "Jim Green",
@ -48,7 +49,7 @@
Address = "London No. 1 Lake Park",
Tags = new[] { "loser"}
},
new Data()
new()
{
Key = "3",
Name = "Joe Black",
@ -75,4 +76,9 @@
[DisplayName("Tags")]
public string[] Tags { get; set; }
}
void OnRowClick(RowData<Data> row)
{
Console.WriteLine($"row {row.Data.Key} was clicked");
}
}