search

MicroDroid / vue-materialize-datatable

A fancy Materialize CSS datatable VueJS component.
https://overcoder.dev/vue-materialize-datatable
MIT License
179 stars 67 forks source link

Make Datatable Responsive #47

Closed TimothyMee closed 4 years ago

TimothyMee commented 4 years ago

The data-table before this commit wasn't responsive, and when the number of columns increase or the screen reduces, data are lost.

This commit fixes that issue, so when the screen reduces a scrollbar is introduced, this stops the issue of losing visuals of the data in the table.

MicroDroid commented 4 years ago

This PR has multiple issues:

  1. overflow-x: scroll causes the scrollbar to be permanently visible, whereas it should be auto so that the scrollbar only shows when needed.
  2. Long data (like descriptions for things) will cause the scrollbar to show even for desktop screens
  3. This should be entirely optional.
cssailing commented 4 years ago

when you are view table on mobile, you can choose to 'scroll', use the table swipe from right or to left, or you can make the table tr { display: inline-block;} or you can make table tr{display: none;} to hidden tr, and make td data-lable show as td's title, and the table swipe up and down

MicroDroid commented 4 years ago

@cssailing That doesn't make sense.