Custom Visuals Table control with selection

[bibble235]

Hi,

Very new to all this so please be gentle.

I want to have a table control which allows the selection of a row so that dataselected is fired.

I have look at the tutorial for barchart and, although not a table, it does implement this in the fashion I need. I therefore tried to adapt the GridNode to implement the same code in the barchart.

I have run into a few problems.

1/ The barchart implements visualTransform but does not use table for the dataViewMappings. How do I implement this for a table?

2/ How do I implement host.createSelectionIdBuilder()

Thanks

[v-chuncz-msft]

@bibble235,

Based on my research, you may start with table template to implement the API.

[bibble235]

Hi,

Not used templates before. How do you used this. I have copied the files to a new project and built but I do not see any data only the headers for the table. This is because the model is never populated.

I dd look for template and power bi but it only gave me information on the depreciated repository.

Thanks,

[v-chuncz-msft]

@bibble235,

Just like creating a new R Powered Custom Visual, use -t table.

pbiviz new sampleTableVisual -t table

As for the error message you mentioned above, check https://github.com/Microsoft/PowerBI-visuals/issues/136.

[bibble235]

Thanks useful stuff about the templates

For data which is very simple

The data mappings are

    "dataViewMappings": [{
        "table": {
                "rows": {
                    "for": { "in": "Values" },
                    "dataReductionAlgorithm": { "top": { "count": 30000000 } }
                },
                "rowCount": { "preferred": { "min": 1 } }
            }
    }],

What I want to achieve is a sortable table with a ISelectionId but there does not seem to be any way to create a selection builder as it does not seem to want to take a table as an argument and seems to only support categorical mappings which I do not use.

let mySelectionId = host.createSelectionIdBuilder()
	.withCategory(myCategory, myCounter)
        .createSelectionId()

The gridNode comes close to what I want and I can select a row attribute but the control is all in javascript as there is no SeclectionId

[v-chuncz-msft]

@bibble235,

That's why I introduced the table template.

[bibble235]

This is not resolved. Using the example below

I cannot create a report which looks like the above using the template table suggested. Here is what I see.

Which you can see does not meet my needs. It could be that I am misusing the template but I have done nothing but build it.

I have tried also to

a) Try and raise a custom event to mimick the barChart selection manager

b) Build a table using the DataViewMappings table e.g.

{
	"dataRoles": [{
		"displayName": "Column1",
		"name": "Column1",
		"kind": "GroupingOrMeasure"
	},
	{
		"displayName": "Column2",
		"name": "Column2",
		"kind": "GroupingOrMeasure"
	}],
    "dataViewMappings": [{
        "table": {
			"rows": {
				"select": [
					{
						"for": 
						{ 
							"in": "Column1" 
						}
					},
					{
						"for": 
						{ 
							"in": "Column2" 
						}
					},
					{
						"bind": 
						{
							"to": "Column2"
						}
					}
				]
			}
		}
    }]
}

The table builds and displays successfully but does not raise the custom event when an item is selected. The click is fired as I can see this when debugging. i,e, the debugger stops on the debugger statement.

            let bars = this.tBody.selectAll('tr').data(tableViewModel.dataPoints);
			
            let selectionManager = this.selectionManager;

            bars.enter();
			
            bars.on('click', function(d) {
                selectionManager.select(d.selectionId).then((ids: ISelectionId[]) => {
					console.log(d.selectionId);
					debugger;
                });

                (<Event>d3.event).stopPropagation();
            });
			
            bars.exit()
               .remove();
			

However the dataSelected event which I see fired when an item is selected.

Hopefully this all makes sense

Iain

[v-chuncz-msft]

@bibble235,

Instead, you may use try...catch statement for troubleshooting.

[bibble235]

Thanks for taking the time.

I will look at this, using selection manager with table does seeem a popular subject.

I have tried to compile the grid control at the latest api and it fails with the RangeError checkExoression which is googleable. Tried latest typescript with no joy