【React】テーブルの左2列を固定する

## 概要

Tailwind CSSを使って、Reactで作成したテーブルの左2列を固定し、残りの列が左右にスクロールできるようにする方法をご紹介します。この機能は、特に多くの列を持つテーブルで有用であり、デスクトップ版の画面だけでなく、スマートフォン版の画面においても、効果的なデータ表示と操作性を提供します。例えば、管理画面でユーザーデータを表示し、操作する際に、特定の列を常に表示させつつ、他の情報はスクロールで確認できるようになります。

## 実装

以下のコード例は、テーブルの基本的な構造を示しています。Tailwind CSSクラスを使用して、スタイルとスクロール機能を実装します。

```table.tsx
const headers = ["ID","氏名","住所","電話番号","生年月日","メールアドレス","登録日"];

return (
    <div className="overflow-auto border-2 border-lime-700">
        <table className="text-xs border-separate border-spacing-0">
            {/* header */}
            <thead>
                <tr>
                    {headers.map((header, index) => (
                        <th
                            key={index}
                            scope="col"
                            className="bg-lime-700 text-white p-1 [&:not(:last-child)]:border-r border-black
                            first:left-0 [&:nth-child(-n+2)]:sticky [&:nth-child(2)]:left-[100px] whitespace-nowrap"
                        >
                            {header}
                        </th>
                    ))}
                </tr>
            </thead>
            {/* body */}
            <tbody>
                {users.map((user, index) => {
                    return (
                        <tr
                            key={index}
                            className="[&:nth-child(2n+1)>td]:bg-white [&:nth-child(2n)>td]:bg-[#f8ffe2] 
                            [&>td:not(:last-child)]:border-r [&>td]:border-black whitespace-nowrap"
                        >
                            {/* 1番目の値 */}
                            <td className="p-2 sticky left-0">
                                {user.id}
                            </td>
                            {/* 2番目の値 */}
                            <td className="p-2 sticky left-[100px]">
                                {user.name}
                            </td>
                            <td className="p-2" >
                                {user.address}
                            </td>
                            <td className="p-2">
                                {user.phoneNumber}
                            </td>
                            <td className="p-2">
                                {user.birthday}
                            </td>
                            <td className="p-2">
                                {user.email}
                            </td>
                            <td className="p-2">
                                {user.signupAt}
                            </td>
                        </tr>
                    )
                })}
            </tbody>
        </table>
    </div>
);
```

テーブル内で左右にスクロールできるようにするため、外側の`div`タグに`overflow-auto`を指定します。これにより、内容が領域を超えるとスクロールバーが表示されます。固定する列の境界線がスクロールと共に動かないように、`table`タグに`border-separate`と`border-spacing-0`を適用します。さらに、ヘッダーやボディ内の特定の列を固定するには、それぞれの要素に`sticky`プロパティを使用します。そして、`left-0`、`left-[任意の値px]`などのクラスを用いて、固定する列の左端からの距離を指定します。例えば、`left-0`は左端に固定し、`left-[100px]`は左端から100ピクセルの位置に固定します。1番目と2番目の列を指定するには`[&:nth-child(-n+2)]`とします。`[&:nth-child(2n+1)>td]:bg-white`と `[&:nth-child(2n)>td]:bg-[#f8ffe2]`を指定することによって行の背景色を交互に設定できるため、視認しやすくもなって、テキストが他のセルに重なった時に背景色が前面に出るため、テキストが混ざり合うのも視覚的に防いでいます。

## イメージ（テストデータ）

### スクロール前
![スクリーンショット 2023-11-18 午後3.42.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700356/af52df02-db3a-2e27-14ef-00769fe6dc4f.png)

### スクロール後
![スクリーンショット 2023-11-18 午後3.42.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2700356/124bcb35-d294-4842-d24f-0432b3060535.png)

## 参照
https://tailwindcss.com/docs/installation

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！:clap:
また、なにか間違ってましたらご指摘いただけますと幸いです！:pray: