Components / Inline Table Control

Inline Table Control

Expense-style rows that expand into an inline edit form with shared layout transitions, focus lock on desktop, and keyboard escape to cancel.

Installation

Install the component using the shadcn CLI:

npx shadcn@latest add ChinmayNoob/fern-ui/inline-table-control

Click the edit control on a row to open the form; submit or cancel to return.

Expense

Method

Amount

Rent

Bank Transfer

$1200

Insurance

Credit Card

$149

Groceries

Wallet

$205

Utilities

Credit Card

$180

Bill

Cash

$79

tsx

import { InlineTableControl } from "@/components/inline-table-control"

export function Example() {
  return <InlineTableControl />
}