onechiporenko / ember-models-table Goto Github PK

Currently there's no way to get the data sorted by default, which means the component cannot be used in large variety of situations when you need the data to be displayed in chronological order.

Hey,

awesome plugin and we have tremendous use of it.
We have noticed that the data for the table doesn't auto-update with the ember model.

When the promise resolves, no data is ever shown in the table. Unsure on why this happens. But it works with Ember 2.3 and as soon as you make the jump to 2.4 it breaks.

Best wishes,
Markus

It will be great to have availability to hide global search field

Hi,

Is there any options provided such that top search and column buttons should not be loaded.

Just a plain listview along with bottom navigations is required at some places for me in my application.

Its awesome plugin...

Cheers,

It would be great to add the ability to specify the default column visibility, for example:

Ember.Controller.extend({
  columns: [
    {
      propertyName: 'name',
      title: 'Name',
      visible: false
    }
  ]
});

and also add to the Columns drop down menu Show all, Hide all and Restore defaults buttons.

Would it be possible to have the grid work with https://github.com/miguelcobain/ember-paper or https://github.com/mike-north/ember-material-lite instead of only bootstrap?

Please, add some text message inside table, something like 'No data', if data - property will be empty.

good day, i continue using and learning this great module. One question about localization

I need all captions to be in Russin language, for example, 'Search' label must be 'Поиск' etc. I tried

// in controller or in a route - no effect
messages: Ember.Object.create({searchLabel: 'Поиск'})

// also i tried to define attribute in template like 
{{ models-table data=somedata columns=opts.columns messages=messages}}
// but still no success.

I know the observes is a bad solution. Any other idea for trigger setup() when the columns change?

_onColumnsChange: function() {
  this.setup();
}.observes('columns.[]'),

Hi there,

I have an application that support both English and French and I would like to be able to change the customMessages based on the locale selected, to implement this I have a computed property that returns the custom messages based on the locale. When the locale is changed the computed property is called however the table is not refreshed.

Controller:

messages: Ember.computed('i18n.locale', function() {
    let i18n = this.get('i18n');
    return Ember.Object.create({
        'searchLabel': '' + i18n.t('component.mx_data_grid.label.search'),
        'columns-title': '' + i18n.t('component.mx_data_grid.label.columns'),
        'columns-showAll': '' + i18n.t('component.mx_data_grid.label.show_all'),
        'columns-hideAll': '' + i18n.t('component.mx_data_grid.label.hide_all'),
        'columns-restoreDefaults': '' + i18n.t('component.mx_data_grid.label.restore_defaults'),
        'tableSummary': '' + i18n.t('component.mx_data_grid.label.table_summary'),
        'allColumnsAreHidden': '' + i18n.t('component.mx_data_grid.label.all_columns_hidden'),
        'noDataToShow': '' +i18n.t('component.mx_data_grid.label.no_data')
    });
}),

Template:

 {{models-table customIcons=icons customMessages=messages columns=participantColumns data=model}}

When you try to search something through Global search and yours table with custom template in the cell. Column search works fine 😏

Hi!

Thanks for an awesome addon!

I was wondering if adding custom columns fields would break anything?

columns: [
  {
    propertyName: 'name',
    title: 'Name',
    type: 'foo'
  },
 ]

If it breaks something it would be a very useful feature :)

I think that is useful to add sort and filter on hasMany field.
Currently i'm achieving this using a computed property like this

orgs : Ember.computed('organizations.[]', function(){
    var o= '';
    this.get('organizations').forEach(function(item){
      o +=' ' + item.get('symbol');
    });
    return o;
  }),

where organizations is the hasMany field.

Hey,

I think it's a good idea to implement autogeneration propertyName from column titles using camelize, when propertyName isn't provided.

What do you think about it?

Do you have any code examples of this working with ember data models and asynchronous relationships?

I was wondering where am I meant to include the code for specifying the columns under Ember v1.13.8:

Ember.A([
  Ember.Object.create({
    propertyName: 'id',
    title: 'ID'
  }),
  Ember.Object.create({
    propertyName: 'firstName',
    title: 'First Name'
  }),
  Ember.Object.create({
    propertyName: 'lastName',
    title: 'Last Name'
  }),
  Ember.Object.create({
    propertyName: 'city',
    title: 'City'
  })
])

Should I put this into a controller somewhere? Could you clarify for me? Many thanks and keep up the good work! 👍

