# Table

## Introduction

> **참고**: 대용량의 데이터를 보여주기 위한 경우 DataTable 컴포넌트가 더 알맞을 수 있으니 참고하세요. Table 컴포넌트는 양이 적지만 커스터마이징이 자유롭고 복잡한 형태의 UI를 Cell에 표현할 때 알맞습니다. rowSpan, colSpan 등 셀 병합이나 단순하지 않은 형태의 테이블도 Table 컴포넌트를 조합하여 구현하는 것을 권장합니다.

Table 컴포넌트는 구조화된 데이터를 표 형태로 표시하는 기본적인 테이블 컴포넌트입니다. Joy UI의 Table을 기반으로 하며, 유연한 커스터마이징과 복잡한 레이아웃을 지원합니다. 간단한 데이터 표시부터 복잡한 셀 병합, 사용자 정의 콘텐츠까지 다양한 용도로 활용할 수 있습니다.

```tsx
<Table aria-label="basic table" {...args}>
  <TableHead headCells={headCells} />
  <TableBody rows={rows} rowOptions={{
    calories: {
      numeric: true
    },
    fat: {
      numeric: true
    },
    carbs: {
      numeric: true
    },
    protein: {
      numeric: true
    }
  }} cellOrder={['dessert', 'calories', 'fat', 'carbs', 'protein']} />
</Table>
```

| Field                        | Description | Default |
| ---------------------------- | ----------- | ------- |
| Controls resolved at runtime | —           | —       |

## Usage

```tsx
import { Table, TableHead, TableBody } from '@ceed/ads';

function MyComponent() {
  const headCells = [
    { label: '이름', width: '30%' },
    { label: '이메일', width: '40%' },
    { label: '역할', numeric: false },
    { label: '가입일', numeric: false },
  ];

  const rows = [
    { name: '김철수', email: 'kim@example.com', role: '관리자', joinDate: '2024-01-15' },
    { name: '이영희', email: 'lee@example.com', role: '사용자', joinDate: '2024-02-01' },
  ];

  return (
    <Table>
      <TableHead headCells={headCells} />
      <TableBody
        rows={rows}
        cellOrder={['name', 'email', 'role', 'joinDate']}
      />
    </Table>
  );
}
```

## Examples

### Basic Examples

가장 기본적인 Table 사용법들입니다.

```tsx
<Table aria-label="basic table" {...args}>
  <TableHead headCells={headCells} />
  <TableBody rows={rows} rowOptions={{
    calories: {
      numeric: true
    },
    fat: {
      numeric: true
    },
    carbs: {
      numeric: true
    },
    protein: {
      numeric: true
    }
  }} cellOrder={['dessert', 'calories', 'fat', 'carbs', 'protein']} />
</Table>
```

### With Hover Effect

행에 마우스 오버시 하이라이트 효과를 적용할 수 있습니다.

```tsx
<Table
  children="Table"
  hoverRow
/>
```

### With Checkbox Selection

체크박스를 포함한 선택 가능한 테이블입니다.

```tsx
<Table aria-label="checkbox table" hoverRow {...args}>
  <TableHead showCheckbox headCells={headCells} />
  <TableBody showCheckbox rows={rows} rowOptions={{
    calories: {
      numeric: true
    },
    fat: {
      numeric: true
    },
    carbs: {
      numeric: true
    },
    protein: {
      numeric: true
    }
  }} cellOrder={['dessert', 'calories', 'fat', 'carbs', 'protein']} />
</Table>
```

## Common Use Cases

### User Management Table

사용자 관리에 활용할 수 있는 테이블입니다. 아바타, 역할 표시, 상태 인디케이터, 액션 버튼이 포함되어 있습니다.

