How to show multiple model hooks on a component

I am new to ember and I am trying to figure how to show different model hooks on a component. I have two models that I want to show in a table. Each model should show when the link-to route is clicked, but I want to use one component to build the table like so

let newCol = ;

export default Component.extend({ table:null, model:null, columns:computed(()=>{ return newCol; }), init(){ this._super(…arguments) let model = this.get(‘model’)

        for(const key of Object.keys(model[0])){
            newCol.push({'label': key});
            newCol.push({'valuePath': key});
            //console.log(key)
        }
    
        let table = new Table(this.get('columns'),this.get('model'));
        //console.log('table = ', table);
        this.set('table',table);
}

});

I am passing all my model hook from my route like this {{client-main-table model=model}}

Hi @Richard_Pantoja, I’m not sure I understand your question correctly, but I think you are asking how to reuse a component that shows a table on two different routes. You are already doing most of what’s needed.

Can you give an example of the two routes in questions? Are they completely separate (like “/reports” vs “/events”) or do they only differ based on a parameter (like “/reports/1” vs “/reports/2”)?