데이터 그리드 (Sample)
<cf-data-grid>대규모 데이터셋을 효율적으로 표시하고 관리하기 위한 고성능 데이터 표 컴포넌트입니다. 본 페이지는 React 없이 HTML/CSS/JS로 구성된 예제입니다.
설치 방법
npm 또는 CDN을 통해 프로젝트에 쉽고 빠르게 구성 요소를 추가하세요.
npm install @cf-ui/data-grid
// Or via CDN
<script src='https://cdn.example.com/cf-data-grid.js'></script>
속성 (Properties)
| 속성명 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| data | Array<any> | [] | 그리드에 표시할 데이터 배열입니다. |
| columns | Column[] | undefined | 헤더 텍스트와 데이터 맵핑을 포함한 컬럼 정의입니다. |
| page-size | number | 15 | 페이지당 표시할 행의 개수입니다. |
사용 예시
Live
Preview Area
데이터 그리드 (Sample)
기본 설정
가장 기본적인 형태의 데이터 그리드 구성입니다.
<cf-data-grid
columns='[{"label": "ID", "key": "id"}, {"label": "이름", "key": "name"}]'
data='/api/users'
></cf-data-grid>
기본 컴포넌트
디자인 시스템에서 제공하는 기본 UI 요소들입니다.
Alerts
Info: 새로운 업데이트가 출시되었습니다. 버전 2.0을 확인해보세요.
Success: 변경사항이 성공적으로 저장되었습니다.
Warning: 네트워크 연결이 불안정합니다. 데이터를 백업하세요.
Error: 파일을 업로드하는 중 오류가 발생했습니다.
Form Controls
Accordion & FAQ
설정 페이지의 'API 관리' 탭에서 새로운 키를 생성할 수 있습니다. 생성된 키는 다시 조회할 수 없으니 안전한 곳에
보관하세요.
구독 관리 페이지에서 언제든지 요금제를 업그레이드하거나 다운그레이드할 수 있습니다. 변경 사항은 다음 결제 주기부터
적용됩니다.
네, Enterprise 플랜 사용자는 24/7 전담 기술 지원을 받을 수 있습니다. 일반 사용자는 커뮤니티 포럼을
이용해주세요.
Badges
Primary Badge
Secondary
Outline Blue
FILENAME.EXT
Loading...