pfTableView: Support icons/images/links/truncated text/ or styling in table fields

[AllenBW]

Would like to confirm or enable pf-table fields to support icons/images/links/truncated text/ or styling (per field)

[serenamarie125]

Tracked in JIRA: https://patternfly.atlassian.net/browse/OSUX-28

[abkieling]

This is an important feature.

[dtaylor113]

Hi @alexkieling, pfTableView is a simple component which has tight control on how the table is rendered. We need to figure out how to make it end-user configurable, ie. expose the underlying HTML so people can do things like truncation, icons, links,...whatever they need.

I think in order to do this we'll need to re architect pfTableView, or create a new component/example entirely. pfTableView contains all of the angular-datatable HTML in it's template, so for example, for links, we could add to the items object fields like linkText and linkUrl and have the pfTableView component render a href when it see's those fields, but this approach isn't very flexible.

Another approach would be trying to get pfTableView to work with transclusion, something I tried initially, but ran into problems because angular puts in extra <divs> when using transclusion which basic HTML table tag doesn't like -it wouldn't render.

The third option is to put up an example which just uses straight angular-datatables code. This would be an example in ngDocs and not a custom a-pf component. This example would include the pf styling. We could do checkbox selection like this: http://l-lin.github.io/angular-datatables/archives/#!/rowSelect

Thoughts?
Thanks,
Dave

[abkieling]

Do you think we can add a new optional property to the 'columns' object where we specify an HTML template? For example: ``` $scope.columns = [ { header: "Name", itemField: "name", htmlTemplate: '<span class="test">{{value}}</span>' }, { header: "Address", itemField: "address"}, { header: "City", itemField: "city" }, { header: "State", itemField: "state"} ]; ```

…

On Thu, Jun 29, 2017 at 10:36 AM, David Taylor ***@***.***> wrote: Hi @alexkieling <https://github.com/alexkieling>, pfTableView is a simple component which has tight control on how the table is rendered. We need to figure out how to make it end-user configurable, ie. expose the underlying HTML so people can do things like truncation, icons, links,...whatever they need. I think in order to do this we'll need to re architect pfTableView, or create a new component/example entirely. pfTableView contains all of the angular-datatable HTML in it's template, so for example, for links, we could add to the items object fields like linkText and linkUrl and have the pfTableView component render a href when it see's those fields, but this approach isn't very flexible. Another approach would be trying to get pfTableView to work with transclusion, something I tried initially, but ran into problems because angular puts in extra <divs> when using transclusion which basic HTML table tag doesn't like -it wouldn't render. The third option is to put up an example which just uses straight angular-datatables code. This would be an example in ngDocs and not a custom a-pf component. This example would include the pf styling. We could do checkbox selection like this: http://l-lin.github.io/ angular-datatables/archives/#!/rowSelect Thoughts? Thanks, Dave — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#491 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB0lT2UnaTUWidPrJSeCLvew3WPVOWhgks5sI6hdgaJpZM4N6YU-> .

-- Alexandre KielingSr. Software Engineer, MiddlewareRed Hat

[dtaylor113]

I can look into doing that.

[dtaylor113]

Hi, I've had some success using HTML templates and ng-include:

<script type="text/ng-template" id="status_template.html">
    <span ng-if="value === 'error'" class="pficon pficon-error-circle-o"></span>
    <span ng-if="value === 'warning'" class="pficon pficon-warning-triangle-o"></span>
    <span ng-if="value === 'ok'" class="pficon pficon-ok"></span>
    {{value}}
</script>

$scope.columns = [
        { header: " ", itemField: "status", htmlTemplate: "status_template.html" },
        { header: "Name", itemField: "name" },
        { header: "Age", itemField: "age"},
        { header: "Address", itemField: "address" },
        { header: "BirthMonth", itemField: "birthMonth"}
      ];

table-view.html

  <td ng-repeat="(key, value) in item" ng-if="$ctrl.isColItemFld(key)">
        <span ng-if="!$ctrl.hasHTMLTemplate(key)">{{value}}</span>
        <span ng-if="$ctrl.hasHTMLTemplate(key)" ng-include="$ctrl.getHTMLTemplate(key)"></span>
  </td>

table-view.component.js

ctrl.hasHTMLTemplate = function (key) {
      var retVal = false;
      var tableCol = $filter('filter')(ctrl.columns, {itemField: key});

      if (tableCol && tableCol.length === 1 && tableCol[0].hasOwnProperty('htmlTemplate')) {
        retVal = true;
      }
      return retVal;
};

