WICKEDTeamWicked Design System / 컴포넌트
데이터 테이블
서버·청구서처럼 같은 속성을 가진 항목 비교을 위한 컴포넌트.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
| 선택 | 상태 | 메모리 | |
|---|---|---|---|
| 개발 서버 | 실행 중 | 2.4 GiB | |
| 문서 서버 | 실행 중 | 1.2 GiB | |
| 테스트 서버 | 중지됨 | 0 GiB |
TeamWicked 웹사이트 토큰으로 구성한 동작 예제예시 데이터 · API 미연결
목적과 사용
서버·청구서처럼 같은 속성을 가진 항목 비교에 사용합니다. 순차 폼을 표로 꾸미거나 필수 비교값을 여러 탭으로 숨기지 않습니다.
구성과 변형
표 제목, 열 머리글, 행, 정렬/필터, 선택·행 동작. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.
동작 규칙
- TBL-01 MUST: 열 이름·단위·정렬 상태를 명시합니다.
- TBL-02 MUST: 행 클릭과 내부 메뉴·선택·링크 동작이 충돌하지 않습니다.
- TBL-03 MUST: 선택된 범위와 일괄 작업 대상 수를 실행 전에 확인합니다.
- TBL-04 SHOULD: 좁은 화면에서 중요 열을 보존하고 나머지 정보의 접근 경로를 제공합니다.
콘텐츠 예시
좋음: CPU %, 메모리 GiB, 수집 시간 / 피함: 상태 없는 오래된 숫자.
우리 구현과 연결
TeamWicked 자체 웹사이트의 토큰과 CTA를 사용합니다. vPanel·Pterodactyl·Store의 구현은 WickedHost 체계에 속하며 이 체계의 컴포넌트를 정의하지 않습니다. 실행 예제의 원본 경로는 구현 코드 탭을 확인하세요.
상태와 검증
정렬·페이지·선택·지연 데이터·빈 결과·모바일·행 메뉴 키보드를 확인합니다.
일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.