SCALE — Build Lab
UI部品 · REACT COMPONENTS

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

CATEGORYUI部品 TYPEReact Components EFFORT15〜45分 DIFFICULTY
PRIMARY CODE
tsx · components/finance/RowActions.tsx
'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>;
}
USE CASES
  • テーブル下部の「行を追加」ボタン
  • 各行の削除ボタン(確認ダイアログ付き)
  • セクション右上の「デフォルトに戻す」

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>;
}