Table

데이터를 표 형태로 표시하는 테이블 컴포넌트입니다.

개요

Table은 구조화된 데이터를 표 형태로 표시하는 컴포넌트입니다. iCignal Table은 iCignal 브랜드 스타일이 적용되어 있으며, 분석 데이터와 리포트 결과를 효과적으로 표시합니다. Foundation Table의 모든 기능을 상속합니다.

주요 특징:

정렬 가능한 컬럼
페이지네이션
필터링
iCignal 브랜드 스타일

사용 사례:

iCignal 분석 데이터 테이블
캠페인 성과 목록
사용자 행동 로그
리포트 요약 테이블

설치


npx @vortex/cli add table --package icignal

기본 사용법


import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@vortex/ui-icignal";
 
export default function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>이름</TableHead>
          <TableHead>이메일</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>홍길동</TableCell>
          <TableCell>hong@example.com</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

iCignal 브랜딩

iCignal 특화 사용 가이드

Analytics 데이터 테이블:


import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@vortex/ui-icignal'
import { Badge } from '@vortex/ui-icignal'
import { TrendingUp, TrendingDown } from 'lucide-react'
 
const analyticsData = [
  { page: '/home', views: 15234, bounce: '42.1%', trend: 'up', change: '+12.5%' },
  { page: '/products', views: 8921, bounce: '38.5%', trend: 'up', change: '+8.2%' },
  { page: '/about', views: 3421, bounce: '55.3%', trend: 'down', change: '-5.1%' }
]
 
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>페이지</TableHead>
      <TableHead className="text-right">조회수</TableHead>
      <TableHead className="text-right">이탈률</TableHead>
      <TableHead className="text-right">변화</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {analyticsData.map((row) => (
      <TableRow key={row.page}>
        <TableCell className="font-medium">{row.page}</TableCell>
        <TableCell className="text-right">{row.views.toLocaleString()}</TableCell>
        <TableCell className="text-right">{row.bounce}</TableCell>
        <TableCell className="text-right">
          <div className={`flex items-center justify-end gap-xs ${
            row.trend === 'up' ? 'text-green-600' : 'text-red-600'
          }`}>
            {row.trend === 'up' ? <TrendingUp size={14} /> : <TrendingDown size={14} />}
            {row.change}
          </div>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

캠페인 성과 테이블:


import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@vortex/ui-icignal'
import { Badge, Button } from '@vortex/ui-icignal'
import { Eye } from 'lucide-react'
 
const campaigns = [
  { id: 1, name: '신규 고객 유치', status: 'active', reach: '15.2K', conversion: '3.8%' },
  { id: 2, name: '재방문 유도', status: 'active', reach: '8.9K', conversion: '5.2%' },
  { id: 3, name: '할인 프로모션', status: 'paused', reach: '12.3K', conversion: '2.1%' }
]
 
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>캠페인</TableHead>
      <TableHead>상태</TableHead>
      <TableHead className="text-right">도달</TableHead>
      <TableHead className="text-right">전환율</TableHead>
      <TableHead className="text-right">액션</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {campaigns.map((campaign) => (
      <TableRow key={campaign.id}>
        <TableCell className="font-medium">{campaign.name}</TableCell>
        <TableCell>
          <Badge variant={campaign.status === 'active' ? 'success' : 'default'}>
            {campaign.status === 'active' ? '실행 중' : '일시정지'}
          </Badge>
        </TableCell>
        <TableCell className="text-right">{campaign.reach}</TableCell>
        <TableCell className="text-right">{campaign.conversion}</TableCell>
        <TableCell className="text-right">
          <Button variant="ghost" size="sm">
            <Eye size={14} className="mr-xs" />
            보기
          </Button>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Foundation과의 차이점

속성	Foundation	iCignal
스타일	중립적	iCignal 브랜드 강조
헤더 색상	회색	iCignal Blue 강조 가능
사용 맥락	범용	Analytics/Reports 데이터
테마	중립적 테마	iCignal 테마 (`@vortex/ui-icignal/theme`)

Props API

Prop	Type	Default	Description
className	string	-	추가 CSS 클래스

예제

예제 1: iCignal 트래픽 분석 테이블


import "@vortex/ui-icignal/theme";
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@vortex/ui-icignal";
import { Card, CardHeader, CardContent } from "@vortex/ui-icignal";
import { BarChart2 } from "lucide-react";
 
export default function TrafficAnalysis() {
  const data = [
    {
      source: "Google",
      sessions: 15234,
      users: 12421,
      bounceRate: "42.1%",
      avgDuration: "4:23",
    },
    {
      source: "Direct",
      sessions: 8921,
      users: 7234,
      bounceRate: "38.5%",
      avgDuration: "5:12",
    },
    {
      source: "Facebook",
      sessions: 5432,
      users: 4321,
      bounceRate: "55.3%",
      avgDuration: "2:45",
    },
    {
      source: "Instagram",
      sessions: 3210,
      users: 2543,
      bounceRate: "48.7%",
      avgDuration: "3:34",
    },
  ];
 
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center gap-sm">
          <BarChart2 size={20} className="text-icignal-blue" />
          <h3 className="font-semibold">트래픽 소스 분석</h3>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>소스</TableHead>
              <TableHead className="text-right">세션</TableHead>
              <TableHead className="text-right">사용자</TableHead>
              <TableHead className="text-right">이탈률</TableHead>
              <TableHead className="text-right">평균 시간</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.map((row) => (
              <TableRow key={row.source}>
                <TableCell className="font-medium">{row.source}</TableCell>
                <TableCell className="text-right">
                  {row.sessions.toLocaleString()}
                </TableCell>
                <TableCell className="text-right">
                  {row.users.toLocaleString()}
                </TableCell>
                <TableCell className="text-right">{row.bounceRate}</TableCell>
                <TableCell className="text-right">{row.avgDuration}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}