```tsx
<Table aria-label="user management table" hoverRow>
  <thead>
    <tr>
      <th style={{
        width: '30%'
      }}>사용자</th>
      <th style={{
        width: '25%'
      }}>이메일</th>
      <th style={{
        width: '15%'
      }}>역할</th>
      <th style={{
        width: '15%'
      }}>상태</th>
      <th style={{
        width: '15%'
      }}>작업</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <Stack direction="row" spacing={2} alignItems="center">
          <Avatar size="sm" variant="soft" color="primary">
            김
          </Avatar>
          <Stack spacing={0}>
            <Typography level="title-sm">김철수</Typography>
            <Typography level="body-xs" color="neutral">
              kim@example.com
            </Typography>
          </Stack>
        </Stack>
      </td>
      <td>kim@example.com</td>
      <td>
        <Chip size="sm" variant="soft" color="primary">
          관리자
        </Chip>
      </td>
      <td>
        <Chip size="sm" variant="soft" color="success">
          활성
        </Chip>
      </td>
      <td>
        <Stack direction="row" spacing={1}>
          <IconButton size="sm" variant="plain">
            <EditIcon />
          </IconButton>
          <IconButton size="sm" variant="plain" color="danger">
            <DeleteIcon />
          </IconButton>
          <Dropdown>
            <MenuButton variant="plain" size="sm" sx={{
              minHeight: 'auto',
              p: 1
            }}>
            <MoreVertIcon />
          </MenuButton>
          <Menu placement="bottom-end">
            <MenuItem>상세 보기</MenuItem>
            <MenuItem>권한 변경</MenuItem>
            <MenuItem color="danger">계정 비활성화</MenuItem>
          </Menu>
        </Dropdown>
      </Stack>
    </td>
  </tr>
  <tr>
    <td>
      <Stack direction="row" spacing={2} alignItems="center">
        <Avatar size="sm" variant="soft" color="primary">
          이
        </Avatar>
        <Stack spacing={0}>
          <Typography level="title-sm">이영희</Typography>
          <Typography level="body-xs" color="neutral">
            lee@example.com
          </Typography>
        </Stack>
      </Stack>
    </td>
    <td>lee@example.com</td>
    <td>
      <Chip size="sm" variant="soft" color="neutral">
        사용자
      </Chip>
    </td>
    <td>
      <Chip size="sm" variant="soft" color="neutral">
        비활성
      </Chip>
    </td>
    <td>
      <Stack direction="row" spacing={1}>
        <IconButton size="sm" variant="plain">
          <EditIcon />
        </IconButton>
        <IconButton size="sm" variant="plain" color="danger">
          <DeleteIcon />
        </IconButton>
        <Dropdown>
          <MenuButton variant="plain" size="sm" sx={{
            minHeight: 'auto',
            p: 1
          }}>
          <MoreVertIcon />
        </MenuButton>
        <Menu placement="bottom-end">
          <MenuItem>상세 보기</MenuItem>
          <MenuItem>권한 변경</MenuItem>
          <MenuItem color="danger">계정 비활성화</MenuItem>
        </Menu>
      </Dropdown>
    </Stack>
  </td>
</tr>
<tr>
  <td>
    <Stack direction="row" spacing={2} alignItems="center">
      <Avatar size="sm" variant="soft" color="primary">
        박
      </Avatar>
      <Stack spacing={0}>
        <Typography level="title-sm">박민수</Typography>
        <Typography level="body-xs" color="neutral">
          park@example.com
        </Typography>
      </Stack>
    </Stack>
  </td>
  <td>park@example.com</td>
  <td>
    <Chip size="sm" variant="soft" color="warning">
      편집자
    </Chip>
  </td>
  <td>
    <Chip size="sm" variant="soft" color="success">
      활성
    </Chip>
  </td>
  <td>
    <Stack direction="row" spacing={1}>
      <IconButton size="sm" variant="plain">
        <EditIcon />
      </IconButton>
      <IconButton size="sm" variant="plain" color="danger">
        <DeleteIcon />
      </IconButton>
      <Dropdown>
        <MenuButton variant="plain" size="sm" sx={{
          minHeight: 'auto',
          p: 1
        }}>
        <MoreVertIcon />
      </MenuButton>
      <Menu placement="bottom-end">
        <MenuItem>상세 보기</MenuItem>
        <MenuItem>권한 변경</MenuItem>
        <MenuItem color="danger">계정 비활성화</MenuItem>
      </Menu>
    </Dropdown>
  </Stack>
</td>
</tr>
</tbody>
</Table>
```