Data in the table is not binding or listen to changes in model it should be live updating
i think that is very important.

I get this error, just by doing the installation:

Uncaught TypeError: Cannot read property 'reopen' of undefined
initialize @ ember-legacy-controllers.js:15
(anonymous function) @ ember.debug.js:4197
(anonymous function) @ ember.debug.js:4221
visit @ ember.debug.js:2257
DAG.topsort @ ember.debug.js:2368
_emberRuntimeSystemNamespace.default.extend._runInitializer @bmac ember.debug.js:4220
_emberRuntimeSystemNamespace.default.extend.runInitializers @ ember.debug.js:4186
_emberRuntimeSystemNamespace.default.extend.boot @ ember.debug.js:4095
_emberRuntimeSystemNamespace.default.extend.domReady @ ember.debug.js:4081
Backburner.run @ ember.debug.js:294
Backburner.join @ ember.debug.js:318
run.join @ ember.debug.js:19703
(anonymous function) @ ember.debug.js:19766
fire @ jquery.js:3099
self.fireWith @ jquery.js:3211
jQuery.extend.ready @ jquery.js:3417
completed @ jquery.js:3433

What is the add compatibility requirements?

How to install master on my local ?

I HEREBY REVOKE MY STUPID QUESTION! Thanks for making such a nice table!

Hi Oleg,

I discovered that computed properties aren't sortable. Any way to enable that? Or is it possible to hint the column to sort a computed property by using a real one?

Kindest regards,
Martin

1. How difficult would it be to support server side pagination? In my case I am using ember-data and have some cases where there are tens of thousands of records. Pulling them all into the frontend is not possible.
2. It would be great if you could filter using >,<,>=,<=,between for dates and numbers. How difficult would it be to add support for this?
3. It would also be great if you could bind to a list of ember-data models thereby allowing inline editing.

Hi,
Awesome component, this is what I was looking for, I am relatively new in ember and I have following function in controller

reg: function() {
console.log(this.get('content'))
return this.get('content');
}.property('content.[]'),

and my template has

{{models-table columns=columns data=reg.content filteringIgnoreCase=true}}

template renders columns but not data.

This may not be an issue, I must be missing something but there is no place where I can ask question so submitting as issue.

My environment:

version: 1.13.8
node: 3.2.0
npm: 2.13.4
os: darwin x64

Cheers

Page doesn't refresh after delete row. For example, if we have 11 records on the page and there are 10 rows per page, when you deleting 11th record you will see "there is no records". I think it would be better to refresh table, hide pagination and show 1st page with their records

Is it possible to disable pagination entirely?

I learn ember couple of days, today I installed ember-models-table, but I cannot render table with data. Configs:

// controller
export default Ember.Controller.extend({
    example1: {
        title: 'Common table',
        columns: [
            {
            propertyName: 'id',
                title: 'ID'
            },
            {
            propertyName: 'firstName',
                title: 'First Name'
            }
        ],

        content: Ember.A([
            Ember.Object.create({
                id: 1,
                firstName: 'arrrr'
            })
        ])
    }
});

// template
{{models-table data=example1.content columns=example1.columns}}

// when render with this options, error throwing:
// Uncaught Error: Assertion Failed: A helper named 'get' could not be found

If I define content as

content: Ember.A([])

it shows table with no rows, but shows. What I do wrong? generateContent(10) throws the same erorr.

I use ember 1.13, phantomjs2 not installed, my OS is Ubuntu 12.04 32bit. How to fix this? Thanks.

I assume this option allows you to sort by 1 or more columns and the order would be in the order you clicked the items. for me, regardless of wheatehr multipleColumnsSorting=true it only allows sorting by a single column at a time.

How difficult would it be to support server side pagination? In my case I am using ember-data and have some cases where there are tens of thousands of records. Pulling them all into the frontend is not possible.

From #34

it will be great something like this:

  setupColumns: Ember.on('init', Ember.observer('[email protected]', function() {
    this._setupColumns();
  })),

Due to that I have columns based on computed properties.

Same for sortBy, template and others.

It would be very useful to have an action which is called whenever the displayed data changes with the new filtered & sorted data.

eg:

{{ember-models-table data=model update=(action 'dataUpdated')}}

dataUpdated: function(filteredData) {
  // do something
}

So basically whenever I filter something or change the sorting, this action would be called.
My use case for this is the following: I have a table, and below the table I have a chart which displays the data visually. I would like the chart to only show the data which is currently displayed in the table, so if I filter a column and only 2 records remain, only these two records would be displayed in the chart. Right now, I would have to do the filtering and sorting outside of ember-models-table and actually lose most of the things that make it so useful.

