Hello Sir, I am developing a extension for table.I have little problem in custom properties with the table. I have given a custom property to my table but it is not working. please give me solution for this problem.Here is my code
Here is my Template.html file
<div qv-extension style="height: 100%; position: relative; overflow: auto;">
<table>
<thead>
<tr>
<th ng-repeat="head in table.headers track by $index" qva-activate="head.orderBy()">{{head.qFallbackTitle}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in table.rows track by $index">
<td id="data" ng-repeat="cell in row.cells track by $index" class="selectable" ng-class="{'selected':cell.selected,'numeric':cell.qNum}" qva-activate="cell.select($event)">{{cell.qText}}{{layout.myColor}}</td>
</tr>
</tbody>
</table>
<button ng-if="table.rowCount>table.rows.length" qva-activate="table.getMoreData()" class="lui-button more">More...</button>
</div>
Below is my table.js file
define( ["qlik","jquery", "text!./style.css", "text!./template.html"], function (qlik, $, cssContent, template ) {'use strict';
$("<style>").html(cssContent).appendTo("head");
var palette = [
"#b0afae",
"#7b7a78",
"#545352",
"#4477aa",
"#7db8da",
"#b6d7ea",
"#46c646",
"#f93f17",
"#ffcf02",
"#276e27",
"#ffffff",
"#000000"
];
return {
template: template,
initialProperties : {
qHyperCubeDef : {
qDimensions : [],
qMeasures : [],
qInitialDataFetch : [{
qWidth : 10,
qHeight : 50
}]
}
},
definition : {
type : "items",
component : "accordion",
items : {
dimensions : {
uses : "dimensions",
min : 1
},
measures : {
uses : "measures",
min : 0
},
sorting : {
uses : "sorting"
},
settings : {
uses : "settings",
items : {
initFetchRows : {
ref : "qHyperCubeDef.qInitialDataFetch.0.qHeight",
label : "Initial fetch rows",
type : "number",
defaultValue : 50
}
}
},
settings: {
uses: "settings",
items: {
MyColorPicker: {
label:"My color-picker",
component: "color-picker",
ref: "myColor",
type: "integer",
defaultValue: 3
},
}
},
customstylingtable: {
label: 'Table Styling & Settings',
items: {
tableoddcolor: {
type: "string",
label: "Total Odd color",
ref: "tableoddcolor",
defaultValue: "#ff",
expression: "optional"
},
tableevencolor: {
type: "string",
label: "Total Even color",
ref: "tableevencolor",
defaultValue: "#f2f2f2",
expression: "optional"
},
}
},
}
},
support : {
snapshot: true,
export: true,
exportData : true
},
paint: function () {
if ( !this.$scope.table ) {
this.$scope.table = qlik.table( this );
}
return qlik.Promise.resolve();
},
};
} );
And here is my style.css file
.qv-object-table div.qv-object-content-container {
overflow: auto;
}
.qv-object-table td,
.qv-object-table th {
border-top: 0px solid #fff;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
cursor: default;
font-size: 12px;
}
.qv-object-table td.numeric {
text-align: right;
}
.qv-object-table button {
width: 100%;
}