### Product Inventory Table

제품 재고 관리를 위한 테이블입니다. 재고 상태, 가격 표시, 진행률 바 등을 포함합니다.

```tsx
<Table aria-label="product inventory table" hoverRow>
  <thead>
    <tr>
      <th style={{
        width: '25%'
      }}>제품명</th>
      <th style={{
        width: '15%'
      }}>카테고리</th>
      <th style={{
        width: '10%',
        textAlign: 'right'
      }}>재고</th>
      <th style={{
        width: '15%',
        textAlign: 'right'
      }}>가격</th>
      <th style={{
        width: '15%'
      }}>상태</th>
      <th style={{
        width: '20%'
      }}>진행률</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>MacBook Pro 16"</td>
      <td>노트북</td>
      <td style={{
        textAlign: 'right'
      }}>25</td>
      <td style={{
        textAlign: 'right'
      }}>₩2,590,000</td>
      <td>
        <Chip size="sm" variant="soft" color="success">
          재고 있음
        </Chip>
      </td>
      <td>
        <Box sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 2,
          minWidth: 120
        }}>
        <LinearProgress determinate value={85} sx={{
          flex: 1
        }} color="success" />
        <Typography level="body-xs">85%</Typography>
      </Box>
    </td>
  </tr>
  <tr>
    <td>iPhone 15 Pro</td>
    <td>스마트폰</td>
    <td style={{
      textAlign: 'right'
    }}>3</td>
    <td style={{
      textAlign: 'right'
    }}>₩1,550,000</td>
    <td>
      <Chip size="sm" variant="soft" color="warning">
        재고 부족
      </Chip>
    </td>
    <td>
      <Box sx={{
        display: 'flex',
        alignItems: 'center',
        gap: 2,
        minWidth: 120
      }}>
      <LinearProgress determinate value={15} sx={{
        flex: 1
      }} color="danger" />
      <Typography level="body-xs">15%</Typography>
    </Box>
  </td>
</tr>
<tr>
  <td>iPad Air</td>
  <td>태블릿</td>
  <td style={{
    textAlign: 'right'
  }}>0</td>
  <td style={{
    textAlign: 'right'
  }}>₩899,000</td>
  <td>
    <Chip size="sm" variant="soft" color="danger">
      품절
    </Chip>
  </td>
  <td>
    <Box sx={{
      display: 'flex',
      alignItems: 'center',
      gap: 2,
      minWidth: 120
    }}>
    <LinearProgress determinate value={0} sx={{
      flex: 1
    }} color="danger" />
    <Typography level="body-xs">0%</Typography>
  </Box>
</td>
</tr>
</tbody>
</Table>
```

### Task Management Table

프로젝트의 작업 관리를 위한 테이블입니다. 담당자, 우선순위, 진행률, 마감일 등을 표시합니다.

