결과 비교
같은 것을 각 라이브러리로 만들었습니다. 직접 만져 보세요.
코드 비교
코드를 고치면 오른쪽 미리보기가 바로 바뀝니다.
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>
)
}