material-uiでテーブル表示

データ形式の定義を

interface Item {
    id: number,
    name: string,
    created: Date,
    high: number,
    low: number,
    average: number
}

とします。これを取得する関数

const fetchData = () => {
    return new Promise<Item[]>(resolve => {
        const items:Item[] = [{
            id: 1,
            name: "First Item",
            created: new Date(),
            high: 2939,
            low: 1000,
            average: (2939 + 1000) / 2
        },
        {
            id: 2,
            name: "Second Item",
            created: new Date(),
            high: 7555,
            low: 2000,
            average: (7555 + 2000) / 2
        },
        {
            id: 3,
            name: "Third Item",
            created: new Date(),
            high: 124,
            low: 234,
            average: (124 + 234) / 2
        },
        {
            id: 4,
            name: "Four Item",
            created: new Date(),
            high: 2000,
            low: 1400,
            average: (2000 + 1400) / 2
        },
        {
            id: 5,
            name: "Five Item",
            created: new Date(),
            high: 806,
            low: 200,
            average: (806 + 200) / 2
        }
        ]
        setTimeout(() => {
            resolve(items), 1000
        })
    }
    )
}

を用意します。

スタイルは

const useStyles = (theme: Theme) => {
    return makeStyles({
        root: {
            margin: theme.spacing(2)
        }
    })
}

とします。

テーブル(表)のヘッダー部分を用意します。

const MyTableRow = (item:Item) => {
    return <TableRow key={item.id}>
        <TableCell component="th" scope="row">
            {item.name}
        </TableCell>
        <TableCell>
            {item.created.toLocaleString()}
        </TableCell>
        <TableCell align="right">
            {item.high}
        </TableCell>
        <TableCell align="right">
            {item.low}
        </TableCell>
        <TableCell align="right">
            {item.average}
        </TableCell>
    </TableRow>
}

テーブルの中身のリストを用意します。

const MyTableHeaderRow = () => {
    return <TableRow>
        <TableCell>Name</TableCell>
        <TableCell>Created</TableCell>
        <TableCell align="right">High</TableCell>
        <TableCell align="right">Low</TableCell>
        <TableCell align="right">Average</TableCell>
    </TableRow>
}

これを組み合わせてテーブルを作ります。

const TableSample = () => {
    const theme = useTheme()
    const classes = useStyles(theme)()

    const [items, setItems] = useState<Item[]>([])

    useEffect(() => {
        fetchData().then(items => {
            setItems(items)
        })
    },[])

    return (<Paper className={classes.root}>
        <Table>
            <TableHead>
                <MyTableHeaderRow></MyTableHeaderRow>
            </TableHead>
            <TableBody>
                {items.map(item => {
                    return <MyTableRow key={item.id} {...item}></MyTableRow>
                })}
            </TableBody>
        </Table>
    </Paper>)


}

export default TableSample