목록 화면 (List)
한눈에 보기
목록 화면은 엑셀 시트처럼 데이터를 표(그리드) 형태로 보여주는 화면입니다. 검색, 필터, 정렬, 인라인 편집, 일괄 처리 등 강력한 기능을 제공합니다.
소개
목록 화면은 가장 기본적이면서 가장 많이 사용하는 화면 타입입니다. 품목 목록, 주문 내역, 재고 현황 등 여러 건의 데이터를 한눈에 보고 관리할 때 사용합니다.
이렇게 보입니다
전체 화면
목록 화면의 전체 모습입니다. 상단에 검색/필터, 가운데에 데이터 그리드, 하단에 페이지네이션이 배치됩니다.
품목 목록
| 품목코드 | 품목명 | 분류 | 단가 | 사용여부 | |
|---|---|---|---|---|---|
| A001 | 볼트M8 | 원자재 | 1,500 | ✔ | |
| A002 | 너트M8 | 원자재 | 800 | ✔ | |
| A003 | 와셔M8 | 원자재 | 500 | ✔ | |
| B001 | 프레임 | 반제품 | 25,000 | ✔ | |
| B002 | 케이스 | 반제품 | 15,000 | ✘ |
주요 기능
인라인 편집
목록에서 셀을 직접 클릭하여 값을 수정할 수 있습니다. 별도 양식 화면을 열지 않아도 됩니다.
인라인 편집이 활성화된 목록에서는:
- 셀을 더블클릭하면 편집 모드로 전환됩니다
- 값을 수정하고 Enter 또는 Tab을 누르면 저장됩니다
- Esc를 누르면 수정이 취소됩니다
| 컬럼 타입 | 인라인 편집 모습 |
|---|---|
| VARCHAR | 텍스트 입력 필드 |
| DECIMAL | 숫자 입력 필드 |
| BOOLEAN | 토글 스위치 |
| ENUM | 드롭다운 선택 |
| DATE | 달력 선택기 |
팁
간단한 수정은 인라인 편집으로, 복잡한 수정은 양식 화면으로 처리하세요. 인라인 편집은 속성 패널에서 활성화/비활성화할 수 있습니다.
검색과 필터
필터 버튼을 클릭하면 컬럼별 상세 필터 패널이 나타납니다.
| 기능 | 설명 |
|---|---|
| 통합 검색 | 상단 검색창에 키워드 입력 → 전체 컬럼에서 검색 |
| 컬럼별 필터 | 특정 컬럼의 조건으로 필터링 (예: 분류 = "원자재") |
| 복합 필터 | 여러 조건을 AND/OR로 조합 |
| 필터 저장 | 자주 사용하는 필터 조합을 저장 |
필터 조건 종류:
| 조건 | 적용 타입 | 예시 |
|---|---|---|
| 같음 / 다름 | 모든 타입 | 분류 = "원자재" |
| 포함 / 시작 / 끝 | VARCHAR, TEXT | 품목명에 "볼트" 포함 |
| 크다 / 작다 | INT, DECIMAL, DATE | 단가 > 1,000 |
| 범위 | INT, DECIMAL, DATE | 등록일 2025-01-01 ~ 2025-03-31 |
| 비어있음 / 비어있지 않음 | 모든 타입 | 비고가 비어있지 않음 |
그룹핑
컬럼 헤더를 그룹 영역으로 드래그하면 해당 컬럼 값으로 데이터가 그룹핑됩니다.
그룹핑 기능으로 데이터를 카테고리별로 묶어서 볼 수 있습니다:
▾ 분류: 원자재 (3건)
A001볼트M81,500
A002너트M8800
A003와셔M8500
▾ 분류: 반제품 (2건)
B001프레임25,000
B002케이스15,000
일괄 처리
체크박스로 여러 행을 선택한 후 일괄 처리(삭제, 상태변경 등)를 수행할 수 있습니다.
| 기능 | 설명 |
|---|---|
| 일괄 삭제 | 선택한 행을 한꺼번에 삭제 |
| 일괄 수정 | 선택한 행의 특정 컬럼 값을 한꺼번에 변경 |
| 내보내기 | 선택한 행을 CSV/Excel로 다운로드 |
정렬과 페이지네이션
| 기능 | 방법 |
|---|---|
| 오름차순 정렬 | 컬럼 헤더 클릭 (▲) |
| 내림차순 정렬 | 컬럼 헤더 다시 클릭 (▼) |
| 다중 정렬 | Shift + 컬럼 헤더 클릭 |
| 페이지 크기 | 10, 20, 50, 100건 중 선택 |
| 페이지 이동 | 하단 페이지 번호 클릭 |
설정 방법
표시 컬럼 설정
속성 패널에서 목록에 표시할 컬럼을 선택하고 순서를 정합니다.
| 설정 | 설명 |
|---|---|
| 표시 컬럼 | 목록에 보여줄 컬럼 선택 |
| 컬럼 순서 | 드래그로 순서 변경 |
| 컬럼 너비 | 각 컬럼의 기본 너비 |
| 컬럼 고정 | 좌측 고정 컬럼 설정 |
| 인라인 편집 | 컬럼별 편집 허용 여부 |
기본 정렬 설정
데이터가 처음 표시될 때의 정렬 순서를 지정합니다.
행 클릭 동작
목록에서 행을 클릭했을 때의 동작을 설정합니다:
- 양식 열기: 클릭한 행의 양식 화면으로 이동
- 상세 열기: 클릭한 행의 상세 화면으로 이동
- 팝업: 팝업 창으로 상세 정보 표시
- 없음: 행 클릭 시 아무 동작 없음
실무 예시
상황: 구매팀에서 품목 마스터를 관리합니다.
목록 화면 설정:
- 표시 컬럼: 품목코드, 품목명, 분류, 단가, 단위, 사용여부
- 인라인 편집: 단가, 사용여부만 허용
- 기본 정렬: 품목코드 오름차순
- 행 클릭: 양식 화면으로 이동
- 필터: 분류별 빠른 필터