RowActions(AddRow / DeleteRow / ResetData)
:LiTarget: 用途
編集可能テーブルの操作ボタン3種。
- AddRowButton: テーブル下部の「+ 追加」
- DeleteRowButton: 各行のゴミ箱(確認ダイアログ付き)
- ResetDataButton: 「デフォルトに戻す」(編集データを初期化)
: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>;
}