본문 바로가기
언어공부/JS&TS&React

[Javascript] ag-grid 로 그룹 테이블 만들기

by hobbiz 2021. 8. 27.
반응형

다른 회사에서 일하고 있는 친구가 help를 요청했다.

 

ag-grid로 테이블을 만들고 싶은데 어떻게 쓰는지 모르겠다고 해서 한번 바닐라 자바스크립트로 만져 보았다.

친구의 의도는 맨 위에있는 1번 row가 그룹이 되어서 밑으로 2, 3, 4 row가 나오는 걸 원하는 듯 한데

그렇게 되면 그룹이 지어지지 않아서 맨 앞에 groupNo를 추가해서 그룹을 지었다.

 

ag-grid는 ui가 깔끔해서 좋긴 한데 커스텀 할 때마다 항상 2%씩 아쉬운 느낌이다.

나중에 쓸 일이 있을때 참고해야지

 

 

main.js

// 각 컬럼 데이터(테이블 헤더 이름 등) 
var columnDefs = [ 
  {
    // 테이블 헤더 이름
    headerName: 'groupNo',
    // 필드 이름
    field: 'groupNo',
    // 최소 너비
    minWidth: 240,
    // 그룹의 제목명을 포함해서 보여줄것인가
    showRowGroup: true,
    // 렌더할때 필요한 함수 이름인듯
    cellRenderer: 'agGroupCellRenderer',
    // 이 항목으로 그룹을 지을것인가?
    rowGroup: true,

  },
  { headerName: 'no', field: 'no'},
  { headerName: 'cignature', field: 'cignature'},
  { headerName: 'method', field: 'method' },
  { headerName: 'layer', field: 'layer' },
];

// 각 줄의 데이터
// 같은 값인 경우에 그룹이 지어지기 때문에 groupNo가 필요
var rowData = [
  {groupNo:'1', no:'1', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'1', no:'2', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'1', no:'3', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'1', no:'4', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'1', no:'5', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'1', no:'6', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'1', no:'7', cignature:'cignature', method: 'method', layer:'layer'},
   {groupNo:'11', no:'11', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'11', no:'12', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'11', no:'13', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'11', no:'14', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'11', no:'15', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'11', no:'16', cignature:'cignature', method: 'method', layer:'layer'},
  {groupNo:'11', no:'17', cignature:'cignature', method: 'method', layer:'layer'},
]
  

var gridOptions = {
  columnDefs: columnDefs,
  defaultColDef: {
    flex: 1,
    minWidth: 120,
    resizable: true,
  },
  rowData: rowData,
  components: {
    simpleCellRenderer: getSimpleCellRenderer(),
  },
  // we don't want the auto column here, as we are providing our own cols
  groupSuppressAutoColumn: true,
  suppressRowClickSelection: true,
  groupDefaultExpanded: 1,
  rowSelection: 'multiple',
  groupSelectsChildren: true,
  animateRows: true,
};



function getSimpleCellRenderer() {
  function SimpleCellRenderer() {}

  SimpleCellRenderer.prototype.init = function (params) {
    var tempDiv = document.createElement('div');
    if (params.node.group) {
      tempDiv.innerHTML =
        '<span style="border-bottom: 1px solid grey; border-left: 1px solid grey; padding: 2px;">' +
        params.value +
        '</span>';
    } else {
      tempDiv.innerHTML =
        '<span><img src="https://flags.fmcdn.net/data/flags/mini/ie.png" style="width: 20px; padding-right: 4px;"/>' +
        params.value +
        '</span>';
    }
    this.eGui = tempDiv.firstChild;
  };

  SimpleCellRenderer.prototype.getGui = function () {
    return this.eGui;
  };

  return SimpleCellRenderer;
}

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
});

 

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>JavaScript example</title>
		<meta charSet="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<style media="only screen">
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                box-sizing: border-box;
                -webkit-overflow-scrolling: touch;
            }

            html {
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
                overflow: auto;
            }

            body {
                padding: 1rem;
                overflow: auto;
            }
        </style>
	</head>
	<body>
		<style>
  .align-right {
    text-align: right;
  }
</style>
		<div id="myGrid" style="height: 100%;" class="ag-theme-alpine">
		</div>
		<script>var __basePath = './';</script>
		<script src="https://unpkg.com/@ag-grid-enterprise/all-modules@26.0.0/dist/ag-grid-enterprise.min.js">
		</script>
		<script src="main.js">
		</script>
	</body>
</html>

 

 

반응형
저작자표시 비영리 동일조건

'언어공부 > JS&TS&React' 카테고리의 다른 글

URLSearchParams, 주소 쿼리스트링, 파라미터 변경  (0) 2022.03.27
nodejs 타입스크립트 환경설정, jsconfig.json 활용  (0) 2022.03.09
[JavaScript] 연산자 && (AND), || (OR) 사용법  (0) 2021.08.01
[React] Context 란? Context 활용 방법, 공식 문서  (0) 2021.06.28
[React] 리액트 훅 (Hook) useState, useEffect 활용하기  (0) 2021.06.27

관련글

댓글

티스토리툴바