TanStack Table を使ってみるメモ

import { useMemo, useReducer, useState } from 'react'

import { ColumnDef, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'

import Box from '@mui/material/Box'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import Paper from '@mui/material/Paper'

interface MyData {
  dataId: number
  name: string
  keys: string[],
  values: string[],
}

const data: MyData[] = [
  {
    dataId: 1001,
    name: 'Data 1001',
    keys: [
      "1001-1",
      "1001-2",
      "1001-3",
    ],
    values: [
      "1001-1 jfdlak jksldajfkldsjakl klfjdklajflsdjka lkjdl;kj;lk",
      "1001-2",
      "1001-3",
    ],
  },
  {
    dataId: 1002,
    name: 'Data 1002',
    keys: [
      "1002-1",
      "1002-2",
      "1002-3",
      "1002-4",
    ],
    values: [
      "1002-1",
      "1002-2",
      "1002-3",
      "1002-4",
    ],
  }
]

const columnHelper = createColumnHelper<MyData>()
const defaultData = data

const MyTanStackTable = () => {
  const [data, setData] = useState([...defaultData])
  const rerender = useReducer(() => ({}), {})[1]

  const columns = [
    {
      accessorKey: 'dataId',
      header: 'Data ID',
    },
    {
      accessorKey: 'name',
      header: 'Name',
    },
  ]

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel()
  })

  return (
    <Box sx={{width: '100%'}}>
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            {table.getHeaderGroups().map(headerGroup => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map(header => (
                  <TableCell key={header.id}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )
                    }
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableHead>
          <TableBody>
            {table.getRowModel().rows.map(row => (
              <TableRow key={row.id}>
                {row.getVisibleCells().map(cell => (
                  cell.column.id === 'dataId'
                  ?
                  (
                    cell.getValue() === 1001
                    ?
                    <TableCell key={cell.id} rowSpan={2}>
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </TableCell>
                    :
                    null
                  )
                  :
                  <TableCell key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </TableCell>
                ))}            
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Box>
  )
}


export default function Home() {
  return (
    <MyTanStackTable />
  )
}