@ceed/ads 1.13.4 → 1.15.0-next.2

package/dist/components/data-display/Table.md

@@ -0,0 +1,1330 @@
+# 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 컴포넌트는 구조화된 데이터를 표현하고 복잡한 레이아웃을 구현하는 데 매우 유용한 도구입니다. 적절한 사용법과 커스터마이징을 통해 다양한 요구사항을 충족할 수 있습니다.