search

daniel-nagy / md-data-table

Material Design Data Table for Angular Material
MIT License
1.9k stars 520 forks source link

DataTables Responsive issue #346

Open projectmanagementsystem15 opened 8 years ago

projectmanagementsystem15 commented 8 years ago

How to implement on angular material + DataTables responsive design with plus icon. Like URL : http://l-lin.github.io/angular-datatables/#/withResponsive

daniel-nagy commented 8 years ago

Are you trying to add collapsable rows? Just put a second row with an ngShow directive. I believe something like this should work,

<tr md-row ng-repeat-start="item in items">
  <td md-cell>
    <md-button class="md-icon-button" ng-click="showMore = ! showMore">
      <md-icon>add_circle</md-icon>
    </md-button>
  </td>
<tr md-row ng-repeat-end ng-show="showMore">
  <td></td>
</tr>
projectmanagementsystem15 commented 8 years ago

Can you share complete example

daniel-nagy commented 8 years ago

This should get you started http://codepen.io/anon/pen/PNOZjg?editors=1010

projectmanagementsystem15 commented 8 years ago

Thanks you for replay.

But we expect responsive design like : https://datatables.net/

when we reduce browser size base on horizontal to hide a filed same time show plus icon

responsive-1

Please check it.

Thanks, Yogesh Paghdal

wmichaelfeltman commented 8 years ago

Yes, that should be relatively easy for you to implement based on the techniques I outlined.

daniel-nagy commented 8 years ago

You can use media queries to hide or show columns or other elements. You can use Angular Material's hide and show directives as well. Just be sure to hide corresponding cells in both the header and the body. For example, say you have 4 columns and you want to hide the 3rd column on small screens

<table md-table>
  <thead md-head>
    <tr md-row>
      <th md-column></th>
      <th md-column></th>
      <th md-column hide-xs hide-ms show-gt-sm></th>
      <th md-column></th>
    </tr>
  </thead>
  <tbody md-body>
    <tr md-row>
      <td md-cell></td>
      <td md-cel></td>
      <td md-cel hide-xs hide-ms show-gt-sm></td>
      <td md-cel></td>
    </tr>
  </tbody>
</table>
projectmanagementsystem15 commented 8 years ago

Great. but how can you check horizontal scroll base add "" Can you share example

wmichaelfeltman commented 8 years ago

https://material.angularjs.org/latest/layout/options

projectmanagementsystem15 commented 8 years ago

good, if we have multiple table one table 3 Filed and second table 10 filed and third table 6 filed base on we can not use to like "https://material.angularjs.org/latest/layout/options"

If you try to implement then you bettor understand of issue.