swimlane / angular-data-table Goto Github PK

I have two table in one screen.
table1 and table2.
scrollHelper have only one instance for both tables.
if I click the page 2 in table 1 it change the table 2 results.

Expressive components is a interesting approach to component design. So rather than have 1 element thats on the page, you have a expressive markup that would represent what you would be composing in the model. For example:

<data-table>
   <data-table-header>
       <data-table-header-col can-resize="true">{{money}}<data-table-header-col>
  </data-table-header>
  <data-table-body>
    <data-table-body-row ng-repeat="row in rows">
        <data-table-body-cell>
            {{row.name}}
        </data-table-body-cell>
    </data-table-body-row>
  </data-table-body>
</data-table>

There are a few challenges when going down this route such as transclusion, scoping, dealing with our complicated layouts and keep the api easy.

Simpler grid project implementing this: https://github.com/daniel-nagy/md-data-table

./release/data-table.min.js mentioned in the readme does not exist.

In addition, the files are named a little bit different too (data-table.js in readme, dataTable.js in folder).

Unable to Resize the Last Column.

unable to see the 'seconds' fully. it always show the 'secon...'.

Can you prefix the sortable attribute to prevent this collision?

templates.html

value - not rendering.

cellRenderer: function(){ return '<div><img width="30" height="30" src="http://thecatapi.com/api/images/get?format=src&type=gif"> <strong>{{value}}</strong></div>';
}

It'd be nice to have an example using angular filters :)

Break the tree, row grouping, and virtual scroll into their own directives/classes for better codez

Demos in http://swimlane.github.io/angular-data-table/ are not working for me.

As far as I know you don't have a double click event, I tried on-row-double-click but it doesn't work.
Is there a plan to include this?
thanks

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt

This is a semantic tag that I don't think should be overridden.

NPM and JSPM already works, but bower is not supported. Is there a special reason for it?

I use bower because not every library uses npm and I don't want to integrate two different package manages for my frontend.

What do you think?

I don't know if this is a bug or not, since this works ok when ng-show is used instead of ng-if, but just in case: When cellRenderer contains something like this, with ng-if:

cellRenderer: function() {
        return '<b ng-if="value">{{value}}</b>';
}

And this appears down in the list so you need to scroll down to see it, then several errors are thrown:
"TypeError: Cannot read property 'insertBefore' of null"

See this codepen. Scroll down to around row 20, "Barry Page", and check the console.

It would be nice if there was no reliance on a separate icons css file. Since the only thing icons are used for at the moment is the sort (that I know of) maybe you could just use pseudo selectors to do the job like so:

.icon-down {
    position: relative;
    left: 10px;
    &:after {
        content: '';
        position: absolute;
        display: block;
        width: 10px;
        height: 1px;
        background: gray;
        transform: rotate(45deg) translateX(-5px);
    }
    &:before {
        content: '';
        position: absolute;
        display: block;
        width: 10px;
        height: 1px;
        background: gray;
        transform: rotate(-45deg) translateX(5px);
    }
}
.icon-up {
    position: relative;
    left: 10px; top: -8px;
    &:after {
        content: '';
        position: absolute;
        display: block;
        width: 10px;
        height: 1px;
        background: gray;
        transform: rotate(-45deg) translateX(-5px);
    }
    &:before {
        content: '';
        position: absolute;
        display: block;
        width: 10px;
        height: 1px;
        background: gray;
        transform: rotate(45deg) translateX(5px);
    }
}

I can submit a PR if you want. Just let me know.

Extend the dropdown component to have have a option for context menu on header columns for easy column pinning / grouping.

For some reason, when I set the options:

$scope.dtOptions = {
      selectable: true,
      multiSelect: true
}

the onSelect callback is fired, however if I disable multi-select and have just:

$scope.dtOptions = {
      selectable: true
}

