Component: Table with Actions
This components display a whole table with defined columns and can hold varios actions.
Popup settings fields can be set up a input or as dropdown.
properties: [{
name: 'state',
title: 'State (Pending, Accepted):',
value: '',
editable: true,
type: Dropdown,
optionsAsync: () => {
return [{
id: 'Pending',
name: 'Pending'
},
{
id: 'Accepted',
name: 'Accepted'
}];
}
}]
Add Controller Action logic
By default the component is calling the endpoint property to fetch all datas. Important is that the properties for the columns have to match the returns json properties.
Required actions:
- GetAll
- Count
// set in constructor
this.tableProperties = {
endpoint: '/friendship',
title: 'Friendships',
newLinkTitle: '',
list: {
gridColsClass: 'grid-cols-4',
properties: [{
name: 'userAId',
heading: 'User A Id'
},
{
name: 'userBId',
heading: 'User B Id'
},
{
name: 'state',
heading: 'State'
}]
},
popup: {
title: 'Add a new friendship',
tagline: '',
createButtonTitle: 'Create',
properties: [{
name: 'userAId',
value: ''
}]
},
settings: {
actionTitle: 'Open friendship',
title: 'Friendship: ',
property: 'state',
properties: [{
name: 'state',
title: 'State:',
value: '',
editable: true
}]
},
actions: [{
icon: (<svg>...</svg>),
title: 'Delete',
onClick: (friendship) => this.delete(friendship)
}]
}
...
//in render() method
<TableWithActions tableProperties={this.tableProperties}></TableWithActions>
public IActionResult GetAll()
{
var friendships = _friendshipRepository.GetAll();
return Json(friendships);
}
public IActionResult Count()
{
return Json(_friendshipRepository.Count());
}