■ Web개발/Ag-grid (4) 썸네일형 리스트형 aggrid 인쇄 print() 하면 좌우가 늘어나서 짤릴 경우 const printGrid = () => { console.log('Print button clicked'); if (gridApi.current && gridColumnApi.current) { console.log('Grid APIs are available'); const gridElement = document.querySelector('#myGrid') as HTMLElement; if (gridElement) { console.log('Grid element found'); const originalStyle = { width: gridElement.style.width, .. Ag-grid 사용하는 법. 2가지가 있다. columnDefs를 만드는 법과 const App = () => { const rowData = [ {make: "Toyota", model: "Celica", price: 35000}, {make: "Ford", model: "Mondeo", price: 32000}, {make: "Porsche", model: "Boxter", price: 72000} ]; return ( ); }; 이런식으로 AgGridColumn을 만드는 방법. 위는 행을 쭈욱 추가하고싶은 만큼 넣으면 된다. 직관적인 방법. 그렇지만 이 방법을 쓰면, data를 잘 못 받을 때가 있다. data형식이 매치가 안 될 경우가 있는데 그럴 때 columnDefs를 사용한다 const columnDefs: any[] .. ag-grid 가로 세로 색칠 column, row 색깔 변경 .ag-row-hover { /* putting in !important so it overrides the theme's styling as it hovers the row also */ background-color: #dfdfff !important; } .ag-row-hover { /* putting in !important so it overrides the theme's styling as it hovers the row also */ background-color: #dfdfff !important; } .ag-column-hover { background-color: #dfffdf; } aggrid에서 마우스를 올려두면 색깔이 변하게 하는 옵션. 또한 글자의 색깔을 바꾸고 싶다면 { hea.. ag-grid 에서 AgGridColumn에 반올림 값 적용시키기 valueFormatter: function (params) {return params.value.toFixed(2) ;} 이 식을 넣으면 됩니다. cellStyle={{ color: "rgb(180,120,255)", display: "flex", textAlign: "center", alignItems: "center", valueFormatter: function (params) { return params.value.toFixed(2); }, 어디에 넣냐면... cellstyle 안에 넣어도 작동이 되더군요 바깥에 적용시키려 한참 끙끙거리다가 안쪽에 넣으면 작동함을 발견. 이전 1 다음
