AG-GRID 열 컬럼 열고 닫는 기능
- 형광펜 부분의 코드를 참고 :)
var columnDefs = [ ]; 에서 테이블 컬럼 선언하는 부분에
테이블 열을 열고 닫는 기능을 설정할 열 컬럼에 children 변수를 선언하여 그 안에 열 선언하면서
columnGroupShow: 'close' 코드를 추가하면 된다.
열을 나타내는 상태에서 접는 기준의 열에는 close를,
열이 보이지 않는 상태로 나타내고자하는 열에는 open을 선언한다.
열 닫힌 상태 :
열 열린 상태 :
<body>
<script>
var columnDefs = [
{headerName: "1", field: "m1"},
{headerName: "2", field: "m2"},
{headerName: "3", field: "m3"},
{headerName: "4", field: "m4", width: 280},
{
headerName: "5",
children: [
{headerName: "6", field: "m6", width: 250, columnGroupShow: 'close'},
{headerName: "7", field: "m7", width: 100, columnGroupShow: 'open'},
{headerName: "8", field: "m8", width: 100, columnGroupShow: 'open'},
{headerName: "9", field: "m9", width: 100, columnGroupShow: 'open'},
{headerName: "10", field: "m10", width: 100, columnGroupShow: 'open'},
{headerName: "11", field: "m11", width: 100, columnGroupShow: 'open'}
]
}
];