react-window の Fixed Size Grid を使用して任意のデータをテーブルに表示させます。
Fixed Size Grid の基本的な内容は以下を参考にして下さい。
やりたい事
jsonデータからサムネイルパス一覧を取得して、サムネイルを表示します。
実装
imgPathList.json (インプットデータ)
{
"imgPathList" : [
[
"https://dennie.tokyo/norway/img/photos/square/P1014659.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014660.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014661.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014662.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014662.jpg"
],
[
"https://dennie.tokyo/norway/img/photos/square/P1014663.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014664.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014665.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014666.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014666.jpg"
],
[
"https://dennie.tokyo/norway/img/photos/square/P1014667.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014668.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014669.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014670.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014670.jpg"
],
[
"https://dennie.tokyo/norway/img/photos/square/P1014671.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014672.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014673.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014674.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014674.jpg"
],
[
"https://dennie.tokyo/norway/img/photos/square/P1014675.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014676.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014677.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014678.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014678.jpg"
],
[
"https://dennie.tokyo/norway/img/photos/square/P1014681.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014684.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014685.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014686.jpg"
],
[
"https://dennie.tokyo/norway/img/photos/square/P1014681.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014684.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014685.jpg",
"https://dennie.tokyo/norway/img/photos/square/P1014686.jpg"
]
]
}Appコンポーネント
import './App.css';
import React from 'react';
import {FixedSizeGrid} from 'react-window';
import imgPathList from './imgPathList.json';
function App() {
const RenderItem = ({columnIndex, rowIndex, style, data}) => {
return (
<div style={style}>
<img src={data[rowIndex][columnIndex]} width={"100%"}/>
</div>
);
}
return (
<FixedSizeGrid
columnCount={4}
columnWidth={200}
height={600}
width={700}
rowCount={imgPathList.imgPathList.length}
rowHeight={300}
itemData={imgPathList.imgPathList}
>
{RenderItem}
</FixedSizeGrid>
);
}
export default App;説明
FixedSizeGridコンポーネントの itemDataプロパティへ表示させたいデータを渡します。レンダープロップ(RenderItem)では プロパティ名 data で受け取りが可能です。このデータ(data)にインデックス(columnIndex、rowIndex)を指定するとデータが表示できました。
最後に
次回はこのテーブルをレスポンシブに対応します。