```tsx
<Table aria-label="task management table" hoverRow>
  <thead>
    <tr>
      <th style={{
        width: '30%'
      }}>작업</th>
      <th style={{
        width: '20%'
      }}>담당자</th>
      <th style={{
        width: '15%'
      }}>우선순위</th>
      <th style={{
        width: '20%'
      }}>진행률</th>
      <th style={{
        width: '15%'
      }}>마감일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <Stack spacing={0.5}>
          <Typography level="title-sm">UI 컴포넌트 개발</Typography>
          <Typography level="body-xs" color="neutral">
            새로운 테이블 컴포넌트 구현
          </Typography>
        </Stack>
      </td>
      <td>
        <Stack direction="row" spacing={1} alignItems="center">
          <Avatar size="sm" variant="soft">
            김
          </Avatar>
          <Typography level="body-sm">김개발</Typography>
        </Stack>
      </td>
      <td>
        <Chip size="sm" variant="soft" color="danger">
          높음
        </Chip>
      </td>
      <td>
        <Box sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 2
        }}>
        <LinearProgress determinate value={75} sx={{
          flex: 1,
          minWidth: 80
        }} color="success" />
        <Typography level="body-xs">75%</Typography>
      </Box>
    </td>
    <td>
      <Typography level="body-sm" color="neutral">
        2024-01-20
      </Typography>
    </td>
  </tr>
  <tr>
    <td>
      <Stack spacing={0.5}>
        <Typography level="title-sm">API 연동</Typography>
        <Typography level="body-xs" color="neutral">
          사용자 관리 API 연동 작업
        </Typography>
      </Stack>
    </td>
    <td>
      <Stack direction="row" spacing={1} alignItems="center">
        <Avatar size="sm" variant="soft">
          이
        </Avatar>
        <Typography level="body-sm">이백엔드</Typography>
      </Stack>
    </td>
    <td>
      <Chip size="sm" variant="soft" color="warning">
        중간
      </Chip>
    </td>
    <td>
      <Box sx={{
        display: 'flex',
        alignItems: 'center',
        gap: 2
      }}>
      <LinearProgress determinate value={50} sx={{
        flex: 1,
        minWidth: 80
      }} color="warning" />
      <Typography level="body-xs">50%</Typography>
    </Box>
  </td>
  <td>
    <Typography level="body-sm" color="neutral">
      2024-01-25
    </Typography>
  </td>
</tr>
<tr>
  <td>
    <Stack spacing={0.5}>
      <Typography level="title-sm">테스트 작성</Typography>
      <Typography level="body-xs" color="neutral">
        단위 테스트 및 통합 테스트
      </Typography>
    </Stack>
  </td>
  <td>
    <Stack direction="row" spacing={1} alignItems="center">
      <Avatar size="sm" variant="soft">
        박
      </Avatar>
      <Typography level="body-sm">박테스터</Typography>
    </Stack>
  </td>
  <td>
    <Chip size="sm" variant="soft" color="success">
      낮음
    </Chip>
  </td>
  <td>
    <Box sx={{
      display: 'flex',
      alignItems: 'center',
      gap: 2
    }}>
    <LinearProgress determinate value={25} sx={{
      flex: 1,
      minWidth: 80
    }} color="primary" />
    <Typography level="body-xs">25%</Typography>
  </Box>
</td>
<td>
  <Typography level="body-sm" color="neutral">
    2024-01-30
  </Typography>
</td>
</tr>
</tbody>
</Table>
```

### Sales Report with Cell Merging

복잡한 셀 병합을 사용한 매출 보고서 테이블입니다. rowSpan과 colSpan을 활용한 예제입니다.

```tsx
<Table aria-label="sales report table with merged cells">
  <thead>
    <tr>
      <th rowSpan={2} style={{
        textAlign: 'center',
        verticalAlign: 'middle',
        backgroundColor: '#f8f9fa',
        fontWeight: 600
      }}>
      지역
    </th>
    <th colSpan={2} style={{
      textAlign: 'center',
      backgroundColor: '#f8f9fa',
      fontWeight: 600
    }}>
    2024년 1분기
  </th>
  <th colSpan={2} style={{
    textAlign: 'center',
    backgroundColor: '#f8f9fa',
    fontWeight: 600
  }}>
  2024년 2분기
</th>
<th rowSpan={2} style={{
  textAlign: 'center',
  verticalAlign: 'middle',
  backgroundColor: '#f8f9fa',
  fontWeight: 600
}}>
증감률
</th>
</tr>
<tr>
  <th style={{
    textAlign: 'center',
    backgroundColor: '#f0f0f0',
    fontWeight: 500
  }}>매출</th>
  <th style={{
    textAlign: 'center',
    backgroundColor: '#f0f0f0',
    fontWeight: 500
  }}>목표대비</th>
  <th style={{
    textAlign: 'center',
    backgroundColor: '#f0f0f0',
    fontWeight: 500
  }}>매출</th>
  <th style={{
    textAlign: 'center',
    backgroundColor: '#f0f0f0',
    fontWeight: 500
  }}>목표대비</th>
</tr>
</thead>
<tbody>
  <tr>
    <td style={{
      fontWeight: 600
    }}>서울</td>
    <td style={{
      textAlign: 'right'
    }}>₩15,000만</td>
    <td style={{
      textAlign: 'center'
    }}>
    <Chip size="sm" variant="soft" color="success">
      105%
    </Chip>
  </td>
  <td style={{
    textAlign: 'right'
  }}>₩18,000만</td>
  <td style={{
    textAlign: 'center'
  }}>
  <Chip size="sm" variant="soft" color="success">
    120%
  </Chip>
</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="success">
  +20%
</Chip>
</td>
</tr>
<tr>
  <td style={{
    fontWeight: 600
  }}>부산</td>
  <td style={{
    textAlign: 'right'
  }}>₩8,500만</td>
  <td style={{
    textAlign: 'center'
  }}>
  <Chip size="sm" variant="soft" color="warning">
    95%
  </Chip>
</td>
<td style={{
  textAlign: 'right'
}}>₩9,200만</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="success">
  102%
</Chip>
</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="success">
  +8%
</Chip>
</td>
</tr>
<tr>
  <td style={{
    fontWeight: 600
  }}>대구</td>
  <td style={{
    textAlign: 'right'
  }}>₩6,200만</td>
  <td style={{
    textAlign: 'center'
  }}>
  <Chip size="sm" variant="soft" color="danger">
    88%
  </Chip>
</td>
<td style={{
  textAlign: 'right'
}}>₩7,100만</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="success">
  110%
</Chip>
</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="success">
  +15%
</Chip>
</td>
</tr>
<tr style={{
  backgroundColor: '#f8f9fa',
  fontWeight: 600
}}>
<td>합계</td>
<td style={{
  textAlign: 'right'
}}>₩29,700만</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="solid" color="primary">
  99%
</Chip>
</td>
<td style={{
  textAlign: 'right'
}}>₩34,300만</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="solid" color="primary">
  112%
</Chip>
</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="solid" color="success">
  +15%
</Chip>
</td>
</tr>
</tbody>
</Table>
```

### Comparison Table

플랜이나 제품을 비교하는 테이블입니다. 불린 값을 시각적으로 표현합니다.

