I have an array of item objects for the table. e.g.:
[{ name: 'Sam', age: 24 }]
I want to set custom field names like instead of column to be named as age, I want it to display column name as Id instead of age. So, basically how can I set custom column names?
Here is their documentation if that helps: https://coreui.io/vue/docs/components/table.html
Check fields props.
Using the fields attribute of the <CDataTable>, you can specify an array of fields to use for column names. That can be an array of strings or objects. When using the object syntax, you can specify various properties, such as the label of the column. See in the <CDataTable> docs:
key (required)(String) - define column name equal to item key.
label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting
This lets you name the column differently from the key. Here is an example where the table has column keys "id" and "name", but the label is "ID" and "Surname":
<div id="app">
<cdatatable
:items="items"
:fields="fields"
>
</cdatatable>
</div>
new Vue({
el: "#app",
data() {
return {
items: [
{ id: 1, name: 'Mary' },
{ id: 2, name: 'Bob' }
],
fields: [ // Array of column object data
{ key: 'id', label: 'ID' },
{ key: 'name', label: 'Surname' }
]
}
}
});
Related
I would like to use different schemas for an array of objects based on a value.
items: [{
name: "a"
...
},
{
name: "b"
...
}]
How can I validate the item with name: "a" with another schema than item with name: "b" based on the value of name?
Can anyone tell me, how to create a tree view inside the drop down. The drop down values will be getting from rest api call as json as follows. And subchild may contains one more level of child as well.
I have to do auto suggestion here to perform the filter from parent as well as the child level too.
VehicleList = [
{
parent: "audi",
child: [{
type: 'G-audiA',
subchild: [{
id: 1,
name: 'type audi A1'
}, {
id: 2,
name: 'type audi A2'
}]
}, {
type: 'G-audiB',
subchild: [{
id: 1,
name: 'type audi B1'
}, {
id: 2,
name: 'type audi B2'
}]
}]
}, {
parent: "bmw",
child: [{
type: 'G-bmwA',
subchild: [{
id: 1,
name: 'type bmw A1'
}, {
id: 2,
name: 'type bmw A2'
}]
}, {
type: 'G-bmwB',
subchild: [{
id: 1,
name: 'type bmw B1'
}, {
id: 2,
name: 'type bmw B2'
}]
}]
}]
Anyone help will be appreciated!!!
Based on the first example from the Angular Material Tree docs I managed to build up a drop-down with a tree structure inside like so:
The trick for displaying the tree is to add a disabled/empty option. I used it as a label. The tree is taken from their examples so I did not modify it at all, you can modify the node structure to match your own.
In order to display the selected items in the label of the drop-down, you can create a method that will return the selected items a string as their SelectionModel object has the selected property which would return all selected nodes.
/** The selection for checklist */
checklistSelection = new SelectionModel<TodoItemFlatNode>(
true /* multiple */
);
And in order to get the selected items from the tree:
return this.checklistSelection.selected.map(s => s.item).join(",");
For the filtering part I think you can look over this answer.
Hope this is helpful!
Stackblitz
Edit: If you select a child the parent gets selected too and added in the SelectionModel even if all its children are not selected. If you don't want this behaviour comment on the function descendantsPartiallySelected. This will not check the checkbox and so parents will not be added in SelectionModel unless all children are selected
I'm creating a Table component in React. I'm looking in some Table components and they create an array of columns to pass to the Table. In this columns array you can put a function to render a component inside each row in tbody.
First Example of Ant Design (https://ant.design/components/table/):
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name'
}, {
title: 'Action',
key: 'action',
render: (text, record) => ( <<-- THIS FUNCTION. IT RECEIVES THE ROW RECORD AS A PARAM TOO
<span>
This gonna be rendered in each row of the table
</span>
),
}];
I'm trying to figure it out a good way to create this mechanism to render a column in each row of the table body.
Is there a good example to study? I'm trying to read the source code in some components in NPM.. but it's hard to understand.
Thanks devs!
This is a basic example, Usually your Table component would receive 2 props:
Data sorce, can be array of objects
The column configuration, which contains the attribute name, the trick of the function is just the functional programming of javascript, you can receive render function so user can implement their own render logic.
eg.
const dataSource = [
{
id: 1,
name: 'aaaa',
age: 10
},
{
id: 2,
name: 'bbbb',
age: 11
},
{
id: 3,
name: 'ccc',
age: 12
},
];
so a column config would be like:
const column = [
{
key: 'id',
label: 'ID'
},
{
key: 'name',
label: 'Student Name'
},
{
key: 'age',
label: 'Student Age',
render: (text, record) => {
return `** ${text} **`; // just for decoration
}
}
]
The table component would iterate around the datasource and with the help of column configuration to build the Table tags.
however you can always add something like this inside of your loop logic:
if (typeof render === 'function') {
cell = <td key={key}>{render(item[key], item)}</td> // call the render function and pass the data
} else {
cell = <td key={key}>{item[key]}</td> // else will just render it
}
In my Webix datatable one column fetches the data from the DataColletion. The problem is in the column's filtering: seems like it works with the original data (that contains the ID) and ignores the value of the data collection. How can I change this behavior and filter datatable by the collection's value?
Data:
var mycollection = new webix.DataCollection({
data:[{
id: '12',
value: 'CollItem 1'
}]
});
var mydata = [{
id: 1,
name: 'Item 1',
troublesomeColumn: '12' // id of the CollItem 1
}];
Config:
columns:[{
id: 'troublesomeColumn',
collection: mycollection,
header:{
content:"textFilter"
}
}],
data:mydata
Code snippet. Thanks in advance.
Filters work with the dataset, not with the templates or values from the linked collections. Therefore, you need to create a custom filtering rule as described in the Webix Docs, i.e. define the needed pattern in the compareproperty of the filter:
{
content:"textFilter",
compare:function(value, filter, obj){
var colValue = mycollection.getItem(value).value;
toFilter = colValue.toString().toLowerCase();
filter = filter.toString().toLowerCase();
return toFilter.indexOf(filter) !== -1;
}
}
Updated snippet
When using a sap.m.Input, I can configure the element like in the example below, in order to set the type of the item that is binded to the Input:
<mvc:View>
<Input value="{
path:'/company/revenue',
type: 'sap.ui.model.type.Float'
}"/>
</mvc:View>
this way, when I retrieve the property inside '/company/revenue', its type will always be a JavaScript number. However, is it possible to apply a similar "typing" to a sap.m.Select? The property "selectedKey" inside a sap.m.Select always returns a JavaScript String, but I would like to type it to a number like I did with the sap.m.Input above. How can I do it? Thanks in advance!
Yes, you can do that. It's just a normal property binding.
But beware that the keys of your items inside the Select control have to be compatible with the Float type. The sap.ui.model.type.Float without any formatOptions generates locale dependant strings. So in germany f.e. you get a , as decimal separator and in the US it would be ..
A good idea would be to use a aggregation binding to create the items and configure the keys of the items with the same type as the selectedKey property of your select. See example on JSbin.
<Select
selectedKey="{path:'/selectedKey',type: 'sap.ui.model.type.Float'}"
items="{/items}">
<c:ListItem
key="{path: 'key', type: 'sap.ui.model.type.Float'}"
text="{text}"/>
</Select>
onInit:function(){
var data = {
selectedKey:3,
items: [
{ key: -1, text: "Item 1" },
{ key: 1.234, text: "Item 2" },
{ key: 3, text: "Item 3" },
{ key: 1234, text: "Item 4" }
]
};
var model = new sap.ui.model.json.JSONModel(data);
this.getView().setModel(model);
}