aslagle / reactive-table

A reactive table designed for Meteor
https://atmospherejs.com/aslagle/reactive-table
Other
328 stars 137 forks source link

Are the tables supposed to be responsive? #422

Open MMrj9 opened 8 years ago

MMrj9 commented 8 years ago

I would like the tables to be responsive, but i don't know how could i make them so. Btw i'm using materialize. Any help would be appreciated.

aslagle commented 8 years ago

reactive-table has options to set classes on the table, th, tr, and td elements.

I see that materialize has a 'responsive-table' class. I've never used it, but you could try class: 'responsive-table' in your settings and see if it helps.

gustawdaniel commented 6 years ago

Compatibility with table-responsive from bootstrap 3 ensure to have possibility of create div with class .table-responsive before table. We need something like this:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

https://getbootstrap.com/docs/3.3/css/#tables-responsive

But if I type:

<div class="table-responsive">
    {{> reactiveTable settings=settings}}
</div>

then div contains not only table but also .datatable-editable-filter and navigation of table. This is reason of scroll bar at the bottom of table

and in mobile phone it looks even worse.

Is there possibility of put div.table-responsive exactly before table tag allowing .datatable-editable-filter and navigation of table to be out of this?

gustawdaniel commented 6 years ago

Now I am using this hack:

Template.nameOfTemplate.onRendered(function () {
    $( "#idOfTableSetInSettings" ).wrap( "<div class='table-responsive'></div>" );
});

It works great. Docs about wrap function:

http://api.jquery.com/wrap/