728x90
# detailCellRendererParams
https://www.ag-grid.com/react-data-grid/master-detail/
React Data Grid: Master / Detail
Master / Detail can be enabled using the masterDetail grid option with detail rows configured using detailCellRendererParams as shown below:. Download v29 of the best React Data Grid in the world now.
www.ag-grid.com
# 문제
- Time Slot, Award, Credit 이 각 Detail 을 가지고 있음
1) Time Slot : Day, Course, Building, Room No
2) Award : Contest, Date, Prize
3) Credit : Course, Year, Semester, Grade
import React, {useState} from 'react';
import {AgGridReact} from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import {GridApi} from "ag-grid-community";
const AgGrid1 = () => {
const [rowData] = useState([
{
id: "2018305065",
name: "Jeon",
department: "Comp.Sci",
timeSlot: 4,
timeSlots: [
{day: "Mon", course: "Java Programming", building: "A", roomNo: "508"},
{day: "Tue", course: "Database System", building: "A", roomNo: "510"},
{day: "Tue", course: "Arduino Programming", building: "B", roomNo: "511"},
{day: "Wed", course: "Operating System", building: "D", roomNo: "510"}],
award: 1,
awards:[
{contest: "Python programming", date: "2022.02.01", prize: "excellence prize"}],
credit: 4,
credits: [
{course: "Python programming", year: 2020, semester: 1, grade: "A"},
{course: "Android programming", year: 2020, semester: 2, grade: "A"},
{course: "C++ programming", year: 2021, semester: 1, grade: "A"}]
},
{
id: "2016305004",
name: "Jin",
department: "Comp.Sci",
timeSlot: 3,
timeSlots: [
{day: "Mon", course: "Android Programming", building: "C", roomNo: "502"},
{day: "Wed", course: "C++ Programming", building: "A", roomNo: "510"},
{day: "Wed", course: "Operating System", building: "D", roomNo: "510"}],
award: 2,
awards:[
{contest: "Python programming", date: "2022.02.01", prize: "top prize"},
{contest: "Arduino Programming", date: "2022.07.01", prize: "participation prize"}],
credit: 3.5,
credits: [
{course: "Python programming", year: 2021, semester: 1, grade: "B"},
{course: "Java programming", year: 2021, semester: 1, grade: "B"}]},
{
id: "2019305053",
name: "Jang",
department: "Comp.Sci",
timeSlot: 4,
timeSlots: [
{day: "Mon", course: "Java Programming", building: "A", roomNo: "508"},
{day: "Wed", course: "C# Programming", building: "A", roomNo: "510"},
{day: "Wed", course: "Operating System", building: "D", roomNo: "510"},
{day: "Fri", course: "C++ Programming", building: "A", roomNo: "510"}],
award: 1,
awards:[
{contest: "Python programming", date: "2022.02.02", prize: "participation prize"}],
credit: 4,
credits: [
{course: "Python programming",year: 2021, semester: 1, grade: "A"},
{course: "Database System", year: 2021, semester: 1, grade: "A"}]
},
]);
const [columnDefs] = useState([
{headerName:'Student ID', field: 'id'},
{field: 'name'},
{field: 'department'},
{field: 'timeSlot', cellRenderer: 'agGroupCellRenderer'},
{field: 'award', cellRenderer: 'agGroupCellRenderer'},
{field: 'credit', cellRenderer: 'agGroupCellRenderer'}
])
const [gridApi, setGripApi] = useState(new GridApi());
const onGridReady = (params: any) => {
setGripApi(params.api);
}
const detailCellRendererParams = {
detailGridOptions: {
columnDefs: [
{field: 'day'},
{field: 'course'},
{field: 'building'},
{field: 'roomNo'},
],
defaultColDef: {
flex: 1,
resizable: true
},
detailRowHeight: 30,
},
getDetailRowData: (params: any) => {
params.successCallback(params.data.timeSlots);
}
};
return (
<div className="ag-theme-alpine" style={{height: 500, width: 1300}}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
detailCellRendererParams={detailCellRendererParams}
masterDetail={true}
onGridReady={onGridReady}>
</AgGridReact>
</div>
);
}
export default AgGrid1- 각 column 마다 안의 Detail 내용을 다르게 하고 싶었는데 생각대로 안 됐다.
- detailGridOptions 설정이 하나밖에 안 돼서 Award Detail 에 Time Slot Detail 이 나왔다.
- '어떻게 detailGridOptions 을 여러 개를 주지 ¿' 를 계속 생각했다.
- 아무리 생각해도 모르겠어서 포기할까...? 하다가 ' > ' 를 클릭해야 Detail 내용이 나오니까 클릭할 때 colId 에 따라 detailGridOptions 을 주면 되겠다 생각해서 해봤더니 됐다.
# 성공
1. 전체 Grid
2. Time Slot 의 Detail
- Day, Course, Building, Room No
3. Award 의 Detail
- Contest, Date, Prize
4. Credit 의 Detail
- Course, Year, Semester, Grade
import React, {useState} from 'react';
import {AgGridReact} from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import {GridApi} from "ag-grid-community";
const AgGrid1 = () => {
const [rowData] = useState([
{
id: "2018305065",
name: "Jeon",
department: "Comp.Sci",
timeSlot: 4,
timeSlots: [
{day: "Mon", course: "Java Programming", building: "A", roomNo: "508"},
{day: "Tue", course: "Database System", building: "A", roomNo: "510"},
{day: "Tue", course: "Arduino Programming", building: "B", roomNo: "511"},
{day: "Wed", course: "Operating System", building: "D", roomNo: "510"}],
award: 1,
awards:[
{contest: "Python programming", date: "2022.02.01", prize: "excellence prize"}],
credit: 4,
credits: [
{course: "Python programming", year: 2020, semester: 1, grade: "A"},
{course: "Android programming", year: 2020, semester: 2, grade: "A"},
{course: "C++ programming", year: 2021, semester: 1, grade: "A"}]
},
{
id: "2016305004",
name: "Jin",
department: "Comp.Sci",
timeSlot: 3,
timeSlots: [
{day: "Mon", course: "Android Programming", building: "C", roomNo: "502"},
{day: "Wed", course: "C++ Programming", building: "A", roomNo: "510"},
{day: "Wed", course: "Operating System", building: "D", roomNo: "510"}],
award: 2,
awards:[
{contest: "Python programming", date: "2022.02.01", prize: "top prize"},
{contest: "Arduino Programming", date: "2022.07.01", prize: "participation prize"}],
credit: 3.5,
credits: [
{course: "Python programming", year: 2021, semester: 1, grade: "B"},
{course: "Java programming", year: 2021, semester: 1, grade: "B"}]},
{
id: "2019305053",
name: "Jang",
department: "Comp.Sci",
timeSlot: 4,
timeSlots: [
{day: "Mon", course: "Java Programming", building: "A", roomNo: "508"},
{day: "Wed", course: "C# Programming", building: "A", roomNo: "510"},
{day: "Wed", course: "Operating System", building: "D", roomNo: "510"},
{day: "Fri", course: "C++ Programming", building: "A", roomNo: "510"}],
award: 1,
awards:[
{contest: "Python programming", date: "2022.02.02", prize: "participation prize"}],
credit: 4,
credits: [
{course: "Python programming",year: 2021, semester: 1, grade: "A"},
{course: "Database System", year: 2021, semester: 1, grade: "A"}]
},
]);
const [columnDefs] = useState([
{headerName:'Student ID', field: 'id'},
{field: 'name'},
{field: 'department'},
{field: 'timeSlot', cellRenderer: 'agGroupCellRenderer'},
{field: 'award', cellRenderer: 'agGroupCellRenderer'},
{field: 'credit', cellRenderer: 'agGroupCellRenderer'}
])
const [gridApi, setGripApi] = useState(new GridApi());
const onGridReady = (params: any) => {
setGripApi(params.api);
}
const detailCellRendererParams = (params: any): any => {
const colId = gridApi.getFocusedCell()?.column.getColId();
console.log(params.data, colId);
if (colId === 'timeSlot') {
return {
detailGridOptions: {
columnDefs: [
{field: 'day'},
{field: 'course'},
{field: 'building'},
{field: 'roomNo'},
],
defaultColDef: {
flex: 1,
resizable: true
},
detailRowHeight: 30,
},
getDetailRowData: (params: any) => {
params.successCallback(params.data.timeSlots);
}
}
}
if (colId === 'award') {
return {
detailGridOptions: {
columnDefs: [
{field: 'contest'},
{field: 'date'},
{field: 'prize'},
],
defaultColDef: {
flex: 1,
resizable: true
},
detailRowHeight: 30,
},
getDetailRowData: (params: any) => {
params.successCallback(params.data.awards);
}
}
}
if (colId === 'credit') {
return {
detailGridOptions: {
columnDefs: [
{field: 'course'},
{field: 'year'},
{field: 'semester'},
{field: 'grade'},
],
defaultColDef: {
flex: 1,
resizable: true
},
detailRowHeight: 30,
},
getDetailRowData: (params: any) => {
params.successCallback(params.data.credits);
}
}
}
}
return (
<div className="ag-theme-alpine" style={{height: 500, width: 1300}}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
detailCellRendererParams={detailCellRendererParams}
masterDetail={true}
onGridReady={onGridReady}>
</AgGridReact>
</div>
);
}
export default AgGrid1
# 휴..
- 별 거 아닌 거 같았는데 생각보다 오래 걸렸다.
- detail 하려면 'ag-grid-enterprise' 를 import 해야 하는데 자꾸 됐다 안 됐다 해서 이것도 엄청 오래 걸렸다.
import 'ag-grid-enterprise';- 다음에는 export excel 에 detail 보이는 것을 해봐야지.
반응형
'전공 공부 > React' 카테고리의 다른 글
| [React] Gelocation API (0) | 2023.05.18 |
|---|
