SCALE
SCALE Build Hub
機能集
UI部品 React Components

行追加/削除/リセットボタン

出典: SCALE Finance
実装時間
15〜45分
難度
簡単
価格
セット¥3,000

依存パッケージ

reactlucide-react

ファイル

components/finance/RowActions.tsx

RowActions(AddRow / DeleteRow / ResetData)

:LiTarget: 用途

編集可能テーブルの操作ボタン3種。

:LiCode: コード骨格

'use client';
import { Plus, Trash2, RotateCcw } from 'lucide-react';

export function AddRowButton({ onClick, label = '行を追加' }) {
  return <button onClick={onClick} className="..."><Plus size={12} />{label}</button>;
}

export function DeleteRowButton({ onClick, confirm = true }) {
  return <button onClick={() => { if (!confirm || window.confirm('削除しますか?')) onClick(); }}><Trash2 size={12} /></button>;
}

export function ResetDataButton({ onClick, label = 'デフォルトに戻す' }) {
  return <button onClick={() => { if (window.confirm('リセットしますか?')) onClick(); }}><RotateCcw size={10} />{label}</button>;
}