ScScrollTable

ScScrollTable 컴포넌트는 가상화(virtualization)를 활용해 대량의 데이터 행을 효율적으로 렌더링하며, 고정 헤더, 상하 패딩(Row Padding) 및 스크롤 컨테이너 높이 조절 기능을 제공합니다.

---

✅ 기본 사용법

이름	이메일	회사

<sc-scroll-table :items="items" :table-height="500" :row-height="40" :fixed-header="true">
  <template #thead>
    <tr>
      <th style="width: 200px">이름</th>
      <th style="width: 300px">이메일</th>
      <th>회사</th>
    </tr>
  </template>

  <template #tbody="{ item }">
    <td>{{ item.name }}</td>
    <td>{{ item.email }}</td>
    <td>{{ item.enterprise }}</td>
  </template>
</sc-scroll-table>

<script setup>
  import { ref } from 'vue';

  const items = ref(
    Array.from({ length: 5000 }).map((_, i) => ({
      id: i,
      name: 'Kim ' + i,
      email: `kim${i}@example.com`,
      enterprise: '(주) 가나다',
    }))
  );
</script>

---

🛠️ 속성 (Props)

이름	타입	기본값	설명
items	Array<Object>	[]	렌더링할 전체 데이터 배열
class	String	''	테이블(table)에 추가할 CSS 클래스
containerClass	String	''	최상위 스크롤 컨테이너(div)에 추가할 CSS 클래스
tableHeight	Number	500	스크롤 컨테이너 높이(px)
rowHeight	Number	50	각 데이터 행의 높이(px)
showRowSize	Number	0	이 값보다 items.length가 작거나 같으면 스크롤 비활성화, 높이 auto
fixedHeader	Boolean	false	true일 경우 <thead>를 sticky 헤더로 고정

---

📤 이벤트 (Emits)

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

---

🔳 슬롯 (Slots)

슬롯 이름	설명
colgroup	<colgroup> 요소를 직접 정의할 때 사용
thead	<thead> 내부의 헤더 행(Row)을 정의
tbody	각 행을 렌더링할 때 사용되며, slot props: { item, startIndex }
tbody-tr	<tr> 태그 전체를 커스터마이징할 때 사용, slot props: { visibleData, rowHeightPx, startIndex }

---

🎨 스타일 클래스

클래스 이름	설명
.sc-scroll-table	최상위 스크롤 컨테이너(div)
.sc-table	내부 <table> 기본 스타일
.fixed-header	fixedHeader 적용 시 <thead> sticky 고정 클래스
.unset-scroll-table	showRowSize 조건 만족 시 스크롤 해제 (overflow-y:hidden)
.sc-table-thead	헤더 <thead> 래퍼