ScTable

ScTable 컴포넌트는 컬럼 그룹, 헤더, 본문을 슬롯으로 제공하며, 고정 헤더(sticky) 및 테이블 높이 조절 기능을 지원합니다.

---

번호	이름	업체명	E-mail
1	Kim	(주) 가나다	kim@example.com
2	Lee	(주) HYBE	lee@example.com
3	Park	(주) YG	park@example.com
4	Song	(주) JYP	park@example.com
5	Ryu	(주) 플레디스	park@example.com
6	Yi	(주) 네이버	park@example.com
7	Jang	(주) 구글코리아	park@example.com
8	Yang	(주) 삼성	park@example.com

<sc-table>
  <template #thead>
    <tr>
      <th style="width: 80px; text-align: center">번호</th>
      <th style="width: 130px; text-align: center">이름</th>
      <th style="text-align: center">업체명</th>
      <th style="width: 200px; text-align: center">E-mail</th>
    </tr>
  </template>

  <tr v-for="(item, idx) in items" :key="item.id">
    <td class="text-center">{{ idx + 1 }}</td>
    <td class="text-center">{{ item.name }}</td>
    <td style="text-align: left">{{ item.enterprise }}</td>
    <td style="text-align: left">{{ item.email }}</td>
  </tr>
</sc-table>

<script setup>
import {reactive} from "vue";

const items = reactive([
  { id: '1', name: 'Kim', email: 'kim@example.com', enterprise: '(주) 가나다' },
  { id: '2', name: 'Lee', email: 'lee@example.com', enterprise: '(주) HYBE' },
  { id: '3', name: 'Park', email: 'park@example.com', enterprise: '(주) YG' },
  { id: '4', name: 'Song', email: 'park@example.com', enterprise: '(주) JYP' },
  { id: '5', name: 'Ryu', email: 'park@example.com', enterprise: '(주) 플레디스' },
  { id: '6', name: 'Yi', email: 'park@example.com', enterprise: '(주) 네이버' },
  { id: '7', name: 'Jang', email: 'park@example.com', enterprise: '(주) 구글코리아' },
  { id: '8', name: 'Yang', email: 'park@example.com', enterprise: '(주) 삼성' }
]);
</script>

✨ 사용 예시 모음

▸ 고정 헤더 & 높이 지정 sticky

번호	이름	업체명	E-mail
1	Kim	(주) 가나다	kim@example.com
2	Lee	(주) HYBE	lee@example.com
3	Park	(주) YG	park@example.com
4	Song	(주) JYP	park@example.com
5	Ryu	(주) 플레디스	park@example.com
6	Yi	(주) 네이버	park@example.com
7	Jang	(주) 구글코리아	park@example.com
8	Yang	(주) 삼성	park@example.com

<sc-table sticky height="200">
  <template #thead>
    <tr>
      <th style="width: 80px">번호</th>
      <th style="width: 130px">이름</th>
      <th>업체명</th>
      <th style="width: 200px">E-mail</th>
    </tr>
  </template>

  <tr v-for="(item, idx) in items" :key="item.id">
    <td class="text-center">{{ idx + 1 }}</td>
    <td class="text-center">{{ item.name }}</td>
    <td>{{ item.enterprise }}</td>
    <td>{{ item.email }}</td>
  </tr>
</sc-table>

---

🛠️ Props

이름	타입	기본값	설명
type	String	'default'	테이블 스타일 타입 (현재 'default'만 지원)
sticky	Boolean	false	헤더를 상단에 고정(sticky)
height	Number | String	''	테이블 컨테이너 높이(px). 지정 시 스크롤 활성화

---

📤 이벤트 (Emits)

ScTable는 커스텀 이벤트를 방출하지 않습니다.

---

🔳 슬롯 (Slots)

이름	설명
colgroup	<colgroup> 엘리먼트로 컬럼 너비를 정의합니다
thead	<thead> 엘리먼트로 테이블 헤더를 작성합니다
default	<tbody> 내 기본 행(Row) 마크업을 작성합니다
tbody	<tbody> 엘리먼트를 직접 정의하며, 기본 본문은 숨김 처리됩니다

---

🎨 스타일 클래스

클래스명	설명
.sc-table	컴포넌트 최상위 <table> 클래스
.sc-table-colgroup	<colgroup> 래퍼
.sc-table-thead	<thead> 래퍼
.header-sticky	sticky 모드 시 적용되는 헤더 고정 클래스
.sc-table-tbody	기본 <tbody> 래퍼