The Component

define(["sitecore"], function (_sc) {
  _sc.Factories.createBaseComponent({
    name: "Buttongroup",
    base: "BlockBase",
    selector: ".sc-button-group",
    attributes: [
    { name: "commands", defaultValue: [] }
    ],
    initialize: function () {
      this._super();         
     },    
  });
});

The Html

@model RenderingModel
@{
var userControl = this.Html.Sitecore().Controls().GetUserControl(this.Model.Rendering);
userControl.Class = “sc-button-group”;
}
<div  @htmlAttributes>
    <div class="btn-group" data-bind="foreach: actionButtonsViewModel.commands">
        <button class="btn" data-bind="text: Title, attr: { class: Style, 'data-type': Category, 'data-itemuri': $root.ItemUri, 'data-command': Value }"></button>
    </div>
</div>

Your Page Code

this.DataTable.on("change:selectedCommands", function () {
   
    var commands = this.DataTable.get("selectedCommands");
    //ID_OF_THE_BUTTONGROUP is the one in showed in ROCKS
    this.ID_OF_THE_BUTTONGROUP.set("commands", commands);
}, this);