Which is the best approach to write a reusable component / customElement in aurelia? - 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>
Using compose like above and passing the data is right approach or is there any better way to handle dynamic data ?
Planning to pass the column headers also in compose depending on the table