oj-table row grouping and row selection type checkbox

Question

I have below requirement. I only need to use oracle-jet oj-table:

• On page load organization data is loaded with different roles of employees. Need to bind this data to oj-table, with rows grouped on employee role (like manager, HR etc..)
• Row selection should be enabled with checkbox in first column. Single & multiple selection needed.
• Group header row should also have the checkbox, selecting which selects all the employees in that group.

Sample code or examples or any reference links are highly appriciated.

Thanks

Answer 1

There are plenty of example in Oracle JET cookbook on how to bind data to an oj-table.

For checking one/all rows, here is one way to do it:

View:

<oj-table data="[[ dataProvider ]]" columns='[{"headerText": "Check All", "headerTemplate": "headerTpl", "resizable": "enabled", "sortable": "disabled", "template": "checkTpl"}]'>
  <template slot="headerTpl" data-oj-as="cell">
    <input type="checkbox" data-bind="checked: bulkCheckFlag" />
  </template>
  <template slot="allactivechkbox" data-oj-as="cell">
    <input type="checkbox" name="selectedIds" data-bind="attr:{value:cell.row.ID, id:cell.row.ID}" />
  </template>
</οj-table>

Model:

class ViewModel {
  constructor() {
    const self = this;
    this.dataProvider = yourDataProviderSetup();
    this.bulkCheckFlag = ko.observable(false);
    this.bulkCheckFlag.subscribe((newValue) => {
      $("input[name='selectedIds']").prop("checked", newValue);
    }
    this.selectedIds = () => $("input[name='selectedIds']:checked").toArray().map((el) => el.id));
}

If you have a button or something, you can then have a click callback where you can have your selected IDs by const ids = self.selectedIDs();.

Note that there are probably better ways to do this, but, in summary:

• One checkbox for each row, with the same name (selectedIds in the example) and each of them having the ID of the entity represented by that row;
• One checkbox in column header, which has a flag in the ViewModel as Observable<boolean>, subscribe to its value and update the value of all checkboxes with the above name (selectedIds);
• One method to select those checked checkboxes and retrieve their IDs when needed.

EDIT: There is a Cookbook example for (multi)selection, which is waaaaay easier than my hacky approach.