syidaxgrid
홈 가격 내 정보
SYIDAX / DATA GRID

행 상세 PRO

표의 맥락을 유지하면서 행의 상세 내용을 펼칩니다.

시작하기
행 상세샘플 주문 데이터
120 rows
Grid를 불러오는 중입니다…

옵션

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

Pro 기능을 제품에 적용하려면 Pro 라이선스가 필요합니다.

최근 결과

이 예제는 행 상세 기능이 켜져 있습니다. 주문 행의 펼침 버튼을 누르세요.

코드 보기
현재 미리보기

사용 가이드

#

주문 목록에서 한 주문의 추가 정보만 펼쳐 보고 싶을 때 사용합니다. 다른 화면으로 이동하지 않고 상세 영역을 열 수 있습니다.

직접 해보기

  1. 행 펼침 버튼 찾기

    이 예제는 행 상세 기능이 켜져 있습니다. 주문 행의 펼침 버튼을 누르세요.

  2. 상세 영역 확인

    선택한 주문 아래에 나타나는 상세 영역을 살펴보세요. 다른 주문의 상세도 열어 각 행과 연결되어 있는지 확인합니다.

  3. 접고 다시 열기

    펼침 버튼을 다시 눌러 상세를 접으세요. 표 아래 행 상세 옵션을 끄면 상세 기능을 비교할 수 있습니다.

확인할 결과

선택한 주문과 연결된 상세 영역이 목록 안에서 열리고 닫힙니다.

이 샘플은 기본 상세 영역의 동작을 보여 줍니다. 배송 이력이나 품목 목록을 넣으려면 앱에서 상세 렌더러·데이터 조회를 연결하세요.

알아두면 쉬운 용어

master / detail
목록의 원본 행 / 그 행의 추가 정보 영역입니다.
detailCellRenderer
상세 영역에 보여 줄 UI를 만드는 설정입니다.

제품에 이 기능을 적용하려면 Pro 런타임과 유효한 라이선스가 필요합니다.

API reference

#

나머지 속성6
Attribute / Property타입 / 기본값설명
PRO
masterDetail		boolean기본값 falsemaster-detail (single level, AG `masterDetail` parity): data rows gain an expand chevron in the first column; an expanded master is followed by a full-width detail row. Detail rows never count toward pagination (AG default). Expansion state keys off the canonical row id — provide `getRowId` for stability across filters (index-fallback ids shift, same caveat as selection). The detail panel renderer/slot lands ; until then the shell shows the master row's data.
PRO
detailRowHeight		number기본값 160pixel height of an expanded detail row (default 160).
PRO
detailCellRenderer		(params: { row: Record<string, unknown>; rowId: string | number }) => CellRenderOutput기본값 undefineddetail panel renderer (function prop, AG `detailCellRenderer` parity). Returns the SAME discriminated output as cell renderers: `{kind:'text'}` (safe text), `{kind:'html'}` (trusted innerHTML — the host owns sanitisation, same contract as `cellRenderer`), or `{kind:'vnode'}`. Without it — or when it throws or returns an invalid shape (warned once) — the built-in field-list shell renders as the fallback.
PRO
detailGridOptions		DetailGridOptions기본값 undefineddeclarative (nested) detail grid. When set alongside (and no , which wins), each expanded master's panel auto-mounts a child `<sy-grid>` configured by this object and fed `getDetailRowData(master)`. A config whose `masterDetail` + `detailGridOptions` are set nests grids further — the ergonomic path a plain-JS host cannot take via `detailCellRenderer` (it cannot build a child-grid vnode). Nesting is capped at levels (self-referential-config guard).
PRO
getDetailRowData		(params: { row: Record<string, unknown>; rowId: string | number }) => unknown[] | Promise<unknown[]>기본값 undefinedfetch the child rows for an expanded master (used with ). Returns the rows synchronously OR a `Promise` . Called ONCE per open (the result is cached per master id and released on collapse), so an async fetch fires exactly once.
PRO
detailNestingLevel		number기본값 0this grid's depth in a master-detail nesting chain (0 = the top grid). The parent sets it on each auto-mounted child; the renderer stops recursing at .
이벤트3
이벤트detail 타입설명
PRO
{ rowId: string | number; expanded: boolean }fires when a master row's detail expands or collapses.
PRO
{ rowId: string | number; master: GridRow | null }a master's detail was OPENED: its panel (and, with , the child grid) mounts on the next render. `master` is the master row when it is on the current filtered set, else `null`. Pairs with so a host can create / dispose per-detail resources (subscriptions, a child-grid ref, etc.).
PRO
{ rowId: string | number }a master's detail was CLOSED: its panel / child grid unmounts.
메서드3
메서드 / 인수반환 타입설명
PRO
rowId: string | number, expanded: boolean		Promise<void>expand/collapse one master row's detail panel. Unknown ids warn + no-op (same validation discipline as row groups/tree nodes).
PRO
Promise<void>expand every master's detail across the WHOLE filtered set (all pages — AG's forEachNodeAfterFilter convention; one `detailRowToggled` per change).
PRO
Promise<void>collapse every open detail row.
GridTab 이동 Enter 열기