summaryrefslogtreecommitdiff
path: root/components/data-table/data-table-compact-toggle.tsx
blob: 5c162a031b1315327b3b1e3311585b6bf6877e62 (plain)
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
"use client"

import * as React from "react"
import { Button } from "@/components/ui/button"
import { TableIcon, LayoutGrid } from "lucide-react"

interface DataTableCompactToggleProps {
  /**
   * 현재 컴팩트 모드 상태
   */
  isCompact: boolean
  
  /**
   * 컴팩트 모드 토글 시 호출될 함수
   */
  onToggleCompact: () => void
}

export function DataTableCompactToggle({
  isCompact,
  onToggleCompact
}: DataTableCompactToggleProps) {
  return (
    <Button
      variant="ghost"
      size="sm"
      onClick={onToggleCompact}
      title={isCompact ? "확장 보기로 전환" : "컴팩트 보기로 전환"}
      className="h-8 px-2"
    >
      {isCompact ? <LayoutGrid size={16} /> : <TableIcon size={16} />}
      <span className="ml-2 text-xs">{isCompact ? "확장 보기" : "컴팩트 보기"}</span>
    </Button>
  )
}