Framework 7 + electron + nodejs


this is my framework7 data table
I want to select the row with checkbox, and when I press the check button which beside the “add” button
i can get the row data.

after I finish reading the https://framework7.io/docs/checkbox.html & https://framework7.io/docs/data-table.html#data-table-app-methods ( Alternate header with row actions )

I only get some idea : app.dataTable.get(el)

and don’t what to do next.
can someone guide me to finish this?

I am a rookie in both javascript and framework7

$$(document).on(‘page:init’, ‘.page[data-name=“home_employee”]’, function(e) {
console.log(‘this is page employee’);

var sqlget = 'SELECT * FROM `customers`';
//this is select the data from customers [emplotee_table (home_employee.html)]
connection.query(sqlget, function(error, results, fields) {

    for (i = 0; i < results.length; i++) {

        $$(document).find('#employee_table').append($$('<tr> ' +
            '<td class="checkbox-cell">' +
            '<label class="checkbox">' +
            '<input type="checkbox">' +
            '<i class="icon-checkbox"></i>' +
            '</label>' +
            '</td>' +
            ' <td style="font-family:Poppins-Medium;" class="label-cell"> ' + results[i].name + ' </td>' +
            ' <td class="numeric-cell">' + results[i].telephone + '</td> ' +
            ' <td class="numeric-cell">' + results[i].order_num + '</td> ' +
            '<td class="numeric-cell">' + results[i].juice1_num + '</td> ' +
            '<td class="numeric-cell">' + results[i].juice2_num + '</td> ' +
            '<td class="numeric-cell">' + results[i].juice3_num + '</td> ' +
            '<td class="numeric-cell">' + results[i].date + '</td> ' +
            '</tr>'));
    }
});

});

and here my html

    <div class="block block-strong">
        <div class="data-table search-content-list data-table-init card">
            <div class="card-header">
                <!-- Table links/actions -->
                <div class="data-table-links">
                    <!--ADD products button is at here-->

                    <a class="link dynamic-popup icon-only" id="products_add">
                        <i style="height: 25px;width:25px;" class="icon material-icons md-only">add_round</i>
                    </a>

                    <!--out products button is at here-->
                    <a class="link icon-only" id="product_out">
                        <i style="height: 25px;width:25px;" class="icon material-icons md-only">check_round</i>
                    </a>

                </div>


            </div>
            <div style="overflow-y:scroll; height:320px;" class="card-content">
                <table>
                    <thead>
                        <tr>
                            <th class="checkbox-cell">
                                <label class="checkbox">
                                        <input type="checkbox">
                                        <i class="icon-checkbox"></i>
                                      </label>
                            </th>

                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="label-cell">Customer Name</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Customer Numbers</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Orders Numbers</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Juice 1</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Juice2</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Juice 3</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="employee_table">
                        <!--this is data from data_process.js-->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

and after i

console.log(app.dataTable.get());

I get this in my console

  t {eventsParents: Array(1), eventsListeners: {…}, params: {…}, $el: Dom7, el: div.data-table.search-content-list.data-table-init.card, …}
    $el: Dom7 {0: div.data-table.search-content-list.data-table-init.card, length: 1}
    $headerEl: Dom7 {length: 0}
    $headerSelectedEl: Dom7 {length: 0}
    attachEvents: ƒ ()
    collapsible: false
    detachEvents: ƒ ()
    el: div.data-table.search-content-list.data-table-init.card
    eventsListeners: {}
    eventsParents: [t]
    params: {el: div.data-table.search-content-list.data-table-init.card}
    __proto__: t