Action Columns

Custom Action Columns

View as Markdown

Summary

  • A custom Control is the escape hatch for content AdapTable does not ship
  • Use render in React, frameworkComponent in Angular / Vue, or renderHTML in Vanilla
  • The Control still receives full ActionColumnContext (row, node, API)

Use custom when the cell should render something that is not a button, toggle, link, select, command, menu or form — a status chip, a sparkline of your own, a framework widget, and so on.

Pick the property that matches the AdapTable variant:

VariantPropertyReturns
ReactrenderA React node, with the Action Column context
AngularframeworkComponentAn Angular component
VueframeworkComponentA Vue component
VanillarenderHTMLHTML string (onMount / onDestroy)
{
  type: 'custom',
  renderHTML: ({phase}) => {
    if (phase === 'onDestroy') {
      return null;
    }
    return '<span class="lang-chip">custom</span>';
  },
}
Action Columns: Custom
Fork
  • Badge renders the row's Language as a chip
  • React uses render; Vanilla uses renderHTML
Loading demo…

Note

hidden and disabled still apply. If the Control should disappear for some rows, prefer hidden over returning null from render.

AdapTable Resources

PreviousFormsNextConfiguring Action Columns