ctrl.getHTMLTemplate = function (key) {
      var retVal = '';
      var tableCol = $filter('filter')(ctrl.columns, {itemField: key});

      if (tableCol && tableCol.length === 1 && tableCol[0].hasOwnProperty('htmlTemplate')) {
        retVal = tableCol[0].htmlTemplate;
      }
      return retVal;
};

@serenamarie125

[dtaylor113]

Now with links:

[dtaylor113]

Truncated text using just css:

[abkieling]

Looks good! Just some observations: - When truncating the cell text, do you plan to provide a way to see the full text, e.g., using a title attribute? - In the hasHTMLTemplate(key) function, you need to find the column item where itemField matches exactly the key. $filter('filter') searches for columns where itemField contains the key, right? - <td ng-repeat="(key, value) in item" ng-if="$ctrl.isColItemFld(key)"> I'd like to show an alternative way to do the same thing in table-view.html. You could iterate through the columns and use the itemField property to get the item value. I'm not sure it's better. Have a look. <td ng-repeat="col in $ctrl.columns"> <span ng-if="!col.htmlTemplate">{{item[col.itemField]}}</span> <span ng-if="col.htmlTemplate" ng-include="item[col.itemField]"></span> </td>

…

On Thu, Jun 29, 2017 at 2:13 PM, David Taylor ***@***.***> wrote: Truncated text using just css: [image: image] <https://user-images.githubusercontent.com/12733153/27700801-c274f6b0-5ccc-11e7-8dfb-dca8a148ca25.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#491 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB0lT5HNW5YlwCF62xyltSFUUTcY2JBwks5sI9tUgaJpZM4N6YU-> .

-- Alexandre KielingSr. Software Engineer, MiddlewareRed Hat

[dtaylor113]

• When truncating the cell text, do you plan to provide a way to see the
  full text, e.g., using a title attribute?

Yes, I have that working

• In the hasHTMLTemplate(key) function, you need to find the column item
  where itemField matches exactly the key. $filter('filter') searches for
  columns where itemField contains the key, right?

Yes, correct

I'd like to show an alternative way to do the same thing in table-view.html. You could iterate through the columns and use the itemField property to get the item value. I'm not sure it's better. Have a look. {{item[col.itemField]}} …

I like it, I'll look into using that
Thanks!

[dtaylor113]

The only issue is that if we remove:

<td ng-repeat="(key, value) in item" ng-if="$ctrl.isColItemFld(key)">

The templates use the 'key and value' variables:

     <script type="text/ng-template" id="status_template.html">
        <span ng-if="value === 'error'" class="pficon pficon-error-circle-o"></span>
        <span ng-if="value === 'warning'" class="pficon pficon-warning-triangle-o"></span>
        <span ng-if="value === 'ok'" class="pficon pficon-ok"></span>
        {{value}}
      </script>

      <script type="text/ng-template" id="name_template.html">
        <a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a>
      </script>

      <script type="text/ng-template" id="address_template.html">
        <span class="truncate-text-container">
          <span class="truncate-text-ellipsis" title="{{value}}">
            {{value}}
          </span>
        </span>
      </script>

[abkieling]

Yep, using {{value}} in the templates is definitely cleaner than {{ item[col.itemField}}. It's a shame because that code seems a bit simpler (it doesn't require the ng-if="$ctrl.isColItemFld(key)" check). An alternative would be defining a simple placeholder not related to the code for the templates and replacing it later. Unfortunately, that complicates things in a different way.

…

On Thu, Jun 29, 2017 at 5:39 PM, David Taylor ***@***.***> wrote: The only issue is that if we remove: <td ng-repeat="(key, value) in item" ng-if="$ctrl.isColItemFld(key)"> The templates use the 'key and value' variables: <script type="text/ng-template" id="status_template.html"> <span ng-if="value === 'error'" class="pficon pficon-error-circle-o"></span> <span ng-if="value === 'warning'" class="pficon pficon-warning-triangle-o"></span> <span ng-if="value === 'ok'" class="pficon pficon-ok"></span> {{value}} </script> <script type="text/ng-template" id="name_template.html"> <a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a> </script> <script type="text/ng-template" id="address_template.html"> <span class="truncate-text-container"> <span class="truncate-text-ellipsis" title="{{value}}"> {{value}} </span> </span> </script> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#491 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB0lT00kf9EqiQnpLE6n7t8QGXzPqD44ks5sJAuegaJpZM4N6YU-> .

-- Alexandre KielingSr. Software Engineer, MiddlewareRed Hat

[dtaylor113]

Implemented via: #512