テーブル

import {
  createColumnHelper,
  createSortedRowModel,
  rowSortingFeature,
  tableFeatures,
  useTable,
} from "@tanstack/react-table"

type Employee = { name: string; department: string; joined: number }

// 表に出すデータ
const employees: Employee[] = [
  { name: "佐藤", department: "営業", joined: 2019 },
  { name: "鈴木", department: "開発", joined: 2021 },
  { name: "田中", department: "開発", joined: 2023 },
  { name: "高橋", department: "人事", joined: 2020 },
]

// 使う機能（並び替え）
const features = tableFeatures({
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
})

// 列の設定：どの列に、何を出すか
const helper = createColumnHelper<typeof features, Employee>()
const columns = helper.columns([
  helper.accessor("name", { header: "名前" }),
  helper.accessor("department", { header: "部署" }),
  helper.accessor("joined", { header: "入社年" }),
])

export default function App() {
  const table = useTable({ features, columns, data: employees })

  return (
    <div className="overflow-hidden rounded-xl border bg-background">
    <table className="w-full text-sm">
      <thead>
        {table.getHeaderGroups().map((group) => (
          <tr key={group.id} className="bg-muted/50">
            {group.headers.map((header) => (
              <th
                key={header.id}
                onClick={header.column.getToggleSortingHandler()}
                className="cursor-pointer px-4 py-2.5 text-left font-medium text-muted-foreground select-none hover:text-foreground"
              >
                <table.FlexRender header={header} />
                {header.column.getIsSorted() === "asc" && " ▲"}
                {header.column.getIsSorted() === "desc" && " ▼"}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id} className="hover:bg-muted/30">
            {row.getAllCells().map((cell) => (
              <td
                key={cell.id}
                className="border-t px-4 py-2.5"
              >
                <table.FlexRender cell={cell} />
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
    </div>
  )
}