2024/05/11

テーブルのヘッダー(thead)を固定してtbody内を縦スクロールさせる実例

セルの横幅を自動調整する機能もついています

About Preview

このコンポーネントを使いたい場合は、component.tsxとstyle.cssの内容をコピーして、render.tsxを参考にコンポーネントを使ってください

プレビュー画面では以下のパッケージがンストールされています

pnpm add tailwindcss clsx tailwind-merge

interface TableProps {
  thead: string[];
  tbody: string[][];
  maxHeight: string;
}

VanillaJSでの実装方法は記事にしました。