# Action Column Links

Canonical page: https://www.adaptabletools.com/docs/handbook-action-column-link

- A `link` Control is a hyperlink built from the row
- `href` can be a string or a function (`mailto:`, external URL, internal path)
- `target` defaults to `'_self'`; use `'_blank'` to open a new tab

A `link` Control is for navigation rather than an in-grid action — open the repo, mail a contact, drill through to another page.

`href` is usually a function of the row. `hidden` is useful when some rows have no URL.

### Defining a Link Control

Put the Column in `actionColumnOptions.actionColumns`.

Supply `columnId` and an optional `friendlyName`.

Set `type` to `'link'`.

`label` is the text of the hyperlink. An `icon` is optional.

`href` can be a static string or a function of the row.

`target: '_blank'` opens a new tab. 

`hidden` removes the link when the row has no URL.

```ts [[1, 1, "actionColumnOptions"], [1, 2, "actionColumns"], [2, 4, "columnId"], [2, 5, "friendlyName"], [3, 8, "type"], [4, 9, "label"], [5, 10, "href"], [6, 11, "target"], [6, 12, "hidden"]]
actionColumnOptions: {
  actionColumns: [
    {
      columnId: 'repo_link',
      friendlyName: 'Repo',
      controls: [
        {
          type: 'link',
          label: 'GitHub',
          href: (context) => context.data.html_url,
          target: '_blank',
          hidden: (context) => !context.data.html_url,
        },
      ],
    },
  ],
},
```

**Example: Action Columns: Link**

Link Control built from row data

- `Repo` opens `html_url` in a new tab
- The Control is hidden when the row has no URL

Demo project (Vanilla); the files without a marker are shown below:

```text
src/
  adaptableOptions.ts
  agGridModules.ts     [template]
  columnDefs.ts        [template]
  gridOptions.ts       [template]
  index.ts             [template]
  onAdaptableReady.ts  [template]
  rowData.ts           [template]
  styles.css           [template]
index.html             [template]
package.json           [template]
tsconfig.json          [template]
```

Files marked `[template]` are the same in every demo; see the [demo template](https://www.adaptabletools.com/llms/demo-template.md#vanilla).

**`src/adaptableOptions.ts`**

```ts
import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Column Link',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'repo_link',
        friendlyName: 'Repo',
        settings: {width: 110, suppressMenu: true},
        controls: [
          {
            type: 'link',
            label: 'GitHub',
            tooltip: context => context.data?.html_url ?? '',
            href: context => context.data?.html_url ?? '',
            hidden: context => !context.data?.html_url,
            target: '_blank',
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'repo_link',
            'github_stars',
            'license',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```