I was able to get what I was after.
For anyone who might be interested, the steps are below:
1.Create field of type “Query” which will hold the query and the HTML structure of the data.
2.Use CB Replacement to place the field into the article which also loads the module for the activity.
1. Query Field
Parameters -> Query
The query is simple and no joins are needed as I originally thought:
Code:
SELECT user_id FROM #__comprofiler_plugin_activity_following WHERE asset = "ASSET"
Parameters -> Display
Output
Multiple Rows
Header
<table class="table table-sm table-responsive table-borderless following-list ">
<tbody>
<tr>
Row
<td>
[cb:userfield field="avatar" user="[column_user_id]" reason="list" /]
</td>
Footer
</tr>
</tbody>
</table>
The table is using the Bootstrap class .table-responsive for its horizontal scrolling feature. The Bootstrap classes of .table-sm and .table-borderless are styling choices. The class .following-list is custom CSS
Code:
table.following-list .cbImgAvatar{ max-width:45px;}
2. Article
The field is included in the Article as
Code:
<div class="cb_template">[cb:userfield field="FIELD_NAME" /]</div>
The class .cb_template on the DIV applies, among other things, display:block; to the table.