React Virtuosoの4つのコンポーネント紹介

import { Virtuoso } from "react-virtuoso"

export default function App() {
  return (
    <Virtuoso
      style={{ height: 500, width: 400 }}  /* リストの表示領域を指定 */
      totalCount={1000}  /* リスト要素の総数を指定 */
      itemContent={(index) => (
        <div className="flex flex-col items-center justify-center border p-3">  /* 要素のスタイルを指定 */
          <p>user {index}</p>
        </div>
      )}
    />
  )
}

import React, { useMemo } from "react"
import { GroupedVirtuoso } from "react-virtuoso"

export default function App() {
  const groupCounts = useMemo(() => {
    return Array(1000).fill(10)  /* グループの総数と1つのグループに含まれる要素を指定 */
  }, [])

  return (
    <GroupedVirtuoso
      style={{  /* リストの表示領域を指定 */
        height: 600,
        width: 400,
      }}
      groupCounts={groupCounts}
      groupContent={(index: number) => {  /* 各グループのスタイルやコンテンツを指定 */
        return <div className="bg-gray-500 p-3 text-white">Group {index}</div>
      }}
      itemContent={(index: number, groupIndex: number) => (  /* 各要素のスタイルやコンテンツを指定 */
        <div className="border p-3">
          {index} (group {groupIndex})
        </div>
      )}
    />
  )
}

import React, { useMemo } from "react"
import { TableVirtuoso } from "react-virtuoso"

type User = {  /* User型を定義 */
  name: string
  age: number
  description: string
  gender: string
}

export default function App() {
  const users: User[] = useMemo(() => {
    return Array.from({ length: 1000 }, (_, index) => ({ /* テーブルに表示する1000個のユーザーデータを作成 */
      name: `User ${index}`,
      age: 20,
      description: `Description for user ${index}`,
      gender: index % 2 === 0 ? "男性" : "女性",  /* indexが偶数なら男性、奇数なら女性と表示させる */
    }))
  }, [])

  return (
    <TableVirtuoso
      style={{ height: 590, width: 600 }}  /* リストの表示領域を指定 */
      data={users}  /* テーブルに表示されるデータを指定 */
      components={{
        Table: ({ style, ...props }) => (
          <table {...props} style={{ ...style, width: "100%" }} />  /* テーブル全体のスタイルを指定 */
        ),
      }}
      fixedHeaderContent={() => (  /* 固定されたリストのヘッダーのスタイルを指定 */
        <tr>
          <th className="border bg-gray-500 p-3 text-white">Name</th>
          <th className="border bg-gray-500 p-3 text-white">Gender</th>
          <th className="border bg-gray-500 p-3 text-white">Age</th>
          <th className="border bg-gray-500 p-3 text-white">Description</th>
        </tr>
      )}
      itemContent={(_, user) => (  /* リスト要素のスタイルを指定 */
        <>
          <td className="border p-3 text-center">{user.name}</td>
          <td className="border p-3 text-center">{user.gender}</td>
          <td className="border p-3 text-center">{user.age}</td>
          <td className="border p-3 text-center">{user.description}</td>
        </>
      )}
    />
  )
}

import React from "react"
import { VirtuosoGrid } from "react-virtuoso"

export default function App() {
  return (
    <>
      <VirtuosoGrid
        style={{ height: 500, width: 600 }}  /* リストの表示領域を指定 */
        listClassName="grid grid-cols-3 gap-3 border"  /* リストの形式をグリットに指定 */
        itemClassName="p-3 border text-center"  /* リスト要素のスタイルを指定 */
        totalCount={1000}  /* リスト要素の総数を指定 */
        itemContent={(index: number) => (
          <div>
            <p>user {index}</p>
          </div>
        )}
      />
    </>
  )
}