103 lines
3.8 KiB
TypeScript
103 lines
3.8 KiB
TypeScript
import { createColumnHelper } from "@tanstack/react-table";
|
|
import { type LinkTableColumns } from "@/entities/link";
|
|
import { Checkbox } from "@common/components";
|
|
|
|
const columnHelper = createColumnHelper<LinkTableColumns>();
|
|
|
|
function tableColumns({ selectedColIds, setSelectedColIds }: {
|
|
selectedColIds: string[];
|
|
setSelectedColIds: React.Dispatch<React.SetStateAction<string[]>>;
|
|
}) {
|
|
return [
|
|
columnHelper.display({
|
|
id: "select",
|
|
header: ({ table }) => {
|
|
const allRows = table.getRowModel().rows;
|
|
const allSelected =
|
|
allRows.length > 0 &&
|
|
allRows.every((row) =>
|
|
selectedColIds.includes(row.original.col_sn)
|
|
);
|
|
|
|
return (
|
|
<div className="flex justify-center items-center">
|
|
<Checkbox
|
|
className="bg-white"
|
|
checked={
|
|
allSelected
|
|
? true
|
|
: false
|
|
}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedColIds(allRows.map((row) => row.original.col_sn));
|
|
} else {
|
|
setSelectedColIds([]);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
},
|
|
cell: ({ row }) => {
|
|
const id = row.original.col_sn;
|
|
const checked = selectedColIds.includes(id);
|
|
|
|
return (
|
|
<div className="flex justify-center items-center">
|
|
<Checkbox
|
|
checked={checked}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onCheckedChange={(checked) => {
|
|
setSelectedColIds((prev) =>
|
|
checked ? [...prev, id] : prev.filter((x) => x !== id)
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
},
|
|
}),
|
|
columnHelper.accessor('col_sn', {
|
|
id: 'col_sn',
|
|
header: '컬럼 일련번호'
|
|
}),
|
|
columnHelper.accessor('sou_col_nm', {
|
|
id: 'sou_col_nm',
|
|
header: '원천컬럼명',
|
|
cell: (info) => info.getValue() ? info.getValue() : '-',
|
|
}),
|
|
columnHelper.accessor('sou_col_korn_nm', {
|
|
id: 'sou_col_korn_nm',
|
|
header: '원천컬럼 한글명',
|
|
cell: (info) => info.getValue() ? info.getValue() : '-',
|
|
}),
|
|
columnHelper.accessor('sou_col_sz', {
|
|
id: 'sou_col_sz',
|
|
header: '원천컬럼 크기',
|
|
cell: (info) => info.getValue() ? info.getValue() : '-',
|
|
}),
|
|
columnHelper.accessor('trsf_col_nm', {
|
|
id: 'trsf_col_nm',
|
|
header: '변환컬럼명',
|
|
cell: (info) => info.getValue() ? info.getValue() : '-',
|
|
}),
|
|
columnHelper.accessor('trsf_col_korn_nm', {
|
|
id: 'trsf_col_korn_nm',
|
|
header: '변환컬럼 한글명',
|
|
cell: (info) => info.getValue() ? info.getValue() : '-',
|
|
}),
|
|
columnHelper.accessor('trsf_col_sz', {
|
|
id: 'trsf_col_sz',
|
|
header: '변환컬럼 크기',
|
|
cell: (info) => info.getValue() ? info.getValue() : '-',
|
|
}),
|
|
columnHelper.accessor('pk_yn', {
|
|
id: 'pk_yn',
|
|
header: 'PK 여부',
|
|
cell: (info) => info.getValue() === 'Y' ? '예' : '아니오',
|
|
}),
|
|
]
|
|
}
|
|
|
|
export { tableColumns }; |