the `onSelect callback never fires. Is this by design or a bug? To me, it seems like very odd interface.

I need to table without vertical scroll bars. but i have no options disable the vertical scroll bars in table. pagination required without scrollable body.

Created a new branch for vertically scrolling performance. https://github.com/Swimlane/angular-data-table/tree/scroll-perf

I bypassed the digest cycle by removing the watch https://github.com/Swimlane/angular-data-table/blob/scroll-perf/src/components/body/BodyController.js#L30

and directly calling the update from the scroller directive https://github.com/Swimlane/angular-data-table/blob/scroll-perf/src/components/body/ScrollerDirective.js#L29

then instead of moving each row as you scroll like i did here: https://github.com/Swimlane/angular-data-table/blob/scroll-perf/src/components/body/BodyController.js#L312

I only move 1 div that contains all the rows : https://github.com/Swimlane/angular-data-table/blob/scroll-perf/src/components/body/BodyDirective.js#L22 and then here https://github.com/Swimlane/angular-data-table/blob/scroll-perf/src/components/body/ScrollerDirective.js#L30

Its still not perfect as the top row is rendered twice and it scrolls odd and it is a TAD faster but not much. Frustrating since that is totally bypassing digests and reducing the number of watchers by a LOT. The facebook react table is still WAYYY faster ( or appears to be ) as seen in https://facebook.github.io/fixed-data-table/example-object-data.html ... when look at when you scroll, there is never a blank space

They use synthetic scrollbars, Im wondering if they are throttling your scroll velocity so it can always stay in sync?

TODO: Apply this similar concept to #8 but could be tricky since I will need to watch all cells to accomplish the same thing.

When I clone the project and run it locally, the demos/paging.html has links in the bottom-right and they update as I scroll, but clicking the links doesn't change / jump the scroll position. Is this by design? The same is true of the codepen demo, http://codepen.io/marjan-georgiev/pen/vOebGw, with the following additional problems:

• Sometimes the data doesn't load
• Sometimes pagination doesn't trigger on scroll

My main concern is getting virtual pagination working, let me know if this is a code change. Debugging the project locally, I see

<li ng-repeat="pg in pager.pages track by $index" ng-class="{ active: pg.active }" class="ng-scope">
            <a href="" ng-click="pager.selectPage(this, pg.number)" class="ng-binding">17</a>
          </li>

putting a debug statement in PagerController.js at line 60 (selectPage function) it doesn't appeared to be called when I click it.

Need E2E and Unit Tests

If i load data-table.helpers.min.js console says:
Uncaught TypeError: Cannot set property 'DataTable' of undefined

If i load data-table.js console says:
Uncaught ReferenceError: babelHelpers is not defined

When a tree node is expanded / collapse, we have to splice all the rows out of the temp collection in order for the UI to update correctly. https://github.com/Swimlane/angular-data-table/blob/master/src/components/body/body.js#L230

We should optimize this to splice so that it only does what it needs vs a broad stroke.

the jspm and npm installtions both fail one way of another, and getting the zip from github then trying to get gulp working is a nightmare. Really want to try this project, but cant build it.

has any already exist property？

Hey buddy, sorry it's taken so long for me to look at integrating this, but I am now. Your column sorting demo only works for the "Name" column, not the "Gender" or "Country" columns.

http://codepen.io/marjan-georgiev/pen/MwELyv

Also verified the same in demos/sort.html at commit #bb7a1b29c8520a87bf53793f72b74f8d2a83c3f8 when I pulled the project locally.

When you try to update the grouping externally of the grid, it doesn't work.

When using the tooltips in conjunction with the grid, they flicker sometimes and need some TLC.

Need a way if a item is added to the list to resort automatically if you are doing client-side sorting.

We need to change the row and value variables in the child scope of the cell to have a prefix of $ to ensure uniqueness.

When using grouping along with horz scroll the groups lag behind the scroll.

When you expand a child node in the tree grid and then collapse the parent, the child nodes are not removed.

Cant navigate clicking a link inside the rows.
Placing a "A" tag with either href or s-ref leads to the same result.

Also, if you click inside the table, hitting F5 to refresh doesnt work.

It looks like its preventing or something like that.

Hi,

I was just trying to use data-table, by trying to recreate the "Basic" example in the demo. It doesn't work though and it seems like the latest version breaks it. When I update the codepen example with the latest version from GitHub it gives the same kind of errors I'm seeing.

Codepen: http://codepen.io/anon/pen/bdJmzZ

From a chat with @amcdnl a few days back:

Angular has pulled transclude as the last param in a directive compile block, making it so that the place where columns are being stored in element.columns (here) is lost because transclusion pulls this out of the template and then replaces it via a "clone" type action. Since the element is cloned and re-created in the transclusion process, that means the arbitrary data stored in the DOM is lost.

We should consider handling this a different way so that the expressive columns don't break with transcluded parent directives.

This can be easily seen in the demos, this codepen for example: http://codepen.io/marjan-georgiev/pen/oXpMev where the onRowClick callback works fine, but the onSelect callback always returns undefined.

When using a virtual table, you can use the keyboard to navigate up/down the rows. However, when navigating when you hit the bottom of the visible rows, it no longer works.

prop attribute does not work, see this codepen

<dtable options="options" rows="data" class="material">
      <column name="iName" prop="name" width="200"></column>
      <column name="iCompany" prop="company" width="200"></column>
</dtable>

*cellRenderer: function(scope,elm) {
if(scope.row.types === 'SINGLE')
return '{{value}}';
else
return <md-button ng-click="showAccountHolder(this,$event)">{{value}}</md-button>;
}

ng-click - doesn't call the scope function showAccountHolder.

I got this error. Table is not loaded. :(

ReferenceError: define is not defined
https://cdn.rawgit.com/Swimlane/angular-data-table/master/release/data-table.js
Line 9

So I spent a long while today tinkering and integrating the data table. Really like the direction but I'm not sure I might have a showstopper feature need. Is there an undocumented feature that allows me to call parent controller functions? I'm looking at the RowDirective and it looks like you're doing isolate scope and not doing bindToCotnroller. I'm guessing this would be not only a significant refactor, but also a sort of "policy change" from a design direction, so I'm not sure you're interested in going this direction with the project. I have an <md-menu> with a number of contextual menu items for deleting, updating, and renaming the item in the row where the dropdown button is located.

i opened this url in my local mechine http://localhost:9000/demos/paging.html
when i click page 2,3,4... nothing happened. table doesn't take me to particular page.
rows remains show the same data for page 1.

The grid is entirely dom based and as such does not support a11y.
In order for screen readers to correctly read out table content the dom must have the correct role tags on the grid/rows/cells.
Have a look at the W3 standards: http://www.w3.org/TR/wai-aria/

Add support for jumping to a row or column.

Hi,

table not loading when scrollbarV option set to false.

System.import('data-table').then(function(dt){
var module = angular.module('app', [ dt.default.name ]);
module.controller('HomeController', function($scope, $http){
var data;
$scope.options = {
rowHeight: 50,
headerHeight: 50,
footerHeight: 50,
columns: [
{ name: "Name", prop: "name" },
{ name: "Gender", prop: "gender" },
{ name: "Company", prop: "company" }
],
columnMode: 'force',
scrollbarV: false,
paging: {
externalPaging: true
}
};
$scope.paging = function(offset, size){
$http.get('/demos/data/100.json').success(function(d) {
$scope.options.paging.count = d.length;
var set = d.splice(offset, size);
if(!$scope.data){
$scope.data = set;
} else {
// only insert items i don't already have
set.forEach(function(r, i){
var idx = i + (offset * size);
$scope.data[idx] = r;
});
}
console.log('paging!', offset, size)
});
};
});

  });

When you have multiple sorts going using client-side sorting, it doesn't work quite right. Perhaps we should only have 1 sort available.

Would be nice to see whats new with v0.3 (and other new versions in the future).

For one of the columns I have not a value, but an object with some properties, and I would like to use it like this:

{
      name: "Logged In",
      prop: "userinfo",
      width: 200,
      cellRenderer: function() {
        return '{{value.loggedIn}} ';
      }
}

But this gives an error: Error: [jqLite:nosel] http://errors.angularjs.org/1.3.14/jqLite/nosel

This codepen demonstrates the issue.