Good day,

there is console.log() left in the code is logging every time model change, i think you should remove it.

   contentChangedAfterPolling: function contentChangedAfterPolling() {
      console.log(arguments);
      get(this, 'filteredContent');
      this.notifyPropertyChange('filteredContent');
    },

here

Thanks

The global search is case insensitive but the column search is case sensitive.

eg. row contains "John Smith".
global search "john smith" returns the row.
column search "john smith" returns empty.

@onechiporenko please, integrate ability to freeze left or right column (or even few columns). It would be useful for tables with a large number of columns.

I wonder , if we could have links connected to the data of tables to another page with parameters.
This seems to be a basic requirement , but as the columns are configured in another way , i cannot append the links ,

Any idea.?

Allow ordering by multiple columns at the same time.

Specify a multiple column order by default, for example:

Ember.Controller.extend({
  columns: [
    {
      propertyName: 'name',
      title: 'Name',
      order: 'asc'
    }
  ]
});

Hello

https://github.com/onechiporenko/ember-models-table/blob/master/app%2Ftemplates%2Fcomponents%2Fmodels-table.hbs#L1

classe instead classes

Can columns be sorted as number, not strings?

Hi @onechiporenko. Awesome addon.

I am interested in using this addon for a table where I have some custom buttons that I would like to trigger actions that my app could respond to. I would like to do something like this:

Ember.Controller.extend({
  actions: {
    delete: function(record) {
        // Custom code here
    }
  },
  columns: [
  {
      propertyName: 'actions',
      title: 'Actions',
      template: 'edit-delete-column'
    }
]
});

Template for Controller

{{models-table
  delete='delete'
  content=model
  columns=columns
}}

edit-delete-column Template

<div class="row-edit">
  <button class="form-button" {{action 'delete' record}}>Delete</button>
</div>

Unfortunately because of the models-table component isolates actions from inside its templates I can't do that at the moment. Would you be interested in a pr that defines a sendAction action on the models-table component to make it easy to define custom actions.

I would imagine the sendAction component would look like this:

//...
  sendAction: function() {
    this.sendAction.apply(this, arguments);
  }
//...

And it would allow users to define custom actions in their component like this:

<div class="row-edit">
  <button class="form-button" {{action 'sendAction' 'delete' record}}>Delete</button>
</div>

Also if there is a better way to achieve what I'm trying to do please let me know.

Version 1.3.6

Steps to reproduce:
-> Go to the /perf exemple
-> Navigate to the last page
-> Search by "Wei"

As we can see the component shows "No records to show" (the summary brokes too "Show 9991 - 1292 of 1292") because the currentPage stills on the last page, but since the arrangedContent size change, that page doesn't exist anymore.

Hi,
how to sum column values in footer?
Thnx

I'd like to use FontAwesome instead of Glyphicons to provide the icons, but this is not possible since icon classes are writen directly in the component template. I suggest we should be able to do something like:

icons = {
  sortAsc: 'fa fa-sort-asc',
  sortDesc: 'fa fa-sort-desc'
}

{{models-table customIcons=icons}}

But of course, keeping Glyphicons as the default.

I'd like to add a class to the row based on criteria of the record.
For example if record.isFinalized I'd like to add is-finalized to the tr (or each of its children)

Currently I can modify the template directly to add my class based on record like:

<tr class="{{if record.isFinalized "is-finalized"}}">

and it works, but it requires copying the templates/models-table.hbs into my project manually.. A configuration option would be most welcome here.

Change the customClasses option on your docs. You are pointing to customCssClasses and the correct option is customClasses

It would also be great if you could bind to a list of ember-data models thereby allowing inline editing.

From #34

Can you add functionality for columns reorder? Drag some column and drop it between others.

Enable horizontal scrolling (when a table is too wide to fit into a certain layout, or you have a large number of columns in the table).

It would be great if you could filter using >,<,>=,<=,between for dates and numbers. How difficult would it be to add support for this?

From #34

Hi there,

how to make one generic column template for all numeric columns?

I tried to reference current column with {{record.column}} and {{column}} without success

documentation says:

{{!record - row from content, current column is available as column}}

Provide searching functionality:

1. Search through all information in the table (global filter).
2. Search on specific columns only (input box at the bottom of each column).