# can.Component use in HTML tables?

**URL:** <https://forums.bitovi.com/t/can-component-use-in-html-tables/466>\
**Category:** CanJS\
**Created:** [November 10, 2016, 10:46pm UTC](https://forums.bitovi.com/t/can-component-use-in-html-tables/466 "2016-11-10T22:46:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![mtoews](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mtoews](https://forums.bitovi.com/u/mtoews)\
**Post date:** [November 10, 2016, 10:46pm UTC](https://forums.bitovi.com/t/can-component-use-in-html-tables/466/1 "2016-11-10T22:46:20Z")

</div>

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.

 ![](https://canada1.discourse-cdn.com/flex035/uploads/donejs/original/1X/b26d0430b43bf1bc442f1e464eb57b37e0f1b179.png)

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [November 10, 2016, 11:15pm UTC](https://forums.bitovi.com/t/can-component-use-in-html-tables/466/2 "2016-11-10T23:15:16Z")

</div>

> [@mtoews](#):
>
> containing a and the relevant s for the record I am displaying but

What do you mean there?

Also, if you can put this into a JSBin ([example](http://jsbin.com/labajog/1/edit?html,css,js,output) ) that would be very helpful. Thanks!

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [November 10, 2016, 11:15pm UTC](https://forums.bitovi.com/t/can-component-use-in-html-tables/466/3 "2016-11-10T23:15:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [November 11, 2016, 2:27pm UTC](https://forums.bitovi.com/t/can-component-use-in-html-tables/466/4 "2016-11-11T14:27:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mtoews](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mtoews](https://forums.bitovi.com/u/mtoews)\
**Post date:** [November 11, 2016, 5:46pm UTC](https://forums.bitovi.com/t/can-component-use-in-html-tables/466/5 "2016-11-11T17:46:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mtoews](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mtoews](https://forums.bitovi.com/u/mtoews)\
**Post date:** [November 11, 2016, 10:45pm UTC](https://forums.bitovi.com/t/can-component-use-in-html-tables/466/6 "2016-11-11T22:45:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [November 12, 2016, 9:04am UTC](https://forums.bitovi.com/t/can-component-use-in-html-tables/466/7 "2016-11-12T09:04:57Z")

</div>

Are those limitations documented anywhere?

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [November 16, 2016, 11:15pm UTC](https://forums.bitovi.com/t/can-component-use-in-html-tables/466/8 "2016-11-16T23:15:36Z")

</div>

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