1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
"use client";
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getSortedRowModel,
SortingState,
} from "@tanstack/react-table";
import { useState } from "react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
interface DrawingListTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
onRowClick?: (row: TData) => void;
selectedRow?: TData;
getRowId?: (row: TData) => string;
}
export function DrawingListTable<TData, TValue>({
columns,
data,
onRowClick,
selectedRow,
getRowId,
}: DrawingListTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
onSortingChange: setSorting,
state: {
sorting,
},
});
// 행이 선택되었는지 확인하는 함수
const isRowSelected = (row: TData): boolean => {
if (!selectedRow || !getRowId) return false;
return getRowId(row) === getRowId(selectedRow);
};
return (
<div className="rounded-md border overflow-x-auto max-w-full max-h-[600px] overflow-y-auto">
<Table className="min-w-max">
<TableHeader className="sticky top-0 z-10 bg-background">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
const isSorted = header.column.getIsSorted();
const canSort = header.column.getCanSort();
return (
<TableHead
key={header.id}
style={{ minWidth: header.column.columnDef.minSize }}
className="bg-background"
>
{header.isPlaceholder ? null : (
<div
className={`flex items-center gap-2 ${
canSort ? "cursor-pointer select-none hover:text-primary" : ""
}`}
onClick={
canSort
? header.column.getToggleSortingHandler()
: undefined
}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{canSort && (
<span className="text-muted-foreground">
{isSorted === "asc" ? (
<ArrowUp className="h-4 w-4" />
) : isSorted === "desc" ? (
<ArrowDown className="h-4 w-4" />
) : (
<ArrowUpDown className="h-4 w-4 opacity-50" />
)}
</span>
)}
</div>
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => {
const isSelected = isRowSelected(row.original);
return (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
onClick={() => onRowClick?.(row.original)}
className={`cursor-pointer transition-colors ${
isSelected
? "bg-accent hover:bg-accent"
: "hover:bg-muted/50"
}`}
>
{row.getVisibleCells().map((cell) => (
<TableCell
key={cell.id}
style={{ minWidth: cell.column.columnDef.minSize }}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
);
})
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
데이터가 없습니다.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
);
}
|
