Responsive Mode ?

[orykami]

No description provided.

[JangoSteve]

Hi, thanks for the issue request. Could you explain a bit about what you'd like to see in the way of responsiveness? Are you referring to the way dynatable does operations in some way, or more in the layout/display of html tables?

[Oxicode]

👍

[jgoux]

I think responsiveness is CSS specific.
The only thing I could imagine is to hide/show columns by reducing the window's size.
For example you have a user's dynatable with :
# | First name | Last name | Address | Email | Created at | Uploaded at
Then when you are on small screen, some columns (the less important ones) are hidden :
First name | Last name | Email
Then we could imagine by clicking on the row, a popup with all the informations appears.
We could then define a responsive like that :
$('#my-table').dynatable({
features: {
responsive: true
},
responsive: {
//columns: {column's name: max-width, [column's name: max-width]}
columns: {address: 480, created_at: 640, uploaded_at: 640},
popup: '

{{Some template things for displaying the row's data}}

'
}
});
Then you can map a column (by retrieving its index with the name) with a media query on the fly :
"@media all and (max-width: "+responsive.columns.name+"px) {
#my-table thead th:nth-child("+getIndex(responsive.columns.name)+"){
display:none;
}
#my-table tbody td:nth-child("+getIndex(responsive.columns.name)+"){
display:none;
}
}"

Maybe I went too far in my idea, sorry ! :p

[brandondrew]

👍 I like the idea.

Beyond hiding and showing columns, it would be useful to abbreviate some content. Column header titles are a perfect example: when you've got the space use a very clear and unambiguous column title, but when space is tight there could be a variety of shorter versions used, depending on space.

Also cell content could be truncated to the nearest word boundary to x characters, with an ellipsis character added. Mousing over the truncated text should show the full text in a tooltip of some sort.

[brandondrew]

There also could be a hash of abbreviations supported globally throughout a table or the page. For instance, you could make "Number" get abbreviated at "#" in all column titles, instantly shortening multiple column titles in one fell swoop.

[byrnecore]

I also think this is a CSS thing. Though when using a UI like bootstrap of Foundation, they have attended tot his already simply by adding certain classes to the table tag. For instance, check out Zurb Foundations approach - http://zurb.com/playground/responsive-tables

If I could add a class, I would just be using that. :) Seems much simpler to integrate... at least for use with UI's frameworks.

[JangoSteve]

I agree with @byrnecore, almost all of these could be accomplished using CSS entirely. So, for example, if you wanted a column that disappeared on small devices, you could just add a class of e.g. hide-me on all cells for that column:

<table>
  <thead>
    <tr><th>Name</th><th class="hide-me">Hobby</th><th>Favorite Music</th></tr>
  </thead>
  <tbody></tbody>
</table>

And then in your CSS:

@media (max-width: 480px) {
  .hide-me {
    display: none;
  }
}

Then we'd just need a way for that class to get copied to the <td> cells in each row for that column. I'm thinking of maybe creating a configuration like table.copyHeaderClass: true to do this.

Alternately, we could always define our own writers._cellWriter function to render each column's <td> cells with a custom class from the attribute's name:

$('#my-table').dynatable({
  writers: {
    _cellWriter: function(column, record) {
      return $('<td></td>', {
        html: column.attributeWriter(record),
        class: column.id
      });
    }
  }
});

In the function above, we've redefined the writers._cellWriter function dynatable uses to render the cell for each column for each record. The function is passed the column object, where the id property represents the attribute name for that column. So, in our example table above, each row would look like this:

<tr><td class="name">blah</td><td class="hobby">blah</td><td class="favoriteMusic"></td></tr>

So our CSS could just look like this:

@media (max-width: 480px) {
  .hobby {
    display: none;
  }
}

Keeping in mind that we'd want to manually give our <th>Hobby</th> header cell that same class.

Hopefully none of this was too confusing. As with anything, there are about a hundred ways to accomplish these things. I just wanted to get my thoughts out, so I can think through the simplest solution. But note that you can already use the cellWriter strategy above to accomplish everything.