# Custom Action Columns

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

- 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`](https://www.adaptabletools.com/docs/reference/actioncolumncontext.md) (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:

| Variant  | Property              | Returns                                      |
| -------- | --------------------- | -------------------------------------------- |
| React    | `render`              | A React node, with the Action Column context |
| Angular  | `frameworkComponent`  | An Angular component                         |
| Vue      | `frameworkComponent`  | A Vue component                              |
| Vanilla  | `renderHTML`          | HTML string (`onMount` / `onDestroy`)        |

<!-- framework: react -->
### React

```tsx
{
  type: 'custom',
  render: (context) => {
    const language = context.data?.language ?? 'n/a';
    return <span className="lang-chip">{language}</span>;
  },
}
```

<!-- /framework -->

<!-- framework: vanilla -->
### Vanilla

```ts
{
  type: 'custom',
  renderHTML: ({phase}) => {
    if (phase === 'onDestroy') {
      return null;
    }
    return '<span class="lang-chip">custom</span>';
  },
}
```

<!-- /framework -->

<!-- framework: angular -->
### Angular

```ts
{
  type: 'custom',
  frameworkComponent: {
    type: LanguageChipComponent,
  },
}
```

<!-- /framework -->

<!-- framework: vue -->
### Vue

```ts
{
  type: 'custom',
  frameworkComponent: ({adaptableApi}) =>
    h(LanguageChip, {adaptableApi}),
}
```

<!-- /framework -->

**Example: Action Columns: Custom**

Custom Control showing a language chip

- `Badge` renders the row's `Language` as a chip
- React uses `render`; Vanilla uses `renderHTML`

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';

const chipStyle =
  'display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;background:#334155;color:#e2e8f0;';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Column Custom',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'language_badge',
        friendlyName: 'Badge',
        settings: {width: 120, suppressMenu: true},
        controls: [
          {
            type: 'custom',
            render: context => context.data?.language || 'n/a',
            renderHTML: () =>
              `<span style="${chipStyle}">language</span>`,
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'language_badge',
            'github_stars',
            'license',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};
```

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