addepar / ember-table Goto Github PK

Hi,

not everyone wants to run node.js. Would it be possible to upload a pre-minified version somewhere?

Thanks,
Martin

In handlebars.js:2159

What I need to do to run examples?

If you are using content that is backed by SortableMixin, you see unpredictable results when modifying the data in the table. To get around this, I'm having my tableController update whenever it notices a data change on the data source (to redraw the table), but it would be better if the table widget could understand if the indices in view have been modified.

Does anybody have a bootstrap 3 css file that I can use with ember-table ? Thanks

Hi there,

normal HTML-Tables support and paste from browser to excel for example. Ember Table does not.

Is there a way to support it without switching to a real html table?
What was the reason for not taking tables in this project?

Best,

Tobias

Hi,

I have a table which represents a kind of news feed, I would like to push to the top of the table instead of always appending to it's button.

I tried using unshiftObject instead of pushObject into my array, this caused a weird affect of having one row duplicated for all the entries (I guess when the array changed ember-table just looks at the last element of the array to see what has been added - and in my case it's always the same).

So is there a way to achieve what I'm trying? or at the very least at least enable auto-scroll?

It seems unlikely that I'd want my app to send down 1 million records at a time. Can this be used in such a way where it loads data in batches via AJAX when necessary?

I have a customized TableRow template that I want to use. I tried to subclass Ember.Table.TableRow to point to the new template and set tableRowClass on my TableController to point to my TableRow subclass. I can confirm that it's using the TableRow subclass, but for whatever reason, the templateName override is ignored.

I need to create lot of dummy views (it only has templateName) to customize the table cell markup. It would be great, if the Ember.Table.TableCell's templateName is computed from column definition

// Ember.Table.TableCell
templateName: function() {
  return this.get('column').get('templateName');
}.property('column')

there seems to be issues with the million rows example in firefox.

Hi,

I would like to know how, if possible, I can make my table sortable.

Thank you

It would be a great if you could support adding a div underneath the selected row for the SelectionMixin. I've attached an image to give you an idea of what that might be used for.

I have created a shim for ember table ember-table-shim which is a temporary place for it. This allows developers to install just the needed files through bower to get up and running instead of the entire project.

What should probably happen, is it should become part of the Components organization.

For now, it is easy enough to build and copy the files into the shim and tag the release.

However, this should become automated using something like grunt-release-component.

Then, it is simply a matter of changing ownership of the shim repo.

I've been implementing filtering, sorting, grouping, and column selection for a project. How interested are you in any / all of these features being a part of the core of ember-table?

I'd be happy to refactor my code into a pull request if you are interested in it, but I don't want to waste effort if you don't think these features should be in the core library.

In terms of code, it would be about ~200 lines of coffescript, ~50 lines of handlebars and ~50 lines of css altogether for all of the features, so it's quite lightweight.

Please let me know your thoughts.

Hi, I'm desperately trying to implement a way to remove table rows with ember-table, but without updating the whole list. For example if I have a lot of data and I've scrolled to somewhere, I want to be able to remove a row and to stay on the position I am. Can you help me, I'm asking here, because I don't know where to ask...

Probably needs to be replaced with feature detection I guess. This prevents Ember-table from working with the latest version of jquery.

They mimic OS X hidden untill you start scrolling behavior, but unlike osx there is no click and drag functionality. With such a large table it's hard to navigate without this feature.

The use case is the following. There are several instances of ember-table in different divs. However, only one of them is visible, all the rest of divs have property display:none.
When the resize happens, the visible instance of ember-table behaves perfectly. However, when navigating to other divs (changing their display property to block), the table is not visible.
It happens when table instance listens to window.resize event, given the display:none, width and height of its container is 0.
Before:

After:

I have treid to take one example for ember-table (simple)

addepar.github.com/ember-table/

Uncaught Error: assertion failed: Cannot call get with 'hasHeader' on an undefined object.

btw i`m using the latest ember js 1.0.0 rc2

actually I had put it under another view... and which was not under the applicaiton controller...

all Fixed.

Hi there,

I just modified the data.js with my own data in the Table with tree view example. I don't now why but the table just works in Safari.

Looking at the console in Chrome or Firefox, I get some error messages:

DEBUG: ------------------------------- ember.js:394
DEBUG: Ember.VERSION : 1.0.0 ember.js:394
DEBUG: Handlebars.VERSION : 1.0.0 ember.js:394
DEBUG: jQuery.VERSION : 1.9.1 ember.js:394
DEBUG: ------------------------------- ember.js:394
Uncaught TypeError: Cannot call method 'toPercent' of undefined tree_table.js:59
GET http://fabiangarcia.net/ember/lib/jquery.min.map 404 (Not Found) fabiangarcia.net/:55

You can find the modified example here

When viewing the 1000000 row example (http://addepar.github.com/ember-table/) in Chrome 23.0.1271.97 (windows 8), changing the browser's zoom level to 125% causes the table to not render correctly (nothing is shown in the table, only the table header is visible).

Hello,
Im quite new to git and Ember table, so I hope I dont do too much wrong on how to post this issue.
I looked into the guidelines and already werent able to make a jsFiddle.

But, well here's the problem.

If you visit the excample page at http://addepar.github.com/ember-table/ with a firefox and "smooth scrolling" activated, the scrolling gets extremely slow and just moves by 1px.

When you disable "smooth scrolling" under "tools > options > advanced > general" everything works fine. But since FF 13 the option is enabled by default. The problem seems to relate to the event object provided by mozilla.

I was only able to do a very dirty and quick fix, by adding the following lines to the views.coffee

Ember.Table.BodyTableContainer =
Ember.Table.TableContainer.extend Ember.MouseWheelHandlerMixin,
Ember.ScrollHandlerMixin,
  templateName:   'body-container'
  classNames:     ['table-container', 'body-container']
  height:         Ember.computed.alias 'controller._bodyHeight'
  width:          Ember.computed.alias 'controller._width'
  scrollTop:      Ember.computed.alias 'controller._tableScrollTop'
  scrollLeft:     Ember.computed.alias 'controller._tableScrollLeft'
  onScrollTopDidChange: Ember.observer ->
    @$().scrollTop @get('scrollTop')
  , 'scrollTop'

onScroll: (event) ->
    ##########check if the browser is a firefox >= 13 and recalculate the scrolling position
    if $.browser.mozilla
      if parseInt($.browser.version) >= 13
        oldPosition = @get('scrollTop')
        newPosition = event.target.scrollTop
        if newPosition > oldPosition
          event.target.scrollTop +=52
        else if newPosition < oldPosition
          event.target.scrollTop -=52
@set 'scrollTop', event.target.scrollTop
event.preventDefault()

This fix is everything but good and I would be happy if someone has a better idea. I will further look into it, as Im sure theres a much better solution.

I hope my issue posting wasnt too wrong and some advice would be nice.

*Disclaimer: I don't know Ember to save my life.

It appears that Ember Table is injecting CSS into the HTML structure (e.g. style="width: 702px;"). While this may be great to hit the ground running, I'm not sure that it's the best solution in terms of clean code, scalability, and responsive layouts.

Is there a way for Ember to simply output the data into containers (tables or divs) and leave the display up to CSS?

While the examples are great, it would be helpful if they used the latest versions of ember-table, ember, and handlebars.

There are some errors in IE8 at the page http://addepar.github.io/ember-table/, will it be fixed it the future?

As soon as I add the view to the template: {{view Ember.Table.TablesContainer controllerBinding="tableController"}}, I get the error Uncaught TypeError: Object #<Object> has no method 'merge'

This is where the error points to:

Ember.TEMPLATES["tables-container"] = Ember.Handlebars.template(function(Handlebars, depth0, helpers, partials, data) {
            // ... code removed for brevity
            this.compilerInfo = [ 4, ">= 1.0.0" ], helpers = this.merge(helpers, Ember.Handlebars.helpers),
            // ... code removed for brevity
});

Here are the versions I'm running:

DEBUG: -------------------------------
DEBUG: Ember.VERSION : 1.0.0-rc.6
DEBUG: Handlebars.VERSION : 1.0.0-rc.4
DEBUG: jQuery.VERSION : 2.0.0
DEBUG: ------------------------------- 

This bug says you just need to upgrade handlebars:

gruntjs/grunt-contrib-handlebars#55

Which I'm currently trying to do but that requires an upgrade of ember, too. I'll keep posting what I find in case anyone runs into this like I did.

As per: https://twitter.com/justindross/status/314774920955559936

I skimmed through the current issues and just decided to sum up my thoughts here in a single issue, then let you break them into sub issues or whatever if you choose to.

Keep in mind, as I write this, I feel like the tableview should behave as closely as possible to a native table component in desktop software.

The first thing I notice is that while scrolling framerate is fine, the actually displaying of the cells in the table is just slow. As you scroll it takes time before the newly exposed rows are displayed. In my blog post I gave an example of a list view that I wrote that has 60fps. It uses Cappuccino, but you should be able to get a good idea of what's going on. Cell reuse is pretty simple.

The next thing I noticed were the header cells. The cursor is for text selection, but when you drag to select text it reorders the column… or in the case of an actual data cell it either doesn't select anything or starts editing the cell. Now, the "tradition" web app might show a four arrow cursor or hand pointer thing, but on the desktop we just use a regular cursor, and it turns out the experience is much more "mature" than a four arrow cursor.

• The column sorting should have some kind of sort indicator… it's kind of disorienting.
• When I scroll quickly through one table it sometimes causes the web page itself to scroll (while I'm in the middle of the table).
• Editable cells should edit on a double click, not a single click. Also double clicking cell (to edit it) shouldn't deselect it.
• Clicking on the stars in the "Analyst Rating" column shouldn't select the row.
• The date picker is a nice touch, but using the arrow keys while it's being edited changes the row selection instead of moving the current selected date segment up/down.

Hope that helps a bit!

• Randy

Basing ember-table on ListView would likely help improve scrolling performance and centralize optimization efforts rather than duplicating efforts

https://github.com/emberjs/list-view

Functionality it seems similar to the LazyContainer(Item)View's currently used by ember-table

Hey,

What is the reason of not using standard table tags ?
Everything gets rendered as divs, which cause many rendering problems when building responsive ui

Thanks.

I.e. when editing one table it's necessary to scroll down and up again in the other one so that the cells are actually reloaded with the new values. Is there a way to make real time reactions to model updates work?

I noticed that the headers in the tree table example scrolls with the data (left and right) but the other examples with a fixed column does not (D3 sparkline example).

I tried to read through the code in the examples but couldn't figure it out.

Thanks!

Have to implement event handler for the touchmove event as the mousewheel and scroll are not fired (or not fired continuously in the case of scroll).

We'd like to be able to add more table columns to our table whenever a user presses a +new button.

It would be nice if this could happen without redrawing the entire table.

A newbie here. No experience with ember.js

After run grunt I get the following:

running "ember_templates:build/templates/templates.js" (ember_templates) task
ember_templates is deprecated and will be removed in v0.5. Please use emberTemplates instead.
File "build/templates/templates.js" created.

Running "less:development" (less) task
File stylesheets/ember-table.css created.

Running "coffee:srcs" (coffee) task
File build/src/controllers.js created.
File build/src/main.js created.
File build/src/row_selection_mixin.js created.
File build/src/utils/jquery_fix.js created.
File build/src/utils/lazy_container_view.js created.
File build/src/utils/resize_handler.js created.
File build/src/utils/scrollbar_width_helper.js created.
File build/src/utils/style_bindings.js created.
File build/src/utils/utils.js created.
File build/src/views.js created.

Running "neuter:lib/ember-table.js" (neuter) task

Running "coffee:examples" (coffee) task
File examples/table_ajax/app.js created.
File examples/table_ajax/table_ajax.js created.
File examples/table_editable/app.js created.
File examples/table_editable/table_editable.js created.
File examples/table_fluid/app.js created.
File examples/table_fluid/table_fluid.js created.
File examples/table_simple/app.js created.
File examples/table_simple/table_simple.js created.
File examples/table_with_bar/app.js created.
File examples/table_with_bar/table_bar.js created.
File examples/table_with_dynamic_bar/app.js created.
File examples/table_with_dynamic_bar/table_bar.js created.
File examples/table_with_fixed_column/app.js created.
File examples/table_with_header/app.js created.
File examples/table_with_horizon/app.js created.
File examples/table_with_horizon/table_horizon.js created.
File examples/table_with_sparkline/app.js created.
File examples/table_with_sparkline/table_sparkline.js created.
File examples/table_with_tree_view/app.js created.
File examples/table_with_tree_view/data.js created.
File examples/table_with_tree_view/tree_table.js created.

Running "uglify:lib/ember-table.min.js" (uglify) task
File "lib/ember-table.min.js" created.
Uncompressed size: 50831 bytes.
Compressed size: 6424 bytes gzipped (50782 bytes minified).

Running "watch" task
Waiting...

Then I set a local server with python to see the examples. However, I get an error in the console saying:
less: css generated in 36ms
ember.js:361DEBUG: -------------------------------
ember.js:361DEBUG: Ember.VERSION : 1.0.0-rc.6
ember.js:361DEBUG: Handlebars.VERSION : 1.0.0-rc.4
ember.js:361DEBUG: jQuery.VERSION : 1.9.1
ember.js:361DEBUG: -------------------------------
TypeError: 'undefined' is not a function (evaluating 'this.merge(helpers, Ember.Handlebars.helpers)')

I updated umber and the handlebars to the latest versions.

Any help with this issue would be appreciated.

Your table looks very nice, thanks a lot for sharing. We have one in our app that is pretty similar, but not as well developed. I am considering replacing the one in our app with this one.

My only reservation is adding underscore.js to our codebase. Not that I have anything against underscore, but we already Ember, jQuery and jQuery UI. I'm hesitant to add another major dependency. How hard of a dependency is Underscore.js? Could it be easily separated.

I posted this question on the HN thread. Sorry for the crosspost, I was afraid it might get over looked.

http://addepar.github.io/ember-table/

OS X 10.7.4 with Chrome 29.0.1547.62

I can't even check console, because it just says "Google chrome unexpectedly quit"

Works fine on ff though.

I talked with @sherb about this a bit and confirmed that there aren't any public tests for this. I'd definitely like to contribute more but I'm a bit hesitant without having a good place to write tests. What would it take to at least get a rough testing framework in place? Even if not everything was fully tested, I'd like to have an approved place to add tests for PRs.

Hi @ppong and anyone else who may be able to assist,

Edit: I have moved this question to stackoverflow as it is more likely a usage question than feature request:

http://stackoverflow.com/questions/15477472/addepar-ember-table-how-to-retrieve-currently-selected-model-data

Thanks!

Jesse

It's quite easy to define custom cell view classes, but table row view classes are much harder.

Being able to easily define a view class to be used for table row rendering would aid in custom styling when a single table contains multiple types/categories of rows by allowing row css classes based on properties on the row object.

Hey guys,

I don't really have a pull request to send, but there's an architectural issue we encountered with the current RowSelectionMixin implementation. We implemented our own simple selection handling, so I just wanted to share with you what we did.

We needed to fire events when the user clicks a row. In our case, we wanted to transition the router.

"Oh", you say, "you can just observe selection to transition the router." That's what we tried at first, but it turns out to be problematic: When the router restores the state from the URL, it needs to set the selection too. But then the observer fires and sends an event back to the router. This circularity seems like an anti-pattern. We really want to react only when the user clicks, but not when the router sets a selection. That's what events are for, and we shouldn't be using an observer. But there's no way to get the click (or mousedown) event at the moment.

There's another issue in the code: isSelected is set imperatively through an observer, rather than being defined declaratively as a property. We encountered problems with rows staying selected even though selection had been reset. You could probably pinpoint a bug in the code, but I think it's better to fix the fundamental approach.

So what we did to fix these issues was extremely simple:

1. Instead of using RowSelectionMixin, we handle mouseDown ourselves and fire off an event to the router, which in turns sets tableController.selection upon entering the route. (We didn't even want de-selecting.)
2. Define isSelected declaratively to highlight rows. We define it on the row view, not the row object.

App.TableRowView = Ember.Table.TableRow.extend
  # Upstream uses row.isSelected. That's bad, because `row` doesn't have a
  # controller to compare the current selection. Let's have the isSelected
  # property on the view instead.
  classNameBindings: ['row.isActive:active', 'isSelected:selected']

  isSelected: (->
    record = @get('content.content')
    record? and record == @get('controller.selection')
  ).property('content.content', 'controller.selection')

  mouseDown: ->
    if record = @get('content.content')
      @get('controller.target').send('doStuff', record)

In our TableController subclass, we put tableRowViewClass: 'App.TableRowView'. And that (plus router code) is all we needed to get selections working.

So I suspect we might be able to simplify the RowSelectionMixin a lot.

I also want to suggest that isSelected conceptually really does belong on the view: The currently-selected records are canonically stored in tableController.selection -- I think that's an excellent choice. But then we'd really like to avoid duplicating that state into the rows. Rather, we want to have the view decide whether it should be visually highlighted (implemented as the isSelected property), so that's purely a view concern.

By the same token, isActive might better live in the view as well, since it's purely about visual highlighting. (I'm not sure if the Row objects are used for anything else at all -- maybe they can go away then.)

Anyways, just wanted to share this. Hope it's useful!

When I go to the project demos (at http://addepar.github.io/ember-table/) and click a row in the Tree Table example, the keyboard expand/collapse (left/right arrow button) doesn't work. The icon changes, but nothing else happens.

I am running the latest version of Chrome.

Add filtering capabilities please

Hello I would like to know if there is a way to focus on first row, after table renders.

In Windows 8, the horizontal scrolling worked great in Chrome version 28.0.1500.95m, but after upgrading to 29.0.1547.57m the horizontal scrolling of the headers no longer works. The data still scrolls horizontally, but the headers stay static.

I feel like the example is the kitchen sink of examples; it includes a great deal more than is necessary. Would love to see the simplest 'hello world' of tree table examples if possible. Some documentation might help, too.

Ember RC8 seems to have caused a breakage.
When viewing a table then navigating away, then viewing again, the items will all have a display:none.

If you run the table-fluid example from here:
https://github.com/bradleypriest/ember-table/commit/968c61960c1f1d842a3383b75bc673cbdcff8145

Navigate to "about" and then back again it breaks.

My current workaround is https://github.com/bradleypriest/ember-table/commit/3ab441f47e10f198a081a9901bf5d03da07d952b, but I'm not sure quite why it works and I doubt it is the proper answer

I'm using grunt/yeoman and added the ember-table bower component.
I've added the Hello World table to one of my controllers, all the data shows up, but the headers are just not being rendered.
When I check with the inspector (firefox) the html doesn't seem to contain any element with a "ember-table-header-block" class.

Did I miss anything obvious?

Output from console:
[23:39:27.422] "DEBUG: -------------------------------"
[23:39:27.422] "DEBUG: Ember : 1.2.0"
[23:39:27.423] "DEBUG: Ember Data : 1.0.0-beta.2"
[23:39:27.423] "DEBUG: Handlebars : 1.1.2"
[23:39:27.423] "DEBUG: jQuery : 2.0.3"
[23:39:27.423] "DEBUG: Ember Table : 0.0.2"
[23:39:27.423] "DEBUG: -------------------------------"