Which is the best approach to write a reusable component / customElement in aurelia?

Question

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.

app.html

  <div class="wrapper">
    <div class="main-container">
      <header>HEADING</header>
     <compose view-model="./table-component" model.bind="items" inherit-binding-context></compose>
    </div>
  </div>

another-table.html

  <div class="wrapper">
    <div class="main-container">
      <header>HEADING 2</header>
     <compose view-model="./table-component" model.bind="items1" inherit-binding-context></compose>
    </div>
  </div>

table-component.js

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;
  }

}

table-component.html

 <template>       
      <header id="level-one-head" class="level-one-header">
        <div></div>
        <div>No.</div>
        <div>Name</div>
        <div>Type</div>
      </header>
      <div class="level-data-section ">
        <div
          repeat.for="item of items"
          infinite-scroll-next="getMoreFn"
        >
          <div class="row">              
            <div>${$index}</div>
            <div>${item}</div>               
          </div>          
        </div>
      </div>
 </template>

1. Using compose like above and passing the data is right approach or is there any better way to handle dynamic data ?
2. Planning to pass the column headers also in compose depending on the table