사용자 정의 React 피벗 테이블 및 패널을 만드는 방법

PivotGrid 사용자 정의 React 피벗 테이블 및 패널을 만드는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2023-02-22 15:49 조회 421회 댓글 0건

본문

관련링크

웹 응용 프로그램에서 React 피벗 테이블 추가하는 방법 문서에서는 Wijmo의 React PivotGrid를 구현하는 방법에 대해 설명했습니다. 그러나 라이브러리를 설치하고 몇 줄의 코드를 작성하며 응용 프로그램을 컴파일하는 것만큼 쉬운 일은 아닙니다. 응용 프로그램의 디자인에 완벽하게 맞출 수 있도록 라이브러리 컴포넌트의 모양 및 느낌을 업데이트해야 할 수 있습니다.

다행히 Wijmo를 통해 CSS를 사용하여 React 피벗 테이블인 PivotGrid를 사용자 정의하고 사용자 정의 HTML 템플릿을 만들어 PivotPanel의 레이아웃을 쉽게 설정할 수 있습니다. 이 문서에서는 특정 스타일에 맞도록 이러한 컨트롤을 모두 쉽게 사용자 정의할 수 있는 방법에 대해 설명합니다. 다음 내용을 다룰 것입니다.

HTML 템플릿 만들기
피벗 패널 컨트롤 스타일 지정
React 피벗 테이블 사용자 정의 CSS

코드를 검토하는 동안 따라 하고 싶으면 이 리포지토리를 시작점으로 사용하겠습니다. 완료된 코드를 보고 싶으면 문서 끝에서 해당 리포지토리를 찾아볼 수 있습니다. 이제 시작해 보겠습니다!

HTML 템플릿 만들기

템플릿을 만들기 전에 먼저 변경해야 할 몇 가지 항목이 있습니다. App.js 파일에서 FlexChart 컴포넌트를 초기화하는 선을 제거할 수 있습니다.

이 응용 프로그램에서는 필요하지 않습니다. 마크업은 다음과 같이 표시됩니다.

<div className="App">
 <div className='flextable'>
   <wjcOlap.PivotPanel itemsSource={ng}></wjcOlap.PivotPanel>
   <wjcOlap.PivotGrid itemsSource={ng}></wjcOlap.PivotGrid>
 </div>
</div>

다음으로, App.css 파일을 열고 다음 CSS 클래스를 수정합니다.

.App {
   margin: 30px;
}

.flextable {
   display: flex;
}

마지막으로 index.css 파일을 열고 다음 사항이 포함되어 있는지 확인합니다.

.wj-pivotgrid {
   height: 600px;
   width: 1200px;
}

.wj-pivotpanel {
   height: 400px;
   width: 650px;
   margin: 0px 10px 0px 0px;
   padding: 10px;
   padding-right: 20px;
   display: block;
}

이제 응용 프로그램을 저장하면 PivotPanel은 다음과 같이 표시됩니다.

따라서 여기서부터 시작하겠습니다. 이 응용 프로그램에 대해 수행하려는 작업은 패널에 다크 모드 스타일을 제공하고 사용자가 필드를 끌어올 수 있는 영역을 더 잘 정의하는 것입니다. 이 작업을 위해 가장 먼저 할 일은 일부 사용자 정의 HTML을 작성하는 것입니다.

PivotPanel 컨트롤을 사용하면 사용자 정의 HTML 템플릿을 만들 수 있으며 이를 PivotPanel의 controlTemplate 속성에 할당할 수 있습니다. 이 작업은 OLAP 모듈이 PivotPanel을 렌더링할 때 사용하는 기본 템플릿을 재정의합니다.

App.js 파일을 열고 다음 코드를 추가합니다.

