shadcn/ui Table , API d1連携 bun + rsbuild + React

概要:

shadcn/ui Table編集的な CRUD一部実装メモになります。

• データは、 d1に保存します。

[ 作成日: 2024/09/22 ]

---

構成

• shadcn/ui
• Bun
• @rsbuild/core: 1.0.1
• React
• express.js
• typescript
• d1
• CF-workers

---

作成したコード

• https://github.com/kuc-arc-f/bun_26shadcn/tree/main/example/api_test
• .envファイルから、API接続先を取得します。

---

• create : input要素から値取得、POST送信します。
• example/api_test/src/client/ApiTest/FormDialog.tsx
• https://github.com/kuc-arc-f/bun_26shadcn/blob/main/example/api_test/src/client/ApiTest/FormDialog.tsx

<div className="grid grid-cols-4 items-center gap-4">
  <Label htmlFor="username" className="text-right">
  title
  </Label>
  {(props.type_create === 1)?(
    <Input id="title" name="title" 
    defaultValue={""} className="col-span-3" />  
  ):(
    <Input id="title" name="title"disabled={true}
    defaultValue={props.formData.title} className="col-span-3" />
  )} 
</div>
<div className="grid grid-cols-4 items-center gap-4 mt-2">
  <Label htmlFor="content" className="text-right">
  content
  </Label>
  <Input type="text" id="content" name="content" defaultValue={props.formData.content} 
  className="col-span-3" />
</div>

---

• delete
• example/api_test/src/client/ApiTest.tsx
• https://github.com/kuc-arc-f/bun_26shadcn/blob/main/example/api_test/src/client/ApiTest.tsx
• 表のDropdownMenu > delete選択すると、確認後　POST送信します。

<DropdownMenuItem
  onClick={async() => {
    if (window.confirm("Delete OK ?")) {
      console.log("id=", payment.id)
      try{
        await CrudIndex.delete(Number(payment.id));
        location.reload();
      } catch (e) {
        console.error(e);
      }
    }
  }}
>
  Delete Items
</DropdownMenuItem>

---