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.