can.Component use in HTML tables?

CanJS
1

I’m having a bit of trouble getting my can.Component view to display properly in a table. Currently I have my component’s view containing a

and the relevant s for the record I am displaying but, It is crushing it all down into the space of one for some reason. Does CanJS not handle this scenario well?

Component Extend

can.Component.extend({
  tag: 'syndicate-feed-subscription',
  template: can.view('existing_syndicate_feed'),
  viewModel: {
    item: null,
    page_config: null,
    current_view_state: null,
    application: "syndicate"
  }
});

Component View

<script type="text/mustache" id="existing_syndicate_feed">
  <tr id="feed_{{id}}" class="feed_row">
    <td class="feed_title_column">{{title}}</td>
    <td class="feed_url_column">{{url}}</td>
    <td class="feed_policy_column">**Policy**</td>
    <td class="feed_links_column">
      <a id="edit_feed_{{id}}"   class="action_link edit_feed_link"   href="#">Edit</a>
      <a id="remove_feed_{{id}}" class="action_link remove_feed_link" href="#">Remove</a>
    </td>
  </tr>
</script>

Containing Table

<script type="text/mustache" id="feeds_list" class="editor_box">
  <div class="editor_box">
    <span class="accent_header">
      #{t "syndicate.feeds.existing_feed_section"}
    </span><br/>
    {{#feeds.length}}
      <table class="feeds_list" style="width: 100%;">
        <tr>
          <th class="feed_title_column">#{ t "syndicate.feeds.feed_title_header" }</th>
          <th class="feed_url_column">#{ t "syndicate.feeds.feed_url_header" }</th>
          <th class="feed_policy_column">#{ t "syndicate.feeds.feed_policy_header" }</th>
          <th></th>
        </tr>
        {{#feeds}}
          <syndicate-feed-subscription item="{feed}"></syndicate-feed-subscription>
        {{/feeds}}
      </table>
    {{/feeds.length}}
    {{^feeds.length}}
      <p>No existing feeds to display</p>
    {{/feeds.length}}
  </div>
</script>

Page Layout

Borders around table, tr, th, td to demonstrate weird formatting.

Screen Shot 2016-11-10 at 2.44.38 PM.png1882×980 112 KB

2

What do you mean there?

Also, if you can put this into a JSBin (example ) that would be very helpful. Thanks!

1 Like
3

btw, make sure you use <thead> and <tbody>. There are bugs in some browsers if these are missing.

4

You can’t use custom elements inside of tables. This is a limitation of can-component. For now I would use can.view.attr to define custom attributes and combine that with a can.control. You get more or less the same effect.

1 Like
5

Thanks for the suggestion about JSBin, I’ll use that next time.

6

Ah, ok. I switched everything to divs and added some CSS. Looks good now :slight_smile: Thanks for this knowledge.

7

Are those limitations documented anywhere?

8

I don’t think we have docs for this limitation so I’ve created an issue: https://github.com/canjs/can-component/issues/55

1 Like