React 계층형 그리드 열 고정

    The Ignite UI for React Column Pinning feature in React Hierarchical Grid enables developers to lock specific columns in a desired order, ensuring visibility all the time even when users scroll horizontally through the IgrHierarchicalGrid. There’s an integrated UI for Column Pinning, accessible via the React Hierarchical Grid toolbar. Additionally, developers have the flexibility to build a custom user interface which changes the pin state of the columns.

    React Hierarchical Grid Column Pinning Example

    이 예시는 한 열 또는 여러 열을 왼쪽 또는 오른쪽IgrHierarchicalGrid에 고정하는 방법을 보여줍니다.

    Column Pinning API

    컬럼 핀닝은 의pinned 속성에 의해IgrColumn 제어됩니다. 고정된 열은 기본적으로 왼쪽IgrHierarchicalGrid에 렌더링되며, 고정되지 않은 열IgrHierarchicalGrid을 가로 스크롤하여 고정 상태를 유지합니다.

    <IgrHierarchicalGrid data={nwindData} autoGenerate={false}>
    <IgrColumn field="CompanyName" pinned={true}></IgrColumn>
    <IgrColumn field="ContactName"></IgrColumn>
    <IgrColumn field="ContactTitle"></IgrColumn>
</IgrHierarchicalGrid>

    또한 열을 필드 이름으로 고정하거나 해제하는 방법이나 방법IgrHierarchicalGrid 들을 사용할pinColumn​unpinColumn​IgrHierarchicalGrid 수도 있습니다:

    gridRef.current.pinColumn('Artist');
gridRef.current.unpinColumn('Debut');

    두 메서드 모두 해당 작업의 성공 여부를 나타내는 부울 값을 반환합니다. 일반적으로 실패하는 이유는 열이 이미 원하는 상태에 있기 때문입니다.

    가장 오른쪽 고정된 열의 오른쪽에 열이 고정되어 있습니다. 고정된 열의 순서를 변경하려면 이벤트에ColumnPin 가입하고 이벤트 인자의 속성을 원하는 위치 인덱스로 변경InsertAtIndex 하면 가능합니다.

    const columnPinning = (event: IgrPinColumnCancellableEventArgs) = {
    if (event.detail.column.field === 'Name') {
        event.detail.insertAtIndex = 0;
    }
}

    Pinning Position

    구성 옵션을 통해pinning 열의 고정 위치를 변경할 수 있습니다. 열의 위치를 시작 또는 끝으로 설정할 수 있습니다. End로 설정하면 열은 고정되지 않은 열들 다음, 그리드 끝에 렌더링됩니다. 고정되지 않은 열은 가로로 스크롤할 수 있고, 고정된 열은 오른쪽에 고정되어 있습니다.

    const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End };

    <IgrHierarchicalGrid data={nwindData} autoGenerate={true} pinning={pinningConfig}></IgrHierarchicalGrid>

    Demo

    Column Pinning on Both Sides

    또한, 각 열의 핀 위치를 따로 지정할 수 있어, 격자 양쪽에 열을 고정하여 데이터 세트의 편의와 최적화를 쉽게 할 수 있습니다. 자세한 내용은 아래 데모를 참고해 주세요. 열을 고정하려면 헤더를 클릭해 툴바에 추가된 핀 버튼을 사용해 열을 선택하거나, 단순히 고정된 다른 열로 드래그해 주세요.

    Custom Column Pinning UI

    관련 API를 통해 사용자 정의 UI를 정의하고 열의 핀 상태를 변경할 수 있습니다.

    도구 모음 대신 최종 사용자가 클릭하여 특정 열의 핀 상태를 변경할 수 있는 열 헤더에 핀 아이콘을 정의한다고 가정해 보겠습니다.

    이는 사용자 정의 아이콘이 있는 열의 헤더 템플릿을 생성하여 수행할 수 있습니다.

    <IgrHierarchicalGrid autoGenerate={false} data={HierarchicalCustomersData} ref={grid}>
    <IgrColumn field="CustomerID" hidden={true}></IgrColumn>

    <IgrColumn field="Company" header="Company Name" width="300px"
    headerTemplate={toggleColumnPin} pinned={true}></IgrColumn>

    <IgrColumn field="ContactName" header="Contact Name" width="200px"
    headerTemplate={toggleColumnPin}> </IgrColumn>

    <IgrColumn field="ContactTitle" header="Contact Title" width="200px"
    headerTemplate={toggleColumnPin}></IgrColumn>
</IgrHierarchicalGrid>

    const toggleColumnPin = (ctx: IgrColumnTemplateContext) => {
  const togglePin = () => {
    const col = ctx.column;
    col.pinned = !col.pinned;
  }

  const col = ctx.column;

  return(
    <div>
      <span style={{ float: 'left' }}>{col.header}</span>
      <span style={{ float: 'right' }} onClick={() => togglePin()}>📌</span>
    </div>
  );
}

    Demo

    Pinning Limitations

    • 열 너비를 백분율(%)로 설정하면 고정된 열이 있을 때 본문과 헤더 내용이IgrHierarchicalGrid 어긋나게 됩니다. 컬럼 핀닝이 제대로 작동하려면 칼럼 너비가 픽셀(px) 단위이거나 자동 할당되어야 합니다IgrHierarchicalGrid.

    Styling

    미리 정의된 테마 외에도, 일부 사용 가능한 CSS 속성을 설정하여 그리드를 추가로 맞춤화할 수 있었습니다. 색상을 변경하고 싶다면, 먼저 그리드에 대해 aID를 설정해야 합니다:

    <IgrHierarchicalGrid id="grid"></IgrHierarchicalGrid>

    그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

    #grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

    Demo

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.