> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# DataTable Remove Row Activation API

> Guide for migrating from the removed row activation props to row selection.

export const VersionStatus = ({version}) => {
  const isUnreleased = version === "unreleased";
  return <Badge color={isUnreleased ? "orange" : "green"}>
      {isUnreleased ? "Unreleased" : `v${version}`}
    </Badge>;
};

<VersionStatus version="3.0.9" />

<Note>
  This guide covers changes to the **beta** DataTable component. These APIs may continue to evolve before the stable release.
</Note>

## Overview

The row activation API has been removed from `DataTable`. The following props are no longer available:

* **`isActivatable`** — Removed.
* **`activeRowIds`** — Removed.
* **`defaultActiveRowIds`** — Removed.
* **`onActivateRow`** — Removed.

Consumers that used row activation should migrate to row selection instead, using the existing `isSelectable`, `selectedRowIds`, `defaultSelectedRowIds`, and `onSelectRow` props.

**`onClickRow`** has been added for consumers who need both.

## Design Rationale

### Why remove row activation?

Row activation and row selection were two overlapping interaction patterns that served the same purpose—reacting to a user choosing a row. Maintaining two parallel APIs added complexity without a clear UX distinction. Since `DataTable` is a beta component, removing the activation API now keeps the surface clean before the stable release.

Row selection with `onSelectRow` handles the same use cases. If your previous `onActivateRow` handler opened a drawer or performed a side effect on row click, you can wire that same logic into `onSelectRow`.

## Migration Guide

### Simple case: activation only

If you were only using `isActivatable` and `onActivateRow` with no separate selection, swap to `isSelectable` and `onSelectRow`:

```tsx theme={null}
// Before
<DataTable
  isActivatable
  onActivateRow={(rowId) => openDrawer(rowId)}
  rows={rows}
  columns={columns}
/>

// After
<DataTable
  isSelectable
  onSelectRow={(rowId) => openDrawer(rowId)}
  rows={rows}
  columns={columns}
/>
```

<Note>
  `isSelectable` renders a checkbox column for each row. If you previously relied on clicking anywhere on the row to trigger activation, users will now click the checkbox to trigger `onSelectRow`. Consider whether this UX change is acceptable for your use case.
</Note>

### Combined case: activation and selection together

If your table used both `isActivatable` (e.g., to open a drawer) and `isSelectable` (e.g., to populate a selected-IDs set), combine both callbacks into `onSelectRow`:

```tsx theme={null}
// Before
<DataTable
  isActivatable
  onActivateRow={(rowId) => openDrawer(rowId)}
  isSelectable
  selectedRowIds={selectedIds}
  onSelectRow={(rowId) => setSelectedIds((prev) => new Set(prev).add(rowId))}
  rows={rows}
  columns={columns}
/>

// After
<DataTable
  isSelectable
  selectedRowIds={selectedIds}
  onSelectRow={(rowId) => {
    openDrawer(rowId);
    setSelectedIds((prev) => new Set(prev).add(rowId));
  }}
  rows={rows}
  columns={columns}
/>
```

### Controlled active state

If you were controlling active row state via `activeRowIds` or `defaultActiveRowIds`, use `selectedRowIds` or `defaultSelectedRowIds` instead:

```tsx theme={null}
// Before
<DataTable
  isActivatable
  activeRowIds={activeIds}
  onActivateRow={setActiveId}
  rows={rows}
  columns={columns}
/>

// After
<DataTable
  isSelectable
  selectedRowIds={selectedIds}
  onSelectRow={setSelectedId}
  rows={rows}
  columns={columns}
/>
```

## Breaking Changes

<Warning>
  These changes require code updates before upgrading. The previous API is no longer supported.
</Warning>

The following `DataTableProps` have been **removed**:

* **`isActivatable`** — Use `isSelectable` instead
* **`activeRowIds`** — Use `selectedRowIds` instead
* **`defaultActiveRowIds`** — Use `defaultSelectedRowIds` instead
* **`onActivateRow`** — Use `onSelectRow` instead