```tsx
<Table aria-label="plan comparison table">
  <thead>
    <tr>
      <th style={{
        width: '25%'
      }}>기능</th>
      <th style={{
        width: '25%'
      }}>Basic 플랜</th>
      <th style={{
        width: '25%'
      }}>Pro 플랜</th>
      <th style={{
        width: '25%'
      }}>Enterprise 플랜</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <Typography level="title-sm" sx={{
          fontWeight: 600
        }}>
        사용자 수
      </Typography>
    </td>
    <td style={{
      textAlign: 'center'
    }}>최대 5명</td>
    <td style={{
      textAlign: 'center'
    }}>최대 50명</td>
    <td style={{
      textAlign: 'center'
    }}>무제한</td>
  </tr>
  <tr>
    <td>
      <Typography level="title-sm" sx={{
        fontWeight: 600
      }}>
      저장공간
    </Typography>
  </td>
  <td style={{
    textAlign: 'center'
  }}>10GB</td>
  <td style={{
    textAlign: 'center'
  }}>100GB</td>
  <td style={{
    textAlign: 'center'
  }}>1TB</td>
</tr>
<tr>
  <td>
    <Typography level="title-sm" sx={{
      fontWeight: 600
    }}>
    API 호출
  </Typography>
</td>
<td style={{
  textAlign: 'center'
}}>1,000/월</td>
<td style={{
  textAlign: 'center'
}}>10,000/월</td>
<td style={{
  textAlign: 'center'
}}>무제한</td>
</tr>
<tr>
  <td>
    <Typography level="title-sm" sx={{
      fontWeight: 600
    }}>
    고급 분석
  </Typography>
</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="neutral">
  ✗ 미포함
</Chip>
</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="success">
  ✓ 포함
</Chip>
</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="success">
  ✓ 포함
</Chip>
</td>
</tr>
<tr>
  <td>
    <Typography level="title-sm" sx={{
      fontWeight: 600
    }}>
    24/7 지원
  </Typography>
</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="neutral">
  ✗ 미포함
</Chip>
</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="neutral">
  ✗ 미포함
</Chip>
</td>
<td style={{
  textAlign: 'center'
}}>
<Chip size="sm" variant="soft" color="success">
  ✓ 포함
</Chip>
</td>
</tr>
<tr>
  <td>
    <Typography level="title-sm" sx={{
      fontWeight: 600
    }}>
    가격
  </Typography>
</td>
<td style={{
  textAlign: 'center'
}}>무료</td>
<td style={{
  textAlign: 'center'
}}>₩29,000/월</td>
<td style={{
  textAlign: 'center'
}}>문의</td>
</tr>
</tbody>
</Table>
```

### Empty State Table

데이터가 없을 때의 상태를 표시하는 테이블입니다.

```tsx
<Stack spacing={2}>
  <Stack direction="row" justifyContent="space-between" alignItems="center">
    <Typography level="title-lg">사용자 목록</Typography>
    <Button startDecorator={<AddIcon />} size="sm">
      새 사용자 추가
    </Button>
  </Stack>

  <Table aria-label="empty state table">
    <thead>
      <tr>
        <th style={{
          width: '25%'
        }}>이름</th>
        <th style={{
          width: '30%'
        }}>이메일</th>
        <th style={{
          width: '20%'
        }}>역할</th>
        <th style={{
          width: '15%'
        }}>상태</th>
        <th style={{
          width: '10%'
        }}>작업</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colSpan={5}>
          <Box sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            py: 8,
            gap: 2
          }}>
          <SearchIcon sx={{
            fontSize: 48,
            color: 'neutral.400'
          }} />
          <Stack spacing={1} alignItems="center">
            <Typography level="title-md" color="neutral">
              사용자가 없습니다
            </Typography>
            <Typography level="body-sm" color="neutral">
              새 사용자를 추가하여 시작해보세요.
            </Typography>
          </Stack>
          <Button variant="soft" startDecorator={<AddIcon />} size="sm">
            사용자 추가하기
          </Button>
        </Box>
      </td>
    </tr>
  </tbody>
</Table>
</Stack>
```

### Advanced Features Table

고급 기능들(고정 헤더, 스크롤, 반응형)을 포함한 테이블입니다.

```tsx
<Box sx={{
  maxHeight: 400,
  overflow: 'auto'
}}>
<Table aria-label="advanced features table" hoverRow stickyHeader sx={{
  '& th': {
    position: 'sticky',
    top: 0,
    backgroundColor: 'background.surface',
    zIndex: 1
  }
}}>
<thead>
  <tr>
    <th style={{
      width: '8%',
      textAlign: 'right'
    }}>ID</th>
    <th style={{
      width: '20%'
    }}>제품명</th>
    <th style={{
      width: '30%'
    }}>설명</th>
    <th style={{
      width: '12%'
    }}>카테고리</th>
    <th style={{
      width: '12%',
      textAlign: 'right'
    }}>가격</th>
    <th style={{
      width: '8%',
      textAlign: 'right'
    }}>재고</th>
    <th style={{
      width: '10%'
    }}>등록일</th>
  </tr>
</thead>
<tbody>
  {advancedRows.map(row => <tr key={row.id}>
  <td style={{
    textAlign: 'right'
  }}>{row.id}</td>
  <td>{row.name}</td>
  <td>
    <Typography level="body-sm" sx={{
      maxWidth: 200,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap'
    }}>
    {row.description}
  </Typography>
</td>
<td>{row.category}</td>
<td style={{
  textAlign: 'right'
}}>₩{Number(row.price).toLocaleString()}</td>
<td style={{
  textAlign: 'right'
}}>
<Chip size="sm" variant="soft" color={row.stock > 50 ? 'success' : row.stock > 10 ? 'warning' : 'danger'}>
  {row.stock}
</Chip>
</td>
<td>{row.createdAt}</td>
</tr>)}
</tbody>
</Table>
</Box>
```

