로딩과 빈 데이터

comins-table@0.2.2

0.2.2부터 렌더링의 표준 경로는 .render입니다. 기존 속성은 0.x에서 유지하며 1.0.0 제거 대상으로 안내합니다. 전환 규칙을 참고하십시오.

CominsTable은 loading, loadingContent.render, emptyContent.render, persistHeaderWhenEmpty, skeletonRowCount로 로딩과 빈 데이터 표시를 제어합니다. Application은 fetch lifecycle을 소유하고 응답을 controlled data에 매핑합니다.

const [rows, setRows] = useState<PersonRow[]>([]);
const [loadingMode, setLoadingMode] = useState<"initial" | "ready" | "refetch">("initial");

async function loadRows(mode: "initial" | "ready" | "refetch", empty = false) {
  setLoadingMode(mode);
  if (mode === "initial") setRows([]);

  try {
    const response = await fetch(`/api/users?limit=30&skip=${empty ? 10000 : 0}`);
    const result = await response.json();
    setRows(result.users.map(toPersonRow));
  } finally {
    setLoadingMode("ready");
  }
}

<CominsTable
  columns={columns}
  data={rows}
  emptyContent={{ render: () => (<span>표시할 데이터가 없습니다.</span>) }}
  getRowId={(row) => row.id}
  loading={loadingMode === "initial" || loadingMode === "refetch"}
  loadingContent={{ render: () => (<span>데이터를 갱신하는 중입니다.</span>) }}
  persistHeaderWhenEmpty
  skeletonRowCount={5}
/>

초기 로딩처럼 data가 비어 있고 loading이 true이면 skeleton row를 출력합니다. 이미 표시 중인 row가 있고 loading이 true이면 기존 row를 유지하고 overlay 상태만 표시합니다.

emptyContent.render는 loading이 false이고 표시할 row가 없을 때 출력합니다. persistHeaderWhenEmpty의 기본값은 true이며, 빈 데이터와 초기 로딩 상태에서도 Header 구조를 유지합니다.

Playground는 Infinite Scroll 예제와 같은 DummyJSON /users datasource를 사용합니다. Initial과 ready는 첫 page를 요청하고 Empty control은 범위를 벗어난 실제 빈 응답을 매핑합니다. 실제 application은 다른 endpoint를 사용할 수 있으며 교체된 요청을 취소하고 오래된 응답을 무시해야 합니다.

skeletonRowCount는 skeleton row 개수만 제어합니다. Virtualized table에서 실제 row 높이는 계속 rowHeight, --comins-table-row-height, --comins-table-cell-height 계약을 따릅니다.

Client-side Column Filtering은 이미 controlled인 dataset에서 일반 loading과 loadingContent.render presentation을 사용할 수 있습니다. Infinite Scroll, Lazy Load, loadingMore 또는 해당 request callback과는 결합할 수 없으며 remote filtering은 application이 소유합니다.

---

실행 가능한 대표 예제 · 배포 기준 원본 가이드