awerlang / angular-responsive-tables Goto Github PK

View Code? Open in Web Editor NEW

71.0 11.0 19.0 302 KB

Make your HTML tables look great on every device

License: MIT License

JavaScript 85.51% CSS 14.49%

angularjs angularjs-directives table css responsive-design html-table mobile mobile-web

angular-responsive-tables's Issues

Make it work with Bootstrap

Bootstrap, specially by means of table class, overwrite some that makes tables break when the directive is applied.

As this directive is a complement to CSS frameworks, they both must play together.

responsive-omit-title doesn't seem to work in v0.4.4

Date picker popup not showing up correctly when screen size is small (on mobile)

Date picker pop up looks very weird when table is narrow (like on mobile devices).
Please see screenshot attached.

Any idea how to solve this issue ?

Thanks

Choose what columns to show/hide according to a given screen resolution

Work with static tables

Should work when table has more than one <tr> element. Most of the time it would be a static table (i.e. no ng-repeat), but it could be anything really.

Do not show empty cells on mobile

Column title runs over next column when cell is empty. Also, it would probably be best to just omit that column.

Support td[colspan]

For instance

<table>
<thead>
  <tr>
    <th>First title</th>
    <th>Second title</th>
    <th>Third title</th>
    <th>Forth title</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td colspan="3">This cell spans for 3 columns</td>
    <td>Forth column</td>
  </tr>
  <tr>
    <td>First column</td>
    <td>Second column</td>
    <td>Third column</td>
    <td>Forth column</td>
  </tr>
</tbody>
</table>

On mobile, the last cell in the first row should be displayed with the title Forth column.

Allow collapse/expand column details

V0.3.0 Error "Controller 'wtResponsiveTable', required by directive 'td', can't be found!"

New version giving this error (not minified version). Check if everything is included. If replacing with older version everything working good.

angular.js:13550 Error: [$compile:ctreq] Controller 'wtResponsiveTable', required by directive 'td', can't be found!

Headercolumn translation within data-title

Currently I'm using "ngTasty" to get a proper table (server side) of my data. Now I need to translate the header columns for mobile devices. For the reponsive part, I use your angular-responsive.

The translation within the "normal" header cols works:

<thead>
                        <th class="mobileview"  ng-repeat="h in header.columns" > {{ h.name | uppercase | translate:translationData }}</th>
                      </thead>

Nothing works, to get the translated column names for smaler devices, i.e.:

<td data-title="'NAME' | translate">

<td data-title="translate['PREIS']">{{ row.Preis | currency }}</td>

My entire table looks like this:

<div tasty-table bind-filters="filters" bind-resource-callback="getResource" bind-init="init">
                    <table wt-responsive-table class="table table-striped table-condensed">
                      <thead>
                        <th class="mobileview"  ng-repeat="h in header.columns" > {{ h.name | uppercase | translate:translationData }}</th>
                      </thead>
                      <!-- <th class="mobileview" ng-repeat="h in header.columns" style="display:none;"> {{h.name}} </th> -->
                      <tbody>
                        <tr ng-repeat="row in rows">
                          <!-- <td>{{ row.ID }}</td> -->
                          <td>
                            <span action-button color="btn-success" itemid="row.ID" type="'recipe'"></span>
                          </td>
                          <td data-title="'NAME' | translate">{{ row.Name }}</td>
                          <td data-title="DosierungMin">{{row.DosierungMin}}%</td>
                          <td data-title="DosierungMax">{{row.DosierungMax}}%</td>
                          <td data-title="Dosierung">
                            <!-- <p ng-if="flavor.DosierungMax > 0"> -->
                              <span ng-if="row.DosierungMax == 0" class="animate-if label label-success">
                                <i class="fa fa-times fa-fw" aria-hidden="true"></i>
                              </span>
                              <span ng-if="row.DosierungMax < 6 && row.DosierungMax > 0" class="animate-if label label-primary">
                                <i class="fa fa-arrow-down fa-fw" aria-hidden="true"></i>
                              </span>
                              <span ng-if="row.DosierungMax >= 6 && row.DosierungMax < 10" class="animate-if label label-warning">
                                <i class="fa fa-arrows-h fa-fw" aria-hidden="true"></i>
                              </span>
                              <span ng-if="row.DosierungMax >= 10" class="animate-if label label-danger">
                                <i class="fa fa-arrow-up fa-fw" aria-hidden="true"></i>
                              </span>
                            <!-- </p> -->
                          </td>
                          <!-- <td>{{ row.DosierungMin  | volumne }}</td> -->
                          <!-- <td>{{ row.DosierungMax }}mg</td> -->
                          <td data-title="Reifezeit">{{ row.Reifezeit }} {{ 'DAYS' | translate:translationData }}</td>
                          <td data-title="Menge">{{ row.Menge  | volumne }}</td>

                          <td data-title="translate['PREIS']">{{ row.Preis | currency }}</td>
                          <td data-title="Preis100ml">{{ row.Preis100ml | currency }}</td>
                          <td data-title="Hersteller">{{ row.Hersteller }}</td>
                          <!-- <td>{{ row.Herstellungsdatum | amUtc | amDateFormat:'L' }}</td> -->

                          <!-- <td>{{ row.Bewertung }}</td> -->
                          <td data-title="Eigenschaften" ng-bind-html="row.Eigenschaften"></td>
                        </tr>
                      </tbody>
                    </table>
                    <div tasty-pagination bind-list-items-per-page="listItemsPerPage"></div>
                  </div>

Screenshots:

Working "unresponsive" on larger screens:

Not working on mobile:

Do you have a clue?

Support Angular 2+

Should this be a monorepo, supporting both Angular 1 and 2+?
How to share the CSS code, given that only the JS code would have different implementations?