### Drag and Drop Headers Table

@atlaskit/pragmatic-drag-and-drop을 사용하여 헤더를 드래그해서 컬럼 순서를 변경할 수 있는 테이블입니다.

```tsx
<Stack spacing={3}>
  <Stack spacing={1}>
    <Typography level="title-lg">드래그 앤 드롭 헤더 재정렬 테이블</Typography>
    <Typography level="body-sm" color="neutral">
      헤더를 드래그하여 컬럼 순서를 변경할 수 있습니다. 드래그 아이콘을 클릭하고 드래그하세요.
    </Typography>
  </Stack>

  <Table aria-label="drag and drop headers table" hoverRow>
    <thead>
      <tr>
        {columns.map((column, index) => <DraggableHeader key={column.key} columnKey={column.key} index={index} onReorder={handleReorder}>
        <Typography level="title-sm" fontWeight="lg">
          {column.label}
        </Typography>
      </DraggableHeader>)}
    </tr>
  </thead>
  <tbody>
    {sampleData.map(row => <tr key={`${row.name}-${row.email}`}>
    {columns.map(column => <td key={column.key} style={{
      width: column.width
    }}>
    {renderCellContent(column.key, row)}
  </td>)}
</tr>)}
</tbody>
</Table>

<Box sx={{
  mt: 2,
  p: 2,
  bgcolor: 'background.level1',
  borderRadius: 'sm'
}}>
<Typography level="body-sm" fontWeight="lg" sx={{
  mb: 1
}}>
현재 컬럼 순서:
</Typography>
<Typography level="body-sm" color="neutral">
  {columns.map(col => col.label).join(' → ')}
</Typography>
</Box>
</Stack>
```

## Detailed Code Examples

### Implementation Guidelines

위에서 보여준 Canvas 예제들은 실제 동작하는 컴포넌트들입니다. Table 컴포넌트는 두 가지 방식으로 사용할 수 있습니다:

#### 1. TableHead와 TableBody 사용 (간단한 데이터)

```tsx
import { Table, TableHead, TableBody } from '@ceed/ads';

function SimpleTable() {
  const headCells = [
    { label: '이름', width: '30%' },
    { label: '이메일', width: '40%' },
    { label: '역할', numeric: false },
  ];

  const rows = [
    { name: '김철수', email: 'kim@example.com', role: '관리자' },
    { name: '이영희', email: 'lee@example.com', role: '사용자' },
  ];

  return (
    <Table aria-label="simple table" hoverRow>
      <TableHead headCells={headCells} />
      <TableBody
        rows={rows}
        cellOrder={['name', 'email', 'role']}
      />
    </Table>
  );
}
```

#### 2. HTML 테이블 구조 사용 (복잡한 UI)

복잡한 UI 컴포넌트를 셀에 표현할 때는 HTML 테이블 구조를 직접 사용합니다:

