Custom visual Table using Javascript : Filter Row, Column and single Cell

Hi everybody,

I am writing here hoping to find someone who can help me to find the correct way to develop a custom table visual for power BI.

At this moment I am able to take data from capabilites file using:

 var table: DataViewTable = options.dataViews[0].table

            var columns: DataViewMetadataColumn[] = table.columns;

            var rows: DataViewTableRow[] = table.rows;

After that I manipulate it and I put them in a html table(thead and tbody).

var columnsName = [];

            for (var i = 0; i < columns.length; i++) {
                columnsName[i] = columns[i].displayName
            }

            var stringToBuild = "["

            for (var i = 0; i < rows.length; i++) {
                stringToBuild += "{"
                for (var j = 0; j < columnsName.length; j++) {

                    var colName = columnsName[j]
                    var newLocal = rows[i][j];
                    stringToBuild += "\"" + colName + "\": " + "\"" + newLocal + "\""

                    if (j != columnsName.length - 1) {
                        stringToBuild += ","
                    }
                }
                stringToBuild += "}"
                if (i != rows.length - 1) {
                    stringToBuild += ","
                }
            }
            stringToBuild += "]"
 var valueToRepresent =JSON.parse(stringToBuild)

this.thead.append('tr')
                .selectAll('th')
                .data(columnsName)
                .enter()
                .append("th")
                .text(function (columnsName) { return columnsName; })
                .style("background-color", this.settings.headerFormatting.color)
                .style("font-size", this.settings.headerFormatting.size + "px")
                .style("color",this.settings.headerFormatting.colorFont);

            // create a row for each object in the data
            this.tbody.selectAll('tr')
                .data(valueToRepresent)
                .enter()
                .append('tr');
          
            // create a cell in each row for each column
            var cells = this.tbody.selectAll('tr').selectAll('td')
                .data(function (row) {
                    return columnsName.map(function (column) {
                        return { column: column, value: row[column] };
                    });
                })
                .enter()
                .append('td')
                .text(function (d) { return d.value; });

This way  it works fine.
Now my next goal is to add the possibility to chick on row and filter all the visuals based on that row.

Anyone can help me?