테이블

데이터 테이블 컴포넌트

기본 사용법

HTML table 태그를 사용하면 Podo UI의 기본 스타일이 자동으로 적용됩니다.

HTML

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>이메일</th>
      <th>역할</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>hong@example.com</td>
      <td>관리자</td>
    </tr>
    <tr>
      <td>김철수</td>
      <td>kim@example.com</td>
      <td>사용자</td>
    </tr>
  </tbody>
</table>

실제 예제:

이름	이메일	역할
홍길동	hong@example.com	관리자
김철수	kim@example.com	사용자
이영희	lee@example.com	사용자

List 스타일

.list 클래스를 추가하면 행에 호버 효과가 적용되어 클릭 가능한 목록처럼 보입니다.

실제 예제 (행에 마우스를 올려보세요):

제목	작성자	작성일
공지사항 제목입니다	관리자	2024-01-15
게시글 제목입니다	사용자1	2024-01-14
또 다른 게시글	사용자2	2024-01-13

Border 스타일

.border 클래스를 추가하면 각 셀에 하단 테두리가 표시됩니다.

실제 예제:

상품명	가격	재고
상품 A	10,000원	50
상품 B	20,000원	30
상품 C	15,000원	100

Fill 스타일

.fill 클래스를 추가하면 행에 배경색이 적용됩니다.

실제 예제:

이름	부서	직급
홍길동	개발팀	팀장
김철수	디자인팀	대리
이영희	마케팅팀	과장

복합 스타일

여러 클래스를 조합하여 사용할 수 있습니다. .list.fill은 배경색과 호버 효과를 모두 적용합니다.

실제 예제 (.list.fill):

순위	이름	점수
1	김OO	95
2	이OO	92
3	박OO	88

SCSS에서 사용하기

component.module.scss

@use 'podo-ui/mixin' as *;

table {
  width: 100%;
  border-collapse: separate;
  border-radius: r(2);
  border: 1px solid color(border);

  // 리스트 스타일 (호버 효과)
  &.list > tbody > tr {
    &:hover {
      cursor: pointer;
      background-color: color(default-fill);
    }
  }

  // 테두리 스타일
  &.border > thead,
  &.border > tbody {
    > tr > th,
    > tr > td {
      border-bottom: 1px solid color(border);
    }
  }

  // Fill 스타일
  &.fill > thead,
  &.fill > tbody {
    > tr {
      background-color: color(default-fill);
    }
  }

  // 셀 패딩
  > thead,
  > tbody {
    > tr {
      > th,
      > td {
        padding: s(3) s(4);
        text-align: left;
      }
    }
  }
}