tubitak-bilgem-yte / ember-contextual-table Goto Github PK

Hello,

thanks for the fantastic addon.
Question: is there a way to add a class to a specific row, more precisely, when displaying the extraRow detail, I want the row above (so the 'parent' row so to speak) to be highlighted?

The guide page will not load.

https://tubitak-bilgem-yte.github.io/ember-contextual-table

Since no dependency to "ember-data": "^2.11.0", line should be removed.

An error occurs when assigning an action to a click event.

Error:
You can not define a function that handles DOM events in the <ui@component:empty-component::ember1095> tagless component since it doesn't have any DOM element.

How to reproduce error:
{{#data-table data=ds.data as |t|}}
{{t.column
propertyName='somePropertyName'
name='Some Name'
click=(action 'myAction' t.row)}}
{{/data-table}}

Cause:
https://github.com/tubitak-bilgem-yte/ember-contextual-table/blob/master/addon/components/empty-component.js used https://github.com/tubitak-bilgem-yte/ember-contextual-table/blob/master/addon/templates/data-table.hbs#L33

Empty component has no tagName which causes the error. I am also curious about the need for having an empty-component?
https://github.com/tubitak-bilgem-yte/ember-contextual-table/blob/master/addon/templates/data-table.hbs#L33-L36
and
https://github.com/tubitak-bilgem-yte/ember-contextual-table/blob/master/addon/templates/data-table.hbs#L12

right now, the sort event only fires if you click on the text. instead, clicking anywhere on the header should fire the sort event.

Need to reset selectedRows after data changed. Currently selectedRows are becoming stale data.

I'd like to specify a custom message to be displayed when the table has no data.

I have two constraints
a) The column headers would still be displayed like there is content in the table.
b) The message may stretch across multiple columns

The solution I thought of was to catch the empty table case in my Ember Route and add a single element in my table source data which has a value for a single column containing the message. However this does not conform to (b)

Another solution is to not display the table at all but I'd like to avoid that.

Example wireframe of what I'm trying to produce

"Ember 3.0 beta" has released. "Ember 3.0" will be released in a couple of weeks. There need a plan for migration.

It seems the addon renders spans between subsequent elements:

<tr id="ember823-table-row-id-1" class="contextual-table-row">  <!-- row info --> </tr>
<span id="ember2223" style="display: none;" class="ember-view"></span>
<tr id="ember823-table-row-id-2" class="contextual-table-row">  <!-- row info --> </tr>

According to MDN, this doesn't seem to be legal html:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody

The extra spans are also visible in e.g. https://tubitak-bilgem-yte.github.io/ember-contextual-table/basic-usage

Table needs sort feature. An alternative could be seen in here.

When using the detail row mode, when the detail view is not used, hidden and empty rows are added to the DOM. I guess as place holders.

      {{#t.extraRow as |er|}}
        {{#if (ember-array-includes detailRowsToDisplay er.rowIndex)}}
          <td class="deployment-row--sub" colspan="6">
            {{tables/browse-deployments-detail-row deployment=er.row class="deployment-row--content"}}
          </td>
        {{/if}}
      {{/t.extraRow}}

This brings a couple of styling issues, like e.g a striped table, which won't work any more. I don't know whether there would be a work around like:

   {{!-- if detail view is selected }}

      {{#t.extraRow as |er|}}
        {{#if (ember-array-includes detailRowsToDisplay er.rowIndex)}}
          <td class="deployment-row--sub" colspan="6">
            {{tables/browse-deployments-detail-row deployment=er.row class="deployment-row--content"}}
          </td>
        {{/if}}
      {{/t.extraRow}}

  {{!-- /if --}

I need to be able to set a data attribute on a row such as: <tr data-foo="bar">. is there any straightforward way to do this right now?

We would like to set an id on each row for testing. Is there a way to do this?

Would like the end result to be something like this... where the value of the id is somehow passed as a parameter.

<!-- data-table.hbs -->
{{#each data as |row index|}}
    <tr id="id-for-testing"
      class={{if (array-contains selectedRows row) 'contextual-table-selected-row contextual-table-row' 'contextual-table-row'}} {{action (if (array-contains selectedRows row) 'deselected' 'selected') row on='doubleClick'}}>

Your help on this is appreciated.

let's remove this dependency and provide little performance improvement

Provide a way to show the details of a row as an inline-row.

If data is modified (added, deleted), selected rows are cleared; but event is not seem to be firing.

it is better to use closure actions in whole project; since old-style actions can be problematic in some circumstances.

same cause of #17 -- but the fix for that was only applied to data-filterer. that same fix needs to be applied to data-sorter as well (and maybe other components)

basically when you have code like this:

      {{#data-sorter data=model as |ds|}}
        {{#data-table data=ds.data as |t|}}
          {{t.sortableColumn propertyName='name' name="Name"}}
        {{/data-table}}
      {{/data-sorter}}

if the model changes, the table does not show the new data

the fix is the same as for #17 (fixed by #18)

-  sortedData:computed('data', 'sortFields.[]', 'sorter', function() {
+  sortedData:computed('data.[]', 'sortFields.[]', 'sorter', function() {

When I use data-filterer and change length of data from external action, it doesn't make changes in the table.

{{#data-filterer data=model as |df|}}
    {{#data-table data=df.data classNames=tableClassNames as |t|}}
        ...
    {{/data-table}}
  {{/data-filterer}}

actions: {
    removeUser(user) {
        this.get('model').removeObject(user);
    }
}

But if you add key 'data.[]' into

As sortable added:
#25

Double-click is available, but would you be willing to open up a single click action we can use? I'd be willing to make a PR potentially this week.

One of the most pragmatic approaches to "grids" I've seen for ember. Thanks for this.

Is it possible to use filtering and sorting together on the same column? This seems to be impossible due to current API design isn't it? Both requires to use a special column component: {{t.filterableColumn}} and {{t.sortableColumn}}. There isn't any {{t.sortAndFilterableColumn}} component. 😞

I'm starting a simple demo using ember-contextural-table that fech remote data using something similar to the "Remote Calling Paginated Table" example showed in the demo site: https://tubitak-bilgem-yte.github.io/ember-contextual-table/#/pagination

But i don't see a way to extends that example to support some advanced filtering or search field.

any advice?

Relates with #19
There will be multiple table-row-id-0 in case of a page has multiple tables.