```tsx
import { Table, Stack, Avatar, Typography, Chip, IconButton } from '@ceed/ads';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

function ComplexTable() {
  return (
    <Table aria-label="complex table" hoverRow>
      <thead>
        <tr>
          <th style={{ width: '30%' }}>사용자</th>
          <th style={{ width: '25%' }}>상태</th>
          <th style={{ width: '25%' }}>역할</th>
          <th style={{ width: '20%' }}>액션</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <Stack direction="row" spacing={2} alignItems="center">
              <Avatar size="sm" variant="soft" color="primary">김</Avatar>
              <Stack spacing={0}>
                <Typography level="title-sm">김철수</Typography>
                <Typography level="body-xs" color="neutral">
                  kim@example.com
                </Typography>
              </Stack>
            </Stack>
          </td>
          <td>
            <Chip size="sm" variant="soft" color="success">
              활성
            </Chip>
          </td>
          <td>관리자</td>
          <td>
            <Stack direction="row" spacing={0.5}>
              <IconButton size="sm" variant="plain">
                <EditIcon />
              </IconButton>
              <IconButton size="sm" variant="plain" color="danger">
                <DeleteIcon />
              </IconButton>
            </Stack>
          </td>
        </tr>
      </tbody>
    </Table>
  );
}
```

#### Cell Merging with rowSpan and colSpan

복잡한 테이블 레이아웃을 위해 직접 HTML 테이블 구조를 사용할 수 있습니다:

```tsx
<Table>
  <thead>
    <tr>
      <th rowSpan={2}>지역</th>
      <th colSpan={2}>2024년 1분기</th>
      <th colSpan={2}>2024년 2분기</th>
    </tr>
    <tr>
      <th>매출</th>
      <th>목표대비</th>
      <th>매출</th>
      <th>목표대비</th>
    </tr>
  </thead>
  {/* tbody content */}
</Table>
```

## Advanced Features

Table 컴포넌트는 다양한 고급 기능을 지원합니다:

### Sticky Headers

스크롤 시 헤더가 고정되는 기능:

```tsx
<Table stickyHeader sx={{
  '& th': {
    position: 'sticky',
    top: 0,
    backgroundColor: 'background.surface',
    zIndex: 1,
  }
}}>
  {/* Table content */}
</Table>
```

### Empty States

데이터가 없을 때의 적절한 빈 상태 표시:

```tsx
<tbody>
  <tr>
    <td colSpan={numberOfColumns}>
      <Box sx={{ py: 8, textAlign: 'center' }}>
        <Typography level="title-md">데이터가 없습니다</Typography>
        <Typography level="body-sm" color="neutral">
          새 항목을 추가하여 시작해보세요.
        </Typography>
      </Box>
    </td>
  </tr>
</tbody>
```

### Responsive Design

반응형 디자인을 위한 가이드:

```tsx
<Table sx={{
  '@media (max-width: 768px)': {
    '& td, & th': {
      fontSize: 'sm',
      px: 1,
    }
  }
}}>
  {/* Table content */}
</Table>
```

## Best Practices

1. **적절한 컴포넌트 선택**: 대용량 데이터는 DataTable, 복잡한 레이아웃은 Table을 사용하세요.

2. **접근성 고려**: 적절한 table 태그와 ARIA 속성을 사용하세요.

```tsx
<Table aria-label="사용자 목록">
  <thead>
    <tr>
      <th scope="col">이름</th>
      <th scope="col">이메일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">김철수</th>
      <td>kim@example.com</td>
    </tr>
  </tbody>
</Table>
```

3. **일관된 정렬**: 숫자 데이터는 우측 정렬, 텍스트는 좌측 정렬을 유지하세요.

4. **적절한 행 높이**: 콘텐츠에 따라 적절한 행 높이를 설정하세요.

5. **반응형 고려**: 모바일에서는 중요한 컬럼만 표시하거나 카드 형태로 변환하는 것을 고려하세요.

6. **성능 최적화**: 긴 목록의 경우 가상화나 페이지네이션을 고려하세요.

Table 컴포넌트는 구조화된 데이터를 표현하고 복잡한 레이아웃을 구현하는 데 매우 유용한 도구입니다. 적절한 사용법과 커스터마이징을 통해 다양한 요구사항을 충족할 수 있습니다.
