킹바구니 🦜

다른건 없고 css로 제어하는 것이 방법. 1. css 만들기 .ell { .ag-cell-wrapper { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } css가 길어서 일부러 클래스로 따로 만들어서 적용하기로 함. 참고로 ag-grid에서 글이 .ag-cell-wrapper > span에 있길래 한번 더 저렇게 자세하게 써줌. 2. 클래스 붙여주기 columnDefs: [ { headerName: "댓글 내용", field: "replyText", cellClass: ["left", "ell"], // 클래스 추가 }, ] 그러면 이..

이놈의 라이브러리는 왜케 간단한것도 바로바로 안나오는지 모르겠다 진짜 1. enableBrowserTooltips 추가 여기서 header에 주고싶다면 2-1. headerTooltip 추가 { headerName: "아이디", field: "userId", headerTooltip: "(아이디=이메일 주소임)", }, 아니면 cell에 주고싶다면 2-2. tooltipValueGetter 추가 { headerName: "이름", field: "userName", tooltipValueGetter: function (params) { return params.data.fullName; } }, https://www.ag-grid.com/javascript-data-grid/column-properties..

ag grid는 기본적으로 왼쪽 정렬임. 이걸 사진처럼 바꾸는 방법은 여러가지임. 1. columnDefs에 개별입력 (추천) 2. css로 제어 3. 공통으로 지정 (추천) + 클래스 삭제 + 클래스 추가(여러개) 1. columnDefs에 개별입력 (추천) { headerName: "회원구분", field: "grade", cellStyle: {textAlign: "center"} // 여기 }, cellStyle에 쓰는 방법은 카멜형식 또는 "대시형식"으로 쓰기 예) { cellStyle: { justifyContent: "center" } cellStyle: { "background-color": "red" } } 장점 - 원하는 셀만 제어가 가능 단점 - !important 적용이 불가능 - 모..