Action Columns

Action Column Links

View as Markdown

Summary

  • 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.

Developer Guide

Defining a Link Control

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,
        },
      ],
    },
  ],
},
1
Add Action Column Options

Put the Column in actionColumnOptions.actionColumns.

2
Identify the Column

Supply columnId and an optional friendlyName.

3
Set the Control type

Set type to 'link'.

4
Set the label

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

5
Build the href

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

6
Choose target and visibility

target: '_blank' opens a new tab.

hidden removes the link when the row has no URL.

Action Columns: Link
Fork
  • Repo opens html_url in a new tab
  • The Control is hidden when the row has no URL
Loading demo…

AdapTable Resources

PreviousTogglesNextSelects