tympanix / angular-table-resize Goto Github PK

do you mean resize column width? seems that the demo provided cannot resize column width

Not sure if something is wrong my setup, or this is a bug, but the only way I have been able to get the resize handles to render when using ng-repeat, is to include ng-if on the th's. Have tried variations using rz-col, but no luck.

Here is an example (remove the ng-if from th to see the issue): https://plnkr.co/edit/IerxPg4uUGtr46tUK9Uo?p=preview

Hi,

(something easy to fix)

usually all bower components have ID that follows the naming convention, that is lowercase and without spaces.

Unfortunately an the angular-table-resize declares
"jQuery": "^3.0.0"

could you please change it to lower case:

"jquery": "~3.1.0",

it creates problems with automated builds due to inconsistent directory creation.

Thanks

You have a problem when application try to use $compileProvider.debugInfoEnabled(false);
We always disable this in production for a significant performance boost.

For example function saveColumnSizes() use angular.element(column).scope() which dont work when we set to false debugInfoEnabled.

I did bower install and can see that angular-table-resize folder in download location.

The package.json mentions index.js as the value of main, but i could not find it in the folder hierarchy.

Finally, i am not able to inject the 'ngTableResize' module into my application.

Has anybody found this issue?

Thanks!

Like that. When I resize column, the border style is bad.
The strange that it will be occur in the Chrome on macOS (Macbook Pro 13" Retina screen). It doesn't appear with external monitor. and doesn't appear on iMac Retina screen. It is appear on Macbook Pro 13" build-in monitor only....

If you have the device you can have a try with the following link.

jsfiddle

Nice library very useful - thanks!

However it would be great if handled changes to the table. I have a table that uses ng-repeat to generate its columns so they will change on updates to my model and I want to the table resizer to update when this happens accordingly.

It could maybe do this by observing changes to number of headers in resizeable directive?

function watchTableChanges(table, attr, scope) {
        scope.$watch(
            function () { return $(table).find('th').length; },
            function () {
                cleanUpAll(table);
                initialiseAll(table, attr, scope);
            });
  }

Was this your thinking behind "bind" scope attribute. I don't think this is doing anything at present.

I cannot get my controller to recognise the module: rzTable, whether I reference resize-table-directive in my view html with a script tag: <script src="angular-table-resize.js"></script> or writing the module name in square brackets in the controller: angular.module('myApplication', ['rzTable'])
I get the angular error page of import module not recognised

I've downloaded the folder angular-table-resize and it is in the node_modules folder of my angularJS app.
Should I move it to another folder in my app ?

I've tried to follow the instructions : #### Example:

<table rz-table id="myTable">
  <thead>
    <th ng-repeat="col in columns" rz-col="col"></th>
  </thead>
  ...
</table>

but the rz-table tag is not recognised.

Do I need an @import statement somewhere ?

I run
bower install angular-table-resize
but it doesn't add the css and js dependencies to index.html

Most of the libraries's set the dependency of jQuery with lowercase: (jquery). But in this project, it use jQuery. That cause a problem, that when I run bower install, it will think jQuery is different with jquery, so it just install it, and unfortunately, in OSX, the folder name is incase-sensitive. So the jquery is overwritten by jQuery.

Then when you run bower list, it will complain jquery is not installed. If you run npm install again, the jquery will install jQuery, then jQuery will be displayed as not install. That will be a dead loop.

So, please change it to lower case. It will help me out. Thanks.

I have a column hidden with ng-if when col.location = false

when col.location is true I can see the location column but I can't resize it.

Can you provide the same features for Angular 2+ Version ?

There is nothing out there on Google to properly explain how to use this from the node_modules folder in an angularJS app

I've tried var tableResize = require('./node_modules/angular-table-resize/scripts/resize-table-directive');

Says angular cant' be found.
I've tried (function (){
angular.module('myApp').controller('plannedController', plannedController), ['rzTable'];
in my controller.js file.

Once a table is resized its hard to control some aspects of it.
It would be very nice to:

• Have detection of methods when resizing starts and ends. So callbacks like: onResizeStarted, onResizeInProgress, onResizeEnded
• Ability to remove the storage information
• Ability to explicitly do not save storage information at all. (even if all id's are present)
• Ability to reset the table size to original

As inspiration, one can look at the angular-seletize component. (https://github.com/opsolve/angular-selectize). In that component they pass an object with the desired options and callbacks.

The callbacks of selectize looks like this:
https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md

As inspiration for events one could look at https://github.com/Reklino/angular-resizable
it applies to containers, not tables, but its interesting to see the type of information that they show in case of an event. I find the selectize API nicer.

Shouldn't it be resizable?

It doesn't resize for me (in chrome) at least.

I'm not sure, but this looks wrong:

    function getResizer(scope, attr) {
        try {
            var mode = attr.mode ? scope.mode : 'BasicResizer';
            var Resizer = $injector.get(mode)
            return Resizer;
        } catch (e) {
            console.error("The resizer " + scope.mode + " was not found");
            return null;
        }
    }

Shouldn't it be:

    function getResizer(scope, attr) {
        try {
            var mode = attr.mode ? attr.mode : 'BasicResizer';
            var Resizer = $injector.get(mode)
            return Resizer;
        } catch (e) {
            console.error("The resizer " + attr.mode + " was not found");
            return null;
        }
    }

I think is better set value default resizeMode

My working directory: ...node_modules/angular-table-resize
I used npm install angular-table-resize, but your instructions do not apply or fit in with the existing architecture of my app.

This is part of my table: