owox / brainy-table Goto Github PK

Hi, can you help me with this, please?
When I add more than 11 columns it to the table it looks bad.

Example code: (Based on demo)

<brainy-table items="[[users.data]]">
  <brainy-table-column name="First Name">
    <template>[[item.user.name.first]]</template>
  </brainy-table-column>
  <brainy-table-column name="Last Name">
    <template>[[item.user.name.last]]</template>
  </brainy-table-column>
  <brainy-table-column name="Email">
    <template>[[item.user.email]]</template>
  </brainy-table-column>
  <brainy-table-column name="First Name">
    <template>[[item.user.name.first]]</template>
  </brainy-table-column>
  <brainy-table-column name="Last Name">
    <template>[[item.user.name.last]]</template>
  </brainy-table-column>
  <brainy-table-column name="Email">
    <template>[[item.user.email]]</template>
  </brainy-table-column>
  <brainy-table-column name="First Name">
    <template>[[item.user.name.first]]</template>
  </brainy-table-column>
  <brainy-table-column name="Last Name">
    <template>[[item.user.name.last]]</template>
  </brainy-table-column>
  <brainy-table-column name="Email">
    <template>[[item.user.email]]</template>
  </brainy-table-column>
  <brainy-table-column name="First Name">
    <template>[[item.user.name.first]]</template>
  </brainy-table-column>
  <brainy-table-column name="Last Name">
    <template>[[item.user.name.last]]</template>
  </brainy-table-column>
</brainy-table>

Screenshot:

Problems:

1. Wrong last column (Sixth column has attribute is-last, but it's not last column)
2. Data in every Email columns are cropped

Can you fix it please?
Thanks!

Hello,

first of all, thank you for this great component!

Is there a way to style a column with css produced from a computed method?

E.g. I would like to set a background-color if a certain cell value is reached.

In some cases the table can be the only element on the page and users might expect to always see pagination at the bottom, without need to scroll. So the table should have an option like auto-resize (disabled by default) to calculate appropriate page size on resize events.

If the space is not enough, there should be a fallback to default rows count, e. g. 10 (we don't want to show table with 2-3 rows per page, as this would looks silly).

How to disable pagination? Can't see any documentation regarding that.

When I put a button or a set of buttons in the row detail, paper-button or paper-icon-button, the text disappear, and alt and title is not propagate respectively:

<template is="row-detail">
    <div class="target-detail">
        <p state>
            <iron-icon aria-hidden="true" icon="[[_finishedIcon(item,language)]]"></iron-icon>
            [[_finishedText(item,language)]]
        </p>
        <p date hidden$="[[_hasNotDate(item)]]">
            <iron-icon aria-hidden="true" icon="x-app-icons:date-range"></iron-icon>
            [[_dateText(item,language)]]
        </p>
        <p>[[localize('phones-column', language)]]: [[item.TELEFONOS]]</p>
        <p>[[_nonMigrantTitle(item, language)]]</p>
        <p>[[_returneesTitle(item, language)]]</p>
        <div separator></div>
        <paper-button inertable
                      on-tap="_rowSelected"
                      target-api$="[[findSelfTargetApi(item)]]">
                      [[localize('target-interview',language)]]
        </paper-button>
    </div>
</template>

Per Material Design spec, tables should use regular font which is equal to 400. Currently, brainy-table is using 300 which might be a bit too thin. This should be changed in two places for brainy-td and brainy-tr-detail.

Those styles can be overridden from wrapper component using CSS, so it's unlikely to be a breaking change. However, I'm going to tag this as a minor release.

Hi,

is there a way to get html to be interpreted, and not printed as source, when returning html from a computed function?

If yes, this would probably also resolve #26.

Is there a way to provide external sorting for dynamic data?

The sequence will be:

1. user click on th[sort-by]: fire sort column change (bubles: true) (sort icon must not change until 4)
2. listen to sort change (mediator or dom-host of brainy-table) and fire iron-ajax request for current sort
3. the iron-ajax result is set to table
4. sort order updated on th[sort-by] and reflected in its icon

We are going to align current sort interactions with Material Design spec. This won't be a breaking change, but might affect UX.

1. Only show sort icon on hover (now it is shown permanently):

If sorting is enabled, display a light sort icon upon hover, which indicates that the column is sortable.

2. Keep sort icon (dark) for sorted columns
3. Add property default-sort to indicate that sorting is enabled:

If column sorting is enabled, sort the most important data by default and display a sorted state in the column header.

I have a table with 4 columns, but the ripple in third column is not covering the full column header width (ripple in columns 1 and 2 are working correctly, column 4 is not sortable):

<brainy-table-column flex="0" sort-by=...
<brainy-table-column flex="1" sort-by=...
<brainy-table-column flex="2" sort-by=...
<brainy-table-column flex="0" name=...

and its styles:

brainy-tr brainy-th:first-of-type, brainy-tr brainy-td:first-of-type {
    padding-left: 32px;
    flex-basis: 70px !important;
}
brainy-tr brainy-td:last-of-type, brainy-tr brainy-th:last-of-type {
    padding-left: 24px;
    flex-basis: 70px !important;
}
brainy-tr brainy-th:nth-child(2), brainy-tr brainy-td:nth-child(2) {
    padding-left: 32px;
}

Actually brainy-table does not manage data loading, but it should be aware of the external loading process and show spinner near the pagination counter.

The rationale here is to notify user that data is still being loaded (e. g. by queued batches requests) and therefore sorting / filtering might not reflect actual state.

I am not sure what this really means....

is this for mobile ?

Hi,

Thanks for your component, I love it!

I'm currently upgrading my Polymer 1 application to Polymer 2, but unfortunatly, your components doesn't seem to be working out of the box with Polymer 2 in my application.

Do you plan to migrate your components to Polymer 2 / ES6?

Thanks!

After applying filter, if there are no matching rows, table footer stays not hidden. It should be, and there also should be an insertion point where user could pass some text to display (e. g. No results).

I have a complex filter that cannot be integrated in headers. Instead the mediator switch the table to another component containing the filter (in the same page via iron-pages or neon-animated-pages), but when this custom/complex filter results in no results (after applying dynamic server request), the [no-result] is never shown.

The problem is that table is taking into account filterCount when there is no any filter:

        _computeNoResults: function(itemsCount, filterCount) {
          return filterCount && itemsCount === 0;
        },

The solution would be to check if there is some filter configured in the table not just check the key/value pairs in filter property. Maybe just include a boolean property to inform table the filter is external...

If data is loaded after brainy-table is loaded, the observer propagates the _dataSource as undefined:

dataSource({
        page: page,
        pageSize: this.pageSize,
        filter: this.filter,
        sortPath: this.sortPath,
        sortDirection: this.sortDirection
      }, success);

Just add a dirty check:

    _loadPage: function(dataSource, page) {
      if(dataSource == undefined) return;
      var success = function(items, size, newPage) {
        if (size !== undefined) {
          this.size = size;
        }
        if (newPage !== page) {
          this._currentPage = newPage;
        }
        this.set('_currentItems', items.slice(0));
        this._forceResize();
      }.bind(this);
      dataSource({
        page: page,
        pageSize: this.pageSize,
        filter: this.filter,
        sortPath: this.sortPath,
        sortDirection: this.sortDirection
      }, success);
    },

There is a problem when using drag-scrollable and resizing the window.

Just go to scroll tab in https://owox.github.io/brainy-table/components/brainy-table/ and resize the window (reduce its width) until the horizontal scroll appear. Once the scroll is visible and has the shadows, just maximize the navigator.

In other cases (no drag-scollable), works as expected.

I have set IronResizableBehavior to my mediator and then debounce a call to table resize on iron-resize, but my app-header is constantly resized, then call my mediator and so on forever...

Any idea?

brainy-th {
            font-weight: bold;
            color: #fff;
            background-color: var(--paper-light-blue-500);
    }

I gave styling to table header. But, after I enabled sorting on columns and when a user sorts the table, font color gets reverted to black.

Hi,

Can I use this component as stantandard table with th, tr and td without using JSON as data source?

This is because I'm doing server-rendering and not SPA application. I prefer render table from server.