ant-design-blazor/site/AntDesign.Docs/Demos/Components/Table/demo/EditCell.razor
James Yeung 0c13eb7198 docs(module: table): add editable cell/row demo (#1152)
* feat(module: table): add editable cell demo

* add editable row de
2021-02-22 11:29:56 +08:00

91 lines
2.4 KiB
C#

<div>
<Button OnClick="addRow" Type="primary" Style="margin-bottom:16px">
Add a row
</Button>
<Table DataSource="listOfData" RowClassName="@(_=>"editable-row")" Bordered>
<Column Width="30%" DataIndex="@nameof(context.Name)" TData="string">
@if (editId == context.Id)
{
<Input Type="text" @bind-Value="context.Name" OnBlur="stopEdit" AutoFocus />
}
else
{
<div class="editable-cell-value-wrap" style="padding-right:24px" @onclick="()=>startEdit(context.Id)">
@context.Name
</div>
}
</Column>
<Column DataIndex="@nameof(context.Age)" TData="string"></Column>
<Column DataIndex="@nameof(context.Address)" TData="string"></Column>
<ActionColumn Title="Action">
<Popconfirm Title="Sure to delete?"
OnConfirm="()=> deleteRow(context.Id)"
OkText="Yes"
CancelText="No">
<a>Delete</a>
</Popconfirm>
</ActionColumn>
</Table>
</div>
<style>
.editable-cell {
position: relative;
}
.editable-cell-value-wrap {
padding: 5px 12px;
cursor: pointer;
}
.editable-row:hover .editable-cell-value-wrap {
padding: 4px 11px;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
[data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
border: 1px solid #434343;
}
</style>
@using System.Text.Json;
@code{
int i = 0;
string editId;
record ItemData(string Id, string Age, string Address)
{
public string Name { get; set; }
};
ItemData[] listOfData = { };
void addRow()
{
listOfData = listOfData.Append(new($"{i}", "32", $"London, Park Lane no. {i}") { Name = $"Edward King {i}" });
i++;
}
void deleteRow(string id)
{
listOfData = listOfData.Where(d => d.Id != id).ToArray();
}
void startEdit(string id)
{
editId = id;
}
void stopEdit()
{
var editedData = listOfData.FirstOrDefault(x => x.Id == editId);
Console.WriteLine(JsonSerializer.Serialize(editedData));
editId = null;
}
protected override void OnInitialized()
{
addRow();
addRow();
}
}