react-table

import React, { useEffect, useState } from "react";
import { useTable } from "react-table";
import { fetchItems } from "../mockApi";
import { mockData } from "../mockApi";
type Props = {
columns: any;
data: any;
};
console.log(mockData, "mok");
const DataTable = ({ columns, data }: Props) => {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
useTable({
columns,
data,
});
const [items, setItems] = useState([]);
useEffect(() => {
fetchItems().then((data: any) => {
setItems(data);
});
}, []);
const generateData = (index: any) => {
return {
id: index + 1,
name: Item ${index + 1},
};
};

const items2 = Array.from({ length: 6 }, (_, index) => generateData(index));
const renderItems = () => {
return Array.from(items, (item: any) => <li key={item.id}>{item.name}</li>);
};

const renderItems2 = () => {
return Array.from({ length: 10 }, (mockData: any, index) => {
return mockData?.map((v: any) => v.name);
});
};
console.log(renderItems2(), "renderItems2");

const mockData = { id: 1, name: "Item 1" };

const renderItems3 = () => {
return Array.from({ length: 10 }, (mockData, index) => {
// モックデータからnameプロパティを取得して配列に格納
// return mockData.map((item) => item);
});
};
console.log(renderItems3(), "renderItems3");
console.log(headerGroups[0].headers, "header");
const [selectedColumn, setSelectedColumn] = useState(null);
const allowClick = () => {
alert("uuuuu");
};
return (
<div className="table-container">
<table {...getTableProps()} className="table">
<thead>
{headerGroups.map((headerGroup: any) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column: any) => (
// <th>
// {column.render("Header") === "ID" ? <span>矢印</span> : ""}

            //   {column.render("Header")}
            // </th>
            <th
              key={column.id}
              className={selectedColumn === column ? "selected" : ""}
            >
              {column.render("Header") === "ID" ||
              column.render("Header") === "Name" ? (
                <span onClick={allowClick}>矢印</span>
              ) : (
                ""
              )}
              {column.render("Header")}
            </th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map((row: any) => {
        prepareRow(row);
        console.log(rows, "rows");
        return (
          <tr {...row.getRowProps()}>
            {row.cells.map((cell: any) => {
              return (
                <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
              );
            })}
          </tr>
        );
      })}
    </tbody>
  </table>
  <div>
    <h2>Item List</h2>
    <ul>
      {items.map((item: any) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
    <ul>
      {items2.map((item: any) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  </div>
</div>

);
};

export default DataTable;