SYIDAX / DATA GRID

로딩과 빈 결과

조회 중, 데이터 없음, 검색 결과 없음 상태를 구분합니다.

시작하기
로딩과 빈 결과샘플 주문 데이터
120 rows
Grid를 불러오는 중입니다…

옵션

아래 항목을 바꾸면 Grid와 코드에 바로 반영됩니다.

최근 결과

이 예제는 주문을 불러오고 있습니다라는 로딩 상태로 시작합니다. 실제 네트워크 요청을 기다리는 상태는 아닙니다.

코드 보기
현재 미리보기

사용 가이드

#

데이터를 가져오는 중인지, 검색 결과가 없는지 사용자가 구분할 수 있도록 표 위에 상태 안내를 표시합니다.

직접 해보기

  1. 로딩 화면 확인

    이 예제는 주문을 불러오고 있습니다라는 로딩 상태로 시작합니다. 실제 네트워크 요청을 기다리는 상태는 아닙니다.

  2. 주문 목록 표시

    표 아래 로딩 표시를 끄세요. 준비된 샘플 주문이 나타납니다.

  3. 빈 검색 결과 만들기

    주문 검색에 존재하지 않는 문자열을 입력하세요. 검색어를 지우면 데이터가 다시 나타나는지 확인합니다.

확인할 결과

로딩 안내, 정상 목록, 검색 결과 없음 상태의 차이를 확인할 수 있습니다.

실제 앱에서는 요청을 시작할 때 loading을 켜고 성공·실패 시 끄세요. 원본 데이터가 빈 경우와 검색으로 행이 사라진 경우도 구분해 안내하세요.

알아두면 쉬운 용어

loading
데이터를 기다리는 상태를 표시하는 설정입니다.
오버레이
표 위에 겹쳐 표시하는 상태 안내 영역입니다.

API reference

#

나머지 속성8
Attribute / Property타입 / 기본값설명
showEmptyState
boolean기본값 trueRender the wrapper empty-state overlay.
emptyMessage
string기본값 undefinedMessage shown when source row data is empty.
noMatchesMessage
string기본값 undefinedMessage shown when filters hide every row.
clearFiltersLabel
string기본값 undefinedLabel for the no-matches clear-filters action.
boolean기본값 falseExternal loading flag for spinner, debounce, and interaction lock.
loadingMessage
string기본값 undefinedMessage rendered beside the loading spinner.
loadingMode
LoadingMode기본값 'manual'Loading-mode switch for manual, auto, or host-owned loading UI.
minLoadingDuration
number기본값 DEFAULT_MIN_LOADING_DURATION_MSMinimum visible duration for the loading spinner in ms.
이벤트1
이벤트detail 타입설명
GridEmptyStateActionDetailFires when an empty-state overlay action is clicked.