Need examples With Huge Export Options For Reference

Able to find huge examples for datatables..However unable to find huge examples for this particular project with huge export options...

May be the examples can be part of the examples folder...Best would be single HTML with huge export options for quick understanding.

Example,

https://github.com/baksoy/datatables

https://datatables.net/extensions/buttons/examples/html5/simple.html

https://datatables.net/extensions/buttons/examples/initialisation/export

https://github.com/hhurz/tableExport.jquery.plugin

https://jsfiddle.net/gr5er1pj/1/

https://codepen.io/GiSmo/pen/pbjzXw

http://plnkr.co/edit/Yz9qYytTkD3UnjrW9J49?p=preview

http://technoscripts.com/export-html-table/

colspan/rowspan in responsive mode

Have a look at this code, in responsive mode (taken from w3schools, example on rowspan):

  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>

What do you think about it? Should the third th be shown also in the second row? Maybe yes, but I'm not so sure.

"Error: th is null" when some TD's are mutually exclusive

A very simple example to reproduce the error ("Error: th is null") in the console:

<!DOCTYPE html>
<html ng-app="test">
    <head>
        <!-- angular -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <!-- angular responsive table -->
        <script src="https://cdn.rawgit.com/awerlang/angular-responsive-tables/master/release/angular-responsive-tables.min.js"></script>
        <link rel="stylesheet" href="https://cdn.rawgit.com/awerlang/angular-responsive-tables/master/release/angular-responsive-tables.min.css">
    </head>
    <body>
        <table data-wt-responsive-table>
            <thead>
                <tr>
                    <th>column</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-ng-if="true">tom</td>
                    <td data-ng-if="false">jerry</td>
                </tr>
            </tbody>
        </table>
        <script>angular.module("test", ['wt.responsive'])</script>
    </body>
</html>

Filippo

Use of getAttributeNode() is deprecated

I keep getting Use of getAttributeNode() is deprecated. Use getAttribute() using Firefox 49.0.2

Choose when it would be best to hide columns or collapse all columns

Long table names overlap in small devices mode

Hi,

I have a table with rather long table names. Now when viewing these on small devices, the header lines break to multiple rows, but the table itself won't increase the row height.

I have created a plunker to show it:
http://plnkr.co/edit/IsRRJEP2yBhRZKiS4yYH

Thanks a lot,
Thomas

Title of first header is repeated for all columns if headers are being used on first column

Allow th with ng-repeat over data from promise/remote

Would be great if you could have dynamic headers with the dynamic content. Dynamic headers are especially useful for user defined content and this currently doesn't work due to timing I assume (th are not yet present when directive compiles...)

Define a header and/or custom template for collapsed columns/row

bower.json auto includes css

This makes it really hard to override the default CSS.
How can one force it to exclude this?

TypeError: tableCtrl.contains is not a function

It seems that last version introduced a runtime failure:

Repro: http://blog.werlangtecnologia.com.br/angular-responsive-tables/examples/

TypeError: tableCtrl.contains is not a function
    at link (http://blog.werlangtecnologia.com.br/angular-responsive-tables/release/angular-responsive-tables.js:93:32)
    at invokeLinkFn (http://blog.werlangtecnologia.com.br/angular-responsive-tables/bower_components/angular/angular.js:8258:9)
    at nodeLinkFn (http://blog.werlangtecnologia.com.br/angular-responsive-tables/bower_components/angular/angular.js:7768:11)
    at compositeLinkFn (http://blog.werlangtecnologia.com.br/angular-responsive-tables/bower_components/angular/angular.js:7117:13)
    at compositeLinkFn (http://blog.werlangtecnologia.com.br/angular-responsive-tables/bower_components/angular/angular.js:7120:13)
    at compositeLinkFn (http://blog.werlangtecnologia.com.br/angular-responsive-tables/bower_components/angular/angular.js:7120:13)
    at nodeLinkFn (http://blog.werlangtecnologia.com.br/angular-responsive-tables/bower_components/angular/angular.js:7763:24)
    at compositeLinkFn (http://blog.werlangtecnologia.com.br/angular-responsive-tables/bower_components/angular/angular.js:7117:13)
    at nodeLinkFn (http://blog.werlangtecnologia.com.br/angular-responsive-tables/bower_components/angular/angular.js:7763:24)
    at compositeLinkFn (http://blog.werlangtecnologia.com.br/angular-responsive-tables/bower_components/angular/angular.js:7117:13)

Version: 0.4.1
Angular: >=1.3.4 <1.4.0
Browsers: Chrome 54, Firefox 49

Column names not showing when setting columns dynamically

Hello,

I made a directive and put the your table in it (a table with 'wt-responsive-table' directive), but I am setting the columns dynamically with ng-repeat on a list of column names. When I size down the screen (to 'responsive mode'), the column names don't appear. Here's part of the code I used:

var table = $('div.table-holder > table');
var thead = $('<thead></thead>');
var tr = $('<tr></tr>');

for(var i in $scope.columnNames)
   tr.append('<th>' + $scope.columnNames[i] + '</th>');

I prepend the thead to the table, afterwards.

wt-responsive-table directive not working if under a container with ng-if

If I have a nested table element in a div which contains ng-if directive the wt-responsive-table will not add the responsive class to the table. You have to add this manually. This happens because the variable that is used in the ng-if changes value in the controller from false to true and the wt-reponsive-table directive has already activated. Is there a solution to this?
<div ng-if=......>
<table wt-responsive-table>
....
</table>
</div>

....

P.S. The problem if you add the responsive class manually is that you will not get the complete functionality from the directive, for example the title of the column will be empty.

awerlang / angular-responsive-tables Goto Github PK

angular-responsive-tables's Issues

Recommend Projects

Recommend Topics

Recommend Org