Cell Actions

The Datatable component allows you to define interactive behavior for specific cells using the cellActions prop (previously called rowActions).

This is useful when you want to make a cell clickable—for example, to navigate to a detail page, open a modal, or trigger a custom handler—based on the column it belongs to.

How It Works

The cellActions prop is an object where:

• The keys correspond to the column key.
• The values are functions that receive the row data.
• When the user clicks on a cell in that column, the handler is triggered.

type CellActions = {
  [columnKey: string]: (row: any) => void;
};

Example

<Datatable
  cellActions={{
    name: (row) => {
      console.log("Name clicked", row.name);
    },
    email: (row) => {
      window.location.href = `mailto:${row.email}`;
    },
  }}
/>

In this example:

• Clicking the name cell will log the name.
• Clicking the email cell will open the user's default mail client.

Use Cases

• Link cells to detail pages.
• Trigger modals for editing or viewing.
• Launch contextual menus or inline actions.

Notes

• Only cells whose column.key is present in cellActions will be interactive.
• The click handler is attached to the cell wrapper.
• You can style these interactive cells using the cell or actionsCell class via classNames.

Migration Note

If you're upgrading from an older version(< 0.0.7), the prop was previously called rowActions. Consider renaming to cellActions for clarity.