wjOlap.PivotPanel.controlTemplate = `<div class="root">  
 <div class="field-list-label">  
   <label wj-part="g-flds"></label>  
 </div>  
 <div class="field-list pad">  
   <div wj-part="d-fields"></div>  
 </div>  
 <div class="drag-areas-label">  
   <label wj-part="g-drag"></label>  
 </div>  
 <div class="filter-list pad">  
   <label>  
     <span class="wj-glyph wj-glyph-filter"></span>  
     <span wj-part="g-flt"></span>  
   </label>  
   <div wj-part="d-filters"></div>  
 </div>  
 <div class="column-list pad bdr-left">  
   <label>  
     <span class="wj-glyph">⫴</span>  
     <span wj-part="g-cols"></span>  
   </label>  
   <div wj-part="d-cols"></div>  
 </div>  
 <div class="row-list pad bdr-top">  
   <label>  
     <span class="wj-glyph">≡</span>  
     <span wj-part="g-rows"></span>  
   </label>  
   <div wj-part="d-rows"></div>  
 </div>  
 <div class="values-list pad bdr-left bdr-top">  
   <label>  
     <span class="wj-glyph">Σ</span>  
     <span wj-part="g-vals"></span>  
   </label>  
   <div wj-part="d-vals"></div>  
 </div>  
 <div wj-part="d-prog" class="progress-bar"></div>  
 <div class="control-area">  
   <label>  
     <input wj-part="chk-defer" type="checkbox">  
     <span wj-part="g-defer">Defer Updates</span>  
   </label>  
   <button wj-part="btn-update" class="wj-btn wj-state-disabled" type="button" disabled>
     Update  
   </button>  
 </div>  
</div>`;

이제 여기에 많은 항목이 있지만 지금 보고 있는 것에 대해 이해하고 있다면 매우 간단합니다. PivotPanel은 필드, 영역, 컨트롤 영역의 세 가지 섹션으로 나뉩니다. 필드 섹션은 선택 가능한 필드 요소 목록으로 구성됩니다. 영역 섹션은 4개의 하위 섹션(필터, 열, 행, 값)으로 나뉩니다. 컨트롤 영역은 React 피벗 테이블이 자동으로 업데이트되지 않도록 사용자가 사용할 수 있는 항목입니다.

여기에 작성한 마크업은 일부 핵심 CSS 클래스(예: .wj-glyph 및 .wj-btn)를 사용하지만 이 HTML은 대부분의 스타일을 완전히 제거하여 작업할 빈 슬레이트를 제공합니다. 응용 프로그램을 저장하여 실행하면 업데이트된 패널이 표시됩니다.

이제 이러한 모든 부분을 사용하고 사용자 정의 CSS를 추가할 수 있습니다. 문서의 다음 섹션에서 여기로 이동하겠습니다.

피벗 패널 컨트롤 스타일 지정

이제 컨트롤의 스타일을 지정할 준비가 되었으며 앱의 디자인을 결정할 차례입니다. 이 앱의 경우 다크 테마에 맞게 컨트롤을 수정합니다. 이 작업을 위해 다음의 세 가지 색을 사용하여 응용 프로그램의 스타일을 지정하겠습니다.

#141414(기본 색)
#333333(보조 색)
#595959(제3색)

색을 변경하기 전에 피벗 패널 컨트롤의 레이아웃을 설정해야 합니다. 필드 목록이 컨트롤의 왼쪽을 차지하게 하고 2x2 그리드의 오른쪽에 필드 영역을 배치하여 레이아웃이 표시되도록 할 수 있습니다.

이 작업을 위해 PivotPanel의 디스플레이를 그리드에 설정하고 4개의 열을 보유하도록 설정하겠습니다.

.wj-pivotpanel .root {
   display: -ms-grid;
   display: grid;
   grid-template-columns: repeat(4, 25%);
   height: 100%;
}

다음으로, 영역 레이블의 스타일을 적절히 지정해야 합니다.

.wj-pivotpanel .field-list-label {
   -ms-grid-column: 1;
   -ms-grid-column-span: 2;
   grid-column: 1/span 2;
   -ms-grid-row: 1;
   grid-row: 1;
}

.wj-pivotpanel .drag-areas-label {
   -ms-grid-column: 3;
   -ms-grid-column-span: 2;
   grid-column: 3/span 2;
   -ms-grid-row: 1;
   grid-row: 1;
}

