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
Related
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' }
]
}
}
});
I am new into SAPUI5 development, and i have problems with data binding in a table. In my other tables it works but this one is strange.
I am opening a value helper dialog, and want to display some data in the table.
My current code is:
//
oTable = this._oValueHelpDialog.getTable();
oTable.setModel(this.getModel());
oTable.setModel(oCol, "columns");
// bind aggregation
// items
// shrhelpSet
// spalten heißen key und value
var oTemplate = new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: "{key}"
}),
new sap.m.Text({
text: "{value}"
})]
});
oTable.bindAggregation("items", "/shrhelpSet", oTemplate);
My console says "Aggregation "items" does not exist in Element sap.ui.table.Table#__table0"
and when i am using a another binding method for example oTable.bindItems() or bindRows() it is saying that the method is undefinded or cannot be found.
i am suprised that i have this problem in the value helper, in my other tables i have no problems with data binding.
This worked for me and solved my problem
var aColumnData = [{
columnId: "Key"
}, {
columnId: "Value"
}];
var aData = [{
Key: "asdf",
Value: "hey"
}, {
Key: "abcd",
Value: "hey2"
}];
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData({
columns: aColumnData,
rows: aData
});
oTable.setModel(oModel2);
oTable.bindColumns("/columns", function(index, context) {
var sColumnId = context.getObject().columnId;
//alert(sColumnId);
return new sap.ui.table.Column({
id : sColumnId,
label: sColumnId,
template: sColumnId
});
});
oTable.bindRows("/rows");
The sap.m.Table has the aggregation "items", but in your case the table is a "sap.ui.table.Table" which uses the aggregation "rows". That is also the reason why the other methods don't work.
"ColumnListItem" won't work neither because the aggregation needs "sap.ui.table.Row".
For databinding, have a look at the example(s) for the grid table.
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
}
If I have a list of (JavaScript) objects in the following form:
var results = [
{'name': 'mary', 'availability' : { 'monday': 'True', 'tuesday': 'False' ... } },
{'name': 'john', 'availability' : { 'monday': 'False', 'tuesday': 'False' ... } },
{'name': 'pete', 'availability' : { 'monday': 'True', 'tuesday': 'True' ... } }
]
how do I display this data in a Webix DataTable, having each of the days in availability as a column?
My configuration object for the DataTable looks like this:
var dtable = webix.ui({
....
view:"datatable",
id: "nameTable",
columns:[
{ id: "name", header:"Name"},
{ id: "availability.monday", header:'Mon'},
{ id: "availability.tuesday", header:'Tue'},
...
],
data:results,
...
});
I have also tried: id: "availability['mon']" which doesn't work or report any error. If I just do : id:"availability", in the browser I see that it shows [object Object] for each row.
I've also tried the autoconfig option but that doesn't render anything (no errors).
I have tried to find examples in the documentation but haven't found any so far. I'm sure this must be possible without having to restructure my incoming data!
There is no native support for complex properties in the Webix DataTable. You can use "template" property of column object to show any property of data object as value of a column, though.
columns:[
{ id: "col1", template:"#availability.monday#"},
Is there a way in Slick.Grid to render all data to an array so it can be exported?
I am able to get the data from my Slick.Grid instance "mygrid.getData().getItems()" but it is just the raw data not the formated data.
Is there a function I can use to iterate though the collection and return the formated data?
As of now I am having to implement my formatters twice.
Example:
UnixToDate: (row, cell, value, columnDef, dataContext) ->
moment.unix(value).format("MMM Do YY")
items: [
{id: 1, activity_at: 915148798 },
{id: 2, activity_at: 999148800 }
]
columns: [
{field: 'id', id: 'id', name: 'Id'},
{field: 'activity_at', id: 'activity_at', name: 'Activity', formatter: UnixToDate}
]
#data = new Slick.Data.DataView()
#grid = new Slick.Grid( $('#table'), #data, columns )
#data.setItems(items)
I am wondering if there is a way to return the data with the formatted values.
I thought #grid.getData().getItems() would do it but it returns the raw data array.
The data returned should look like:
data: [
{id: 1, activity_at: "Dec 31st 98" },
{id: 2, activity_at: "Aug 29th 01" }
]
I would like the end user to be able to filter and arrange the grid and then export the results in csv format, I have all this working except the formatting part.
Ok I wrote a method to do the export (written in coffeescript and using underscore.js). I also had to expose the getFormatter method in slick.grid.js
getFormattedData: (grid) ->
columns = grid.getColumns()
rows = grid.getData().getItems()
_(rows).map (row) ->
h = {}
i = 0
_(columns).each (column) ->
f = grid.getFormatter(row, column)
h[column.id] = f(row, i, row[column.id], column, row)
i += 1
h
add line to slick.grid.js in the // Public API section
"getFormatter": getFormatter,
When you set autoHeight: true the complete grid is rendered and the html could be exported.
http://mleibman.github.com/SlickGrid/examples/example11-autoheight.html
Answer to updated question:
The formatter is only called when a row is rendered/visible, so an array with the formatted data never exists. At the source: https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L1291