title: Which is the best approach to write a reusable component / customElement in aurelia?
body: <p>I need to create multiple tables of same html structure but data and columns are different for each table. So I want to create one table component which has common html structure and can get columns and data as parameter , I'm not sure which is the best approach in aurelia to do the same.</p>
  <p><strong>app.html</strong></p>
  <pre><code>  &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;main-container&quot;&gt;
        &lt;header&gt;HEADING&lt;/header&gt;
       &lt;compose view-model=&quot;./table-component&quot; model.bind=&quot;items&quot; inherit-binding-context&gt;&lt;/compose&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p><strong>another-table.html</strong></p>
  <pre><code>  &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;main-container&quot;&gt;
        &lt;header&gt;HEADING 2&lt;/header&gt;
       &lt;compose view-model=&quot;./table-component&quot; model.bind=&quot;items1&quot; inherit-binding-context&gt;&lt;/compose&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p><strong>table-component.js</strong></p>
  <pre><code>export class TableComponent {
    constructor() {
      this.message = 'Hello world';
    }
  
    activate(model) {
      this.items = model;
    }
  
    getMoreFn(){
      this.parent.getMore(); // calling respective component api function
    }
  
    bind(bindingContext, overrideContext) {
      this.parent = overrideContext.parentOverrideContext.bindingContext;
    }
  
  }
  </code></pre>
  <p><strong>table-component.html</strong></p>
  <pre><code> &lt;template&gt;       
        &lt;header id=&quot;level-one-head&quot; class=&quot;level-one-header&quot;&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;No.&lt;/div&gt;
          &lt;div&gt;Name&lt;/div&gt;
          &lt;div&gt;Type&lt;/div&gt;
        &lt;/header&gt;
        &lt;div class=&quot;level-data-section &quot;&gt;
          &lt;div
            repeat.for=&quot;item of items&quot;
            infinite-scroll-next=&quot;getMoreFn&quot;
          &gt;
            &lt;div class=&quot;row&quot;&gt;              
              &lt;div&gt;${$index}&lt;/div&gt;
              &lt;div&gt;${item}&lt;/div&gt;               
            &lt;/div&gt;          
          &lt;/div&gt;
        &lt;/div&gt;
   &lt;/template&gt;
  </code></pre>
  <ol>
  <li>Using compose like above and passing the data is right approach or is there any better way to handle dynamic data ?</li>
  <li>Planning to pass the column headers also in compose depending on the table</li>
  </ol>