보시다시피 이러한 각 요소는 그리드의 첫 번째 행에서 시작되며 field-list-label은 첫 번째 열에서 시작되고 drag-areas-label은 세 번째 열에서 시작됩니다.

다음으로, 레이블과 같이 컨트롤에서 필드 및 필드 영역 위치를 할당해야 합니다.

.wj-pivotpanel .field-list {
   -ms-grid-column: 1;
   -ms-grid-column-span: 2;
   grid-column: 1/span 2;
   -ms-grid-row: 2;
   -ms-grid-row-span: 2;
   grid-row: 2/span 2;
   border: 1px solid rgba(0, 0, 0, .2);
   margin-top: 5px;
   height: 322px;
}


.wj-pivotpanel .filter-list {
   -ms-grid-column: 3;
   grid-column: 3;
   -ms-grid-row: 2;
   grid-row: 2;
   height: 95%;
   border: 1px solid rgba(0, 0, 0, .2);
   margin: 5px;
}

.wj-pivotpanel .column-list {
   -ms-grid-column: 4;
   grid-column: 4;
   -ms-grid-row: 2;
   grid-row: 2;
   height: 95%;
   border: 1px solid rgba(0, 0, 0, .2);
   margin: 5px;
   margin-left: 10px;
}

.wj-pivotpanel .row-list {
   -ms-grid-column: 3;
   grid-column: 3;
   -ms-grid-row: 3;
   grid-row: 3;
   height: 95%;
   border: 1px solid rgba(0, 0, 0, .2);
   margin: 5px;
}

.wj-pivotpanel .values-list {
   -ms-grid-column: 4;
   grid-column: 4;
   -ms-grid-row: 3;
   grid-row: 3;
   height: 95%;
   border: 1px solid rgba(0, 0, 0, .2);
   margin: 5px;
   margin-left: 10px;
}

여기에는 많은 CSS가 있지만 생각하는 것만큼 복잡하지 않습니다. 단순히 만든 그리드의 섹션에 모든 다른 목록을 배치하는 것입니다. 각 요소에 대해 그리드 행 및 열 위치를 설정하고 일부 여백과 테두리를 추가하면 끝입니다!

응용 프로그램을 실행하기 전에 다른 두 가지 작업을 먼저 수행해야 합니다. PivotPanel 컨트롤은 많은 데이터와 사용자가 푸시하기로 결정할 때까지 업데이트를 연기하는 기능을 사용하는 경우에 대해 진행률 표시줄을 지원합니다. 이는 PivotPanel의 기능이므로 스타일이 지정되어 있는지도 확인해야 합니다.

필드 및 목록과 같이 CSS로 구현하는 작업은 매우 간단합니다.

.wj-pivotpanel .progress-bar {
   -ms-grid-column: 1;
   -ms-grid-column-span: 4;
   grid-column: 1/span 4;
   -ms-grid-row: 4;
   grid-row: 4;
   width: 0px;
   height: 3px;
}

.wj-pivotpanel .control-area {
   -ms-grid-column: 1;
   -ms-grid-column-span: 4;
   grid-column: 1/span 4;
   -ms-grid-row: 4;
   grid-row: 4;
   display: -ms-grid;
   display: grid;
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: end;
   -ms-grid-columns: 1fr auto;
   grid-template-columns: 1fr auto;
}

두 번째는 모든 필드 영역의 높이가 같은지 확인하고 업데이트 연기를 위해 비활성화/활성화된 버튼 레이아웃을 설정하는 것입니다.

.wj-pivotpanel .pad {
  padding: 6px;
}

.wj-pivotpanel .values-list .wj-flexgrid {
  height: 118px;
}

.wj-pivotpanel .filter-list .wj-flexgrid {
  height: 118px;
}

.wj-pivotpanel .column-list .wj-flexgrid {
  height: 118px;
}

.wj-pivotpanel .row-list .wj-flexgrid {
  height: 118px;
}

