DGDataGrid 🌙 Dark

Components

디자인 시스템 갤러리 — 그리드를 구성하는 시각 요소와 상태. 모든 색·크기는 .dg-root의 CSS 커스텀 프로퍼티 토큰에서 나옵니다.

Design Tokens

라이트 테마 기본값. .dg-theme-dark가 전체 토큰을 재정의합니다.

Header Cell States

기본 · 정렬(오름/내림, 다중 정렬 배지) · 필터 활성 · 메뉴 버튼.

Floating Filter Row

floatingFilter: true — 헤더 아래 인라인 필터 행 (text 입력 · set 드롭다운 · number 입력).

Row States

기본 · 호버 · 선택 · 포커스 셀 · 얼룩말(zebra) 홀수 행.

Group & Summary Rows

행 그룹핑의 그룹 헤더 행(펼침/접힘, 중첩 들여쓰기, 집계값)과 grandTotal 전체 요약 행.

Server-Side Group Rows

자식 블록을 받는 중인 그룹(셰브론이 스피너로 회전), 건수를 모르는 그룹(groupCountField 부재 — 배지 생략), 블록의 다음 페이지를 이어 받는 ‘더 보기’ 행(로딩 상태 포함).

Advanced Filter — 요약 바 · 빌더

advancedFilter의 상시 요약 바(조건 없음 · 조건 있음 · 무시된 조건 배지)와 빌더의 조건 행/그룹 행. 바는 1줄 고정이라 긴 식은 말줄임으로 잘리고 전체는 툴팁·빌더에서 봅니다.

Checkbox

unchecked · checked · indeterminate(헤더 전체 선택의 부분 상태) · disabled.

Radio Editor Panel

editor: 'radio'가 셀 아래(공간이 없으면 위)에 펼치는 단일 선택 패널. multiselect 패널과 배경/그림자 토큰을 공유하고, 라디오의 unchecked · checked · focus 링은 체크박스와 동일한 토큰을 씁니다.

Multiselect Editor Panel

editor: 'multiselect'가 셀 아래(공간이 없으면 위)에 펼치는 체크리스트 패널. 메뉴와 같은 배경/그림자 토큰을 씁니다.

Searchable Select Editor Panel

editor: 'select' + editorSearch가 셀 아래(공간이 없으면 위)에 펼치는 검색 패널. 검색 입력은 input 토큰, 활성 옵션은 --dg-selected-row-background-color를 씁니다. lazy 검색(fetch) 중에는 Loading 메시지 행이 표시됩니다.

Searchable Multiselect Editor Panel

editor: 'multiselect' + editorSearch (v2.25). 고른 값이 검색창 위에 칩으로 상시 표시되므로, 필터로 목록에서 가려진 선택도 눈에 남습니다 (아래 왼쪽 견본의 CSS·Python은 목록에 없지만 칩으로 남아 있습니다). 칩은 renderers.multiselect()와 같은 dg-tag-plain이라 편집 중과 편집 후의 모양이 같습니다. 목록의 체크박스는 표시 전용이라 pointer-events: none이고, 클릭은 항상 옵션 행이 받습니다.

Tag / Badge Cell Renderer

DataGrid.renderers.tag(colorMap) — 상태 값을 색상 배지로 표시. 점 없는 dg-tag-plain은 renderers.multiselect()의 label 칩입니다.

Filter Menu

헤더 메뉴 버튼으로 여는 컬럼 필터 팝업(텍스트/숫자/셋 변형).

Pagination Panel

페이지 크기 · 행 범위 요약 · 이동 버튼(현재 페이지 강조, 말줄임).

Infinite Scroll Status Bar

infiniteScroll의 하단 상태 바. 세 상태 모두 높이가 같아서 로드가 끝나거나 마지막에 닿아도 그리드가 흔들리지 않습니다. 마지막 상태만 배경·글자색·굵기로 강조합니다. 왼쪽은 한 번에 받을 행 수를 바꾸는 선택 UI(페이저가 없으므로 그 자리를 대신합니다)이며 로드 중에는 비활성됩니다.

Overlays

로딩 스피너와 빈 상태 패널.

Evaluation Watermark

라이선스 키 미등록/비정상 상태의 평가판 배지 (.dg-watermark). 그리드 우하단 고정, pointer-events: none — 평가 사용을 방해하지 않는다. 문구는 localeText.watermark로 교체.

Inline Cell Editor

편집 중인 셀 — 액센트 보더의 인라인 인풋. validator가 거부하면 dg-invalid 상태(빨간 보더, 메시지는 title 툴팁).

Column Group Headers (2단 / 3단)

columnGroups가 컬럼 헤더 위에 얹는 그룹 줄. 중첩하면 줄이 하나 더 생겨 3단이 됩니다. 자식 그룹이 없는 구간(dg-header-group-cont)은 위 칸의 몸통이라 가로선을 지워 한 칸처럼 보이고, 라벨은 두 줄의 가운데에 놓입니다. 어떤 그룹에도 안 속한 구간은 dg-header-group-empty로 비워 둡니다.

All Together — Live

위 컴포넌트들이 실제 인스턴스에서 조합된 모습.