How to add routeLink?

[tosehee75]

How do I add a column that routes to another ?

In short, I want to make one of the field clickable, and forwards to a different page where they can see the detailed view..

[mikey923]

You can add a router object to your table class like this: import { Router } from '@angular/router'; @Component({...})

export class TableComponent { constructor( ... , private _router: Router){} ... public onCellClick(data: any): any { this._router.navigate([ 'routeName', userId ]); } }

You'll have to adjust for however you've set up your routes but that's a general idea. Reference: https://angular.io/docs/ts/latest/guide/router.html Search for '.navigate'

[tosehee75]

How do you add a button or something that clearly indicates to the user that this is clickable item?

[mikey923]

That's more of a styling thing. This issue talks about it: https://github.com/valor-software/ng2-table/issues/342

For adding a button: https://github.com/valor-software/ng2-table/issues/51

[abhishek123tanna]

How to open particular route in new tab of a browser window using "this._router.navigate."...Actually My Form Opens in Same Window..Any Solution??

[themese]

I solved it by using onCellClick, but this is causing the navigation to get super laggy with a table with ~1k data. I tried showing 20 items and it doesn't get any laggy, so my guess is that paginating the table will solve this issue. But for me pagination wasn't a requirement and now looks like a necessity.

Anyone having this issue also?

[NextTrick]

What I need is to add a routerLink or onClick event just to a row value (e.g: ID of the row), is it possible?

[themese]

I think that is not currently an option, there is someone waiting for a PR that solved this issue I believe, he added a "function" option so you can add it to the rows.

I also needed a routerLink and what I did was an event emitter inside a switch so when the user clicks the cell where the button is I get the id of the row and emit it to the parent component . I emit the id because my route depends on it, it is something like "route1/environment/id".

I have 3 emitters, one per each button and detect each button. The case option depends on the column name. This means that "buttonCopy" (for example) is declared in the column array, the property name as follows: private columns = [{ title: "", name: "buttonCopy", sort: false }]

Hope it helps.

    private onCellClick(event: any): void {
        let id: string = event.row.id;
        switch (event.column) {
            case ("buttonCopy"):
                this.copyElementId.emit(id);
                break;
            case ("buttonEdit"):
                this.editElementId.emit(id);
                break;
            case ("buttonDelete"):
                this.deleteElementId.emit(id);
                break;
            default:
                break;
        }
    }

[NextTrick]

@themese Thank you so much, that could be a solution for my requirement :)

[themese]

@NextTrick Glad I could help.

Should this issue be closed?

[NextTrick]

@themese I think yes.

[kevincobain2000]

Simply putting a href link works for me. Mind the #

let link = '<a href="#/users/' + user.id + '">' + My link + '</a>';

Note:

1. No need to sanitize it and add it to your data. It doesn't work
2. <a [routerLink]= doesn't work. While simple href works

I like the idea of onCellClick and doing the action. However, it is a link and you should be able ot right click on it and copy or open in another tab. onCellClick is just a work around and a bad UI in my opinion. The text isn't copyable as well.