.wj-control a.wj-btn, .wj-viewer .wj-control a.wj-applybutton, .wj-control button.wj-btn:not(.wj-btn-default), .wj-viewer .wj-control button.wj-applybutton:not(.wj-btn-default) {
  border: 1px solid rgb(66, 66, 66);
  border-style: solid;
  color: white;
  background-color: #3f51b5;
}

.wj-control a.wj-btn:hover, .wj-viewer .wj-control a.wj-applybutton:hover, .wj-control button.wj-btn:not(.wj-btn-default):hover, .wj-viewer .wj-control button.wj-applybutton:not(.wj-btn-default):hover {
  border: 1px solid rgb(66, 66, 66);
  border-style: solid;
  color: white;
  background-color: #5d6fd4;
}

이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.

보시다시피 그 어느 때보다 확실히 더 간결하고 컨트롤에서 어떠한 정보도 손실되지 않습니다.

다음 섹션으로 이동하기 전에 마지막 작업은 다크 모드 테마에 맞게 컨트롤의 스타일을 지정했는지 확인하는 것입니다. 이 섹션의 시작 부분에서는 사용할 색 팔레트를 언급했지만 이제는 이를 구현할 차례입니다. 다음 요소에서 CSS를 업데이트합니다.

body {
   margin: 0;
   background: #141414;
}

.wj-pivotpanel {
   min-height: 0;
   height: 400px;
   width: 650px !important;
   margin: 0px 10px 0px 0px;
   display: block;
   background: #333;
   color: white;
   padding: 10px;
   padding-right: 20px;
}

.wj-pivotpanel .wj-flexgrid {
   min-height: 4em;
   max-height: 310px;
   background: inherit;
   color: white;
}

이제 응용 프로그램을 저장하고 다시 실행하면 다음 내용을 볼 수 있습니다.

보시다시피 PivotPanel은 컨트롤 스타일 지정을 시작했을 때 원했던 모양 및 느낌과 일치합니다. 다음 섹션에서는 다크 모드 테마와 일치하도록 Wijmo의 React 피벗 테이블인 PivotGrid를 업데이트하겠습니다.

React 피벗 테이블 사용자 정의 CSS

마지막으로 처리해야 할 작업은 앱의 테마를 확인하도록 피벗 테이블의 디자인을 일치시키는 것이며 이 작업은 아주 쉬워야 합니다.

index.css 파일을 열고 .wj-pivotgrid 클래스를 다음과 같이 수정합니다.

.wj-pivotgrid {
   height: 600px;
   width: 1200px;
   border: 1px sold #333;
   background: #333;
}

이제 그리드 컨테이너는 나머지 앱의 디자인에 맞습니다. 하지만 아직 끝나지 않았습니다! 셀의 스타일도 적절히 지정해야 합니다. 이 작업을 위해 다음 CSS를 추가합니다.

.wj-cell {
   background: #333;
   color: white;
}

.wj-cell.wj-header {
   background: #595959;
   color: white;
}

.wj-cell.wj-aggregate {
   background: #595959 !important;
   color: white;
}

.wj-cell.wj-align-right.wj-aggregate {
   background: #595959 !important;
}

데이터 셀과 헤더 셀의 스타일을 모두 지정합니다. 응용 프로그램을 실행하고 몇 개의 필드를 추가한 다음 피벗 테이블을 살펴보면 다음과 같이 표시됩니다.

다 끝났습니다! 응용 프로그램의 디자인과 일치하도록 Wijmo의 React 피벗 테이블인 PivotGrid의 디자인을 사용자 정의하는 작업은 쉽습니다.

결론

축하합니다! 이제 이 문서를 살펴봤으니 Wijmo의 PivotPanel 및 PivotGrid 컨트롤을 사용자 정의하고 스타일 지정하는 데 문제가 없어야 합니다. 패널 레이아웃을 사용자 정의하는 방법과 레이아웃 또는 스타일 구성표에 맞도록 이러한 컨트롤을 사용자 정의하는 방법을 보여드렸습니다.

이 문서에서 응용 프로그램을 다운로드하려면 여기에서 프로젝트를 포함하는 리포지토리를 찾아볼 수 있습니다.

지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!