R data.table demo

[mattdowle]

Draft PR for @lo5 to view.

[lo5]

I don't have R on my machine.

Here's a working Python version:

from h2o_wave import main, app, Q, ui

table = '''
<table id='myTable'>
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
    </tr>
</tfoot>
</table>
'''

script = '''
var t = setInterval(() => {
    if ($().DataTable) {
        $('#myTable').DataTable();
        clearInterval(t);
    }
}, 250);
'''

@app('/demo')
async def serve(q: Q):
    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(
            box='',
            scripts=[
                ui.script(path='https://code.jquery.com/jquery-1.12.4.min.js'),
                ui.script(path='https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js')
            ],
            script=ui.inline_script(
                content=script,
                requires=['jQuery'],
                targets=['myTable']
            )
        )
        q.page['table'] = ui.markup_card(
            box='1 1 12 10',
            title='Table',
            content=table,
        )
        q.client.initialized = True

    await q.page.save()

[mattdowle]

Thanks! Added jQuery and looking better. Now Chrome console output shows :

[lo5]

requires='jQuery',  targets='myTable'

requires and targets need to be arrays/lists.

See:
https://github.com/h2oai/wave/blob/master/r/R/ui.R#L3066-L3079

@ashrith guard_vector() doesn't seem to be working.

[ashrith]

Fix -> #85
@mattdowle please confirm if it works for you. Thanks.

[mattdowle]

Thanks @ashrith and @lo5 -- yes works now and I see the DataTables.net!

[mattdowle]

@lo5 Do I need the setInterval and clearInterval parts - what do they do? Or can I go back to just $('#myTable').DataTable(); here.

var t = setInterval(() => {
  if ($().DataTable) {
    $('#myTable').DataTable();
    clearInterval(t);
  }
}, 250);

[lo5]

Yes, you'll need the entire script, because datatable is a jQuery extension, not a separate module, and that script is the only reliable way to detect if it has been downloaded and available. This is also why we had to add jQuery to your original script.

[mattdowle]

@lo5 @ashrith In 525ee05 I tried adding the CSS to get the table to look like the one on the https://datatables.net homepage; i.e. with the lines, alternate shaded rows, and the arrows on the column headings. But this attempt didn't have any effect; i.e. I see the table but it looks like this:

What did I do wrong?

I see this in Chrome console so I guess CSS should not be passed to ui_script which makes sense.

But then I don't know where to put the CSS file. I looked and searched for arguments and/or function names in h2owave package with CSS but didn't find anything yet.

[lo5]

We don't have an API to add CSS files, but is trivial to implement.
@mturoci - it would be good to add APIs similar to ui.script() and ui.inline_script().