render-table
설명
위젯 구성이 처리된 후, 테이블이 렌더링되기 직전에 발생합니다
이 이벤트를 사용하면 최종 테이블 구성을 즉석에서 변경하거나 테이블 렌더링을 완전히 차단할 수 있습니다.
사용법
"render-table": ({
config: {
columns?: any[],
data?: any[],
footer?: boolean,
sizes?: {
rowHeight?: number,
headerHeight?: number,
columnWidth?: number,
footerHeight?: number
},
split?: {
left?: number;
right?: number;
},
tree?: boolean,
cellStyle?: (row: any, col: any) => string,
}
}) => boolean | void;
매개변수
액션의 callback은 다음 매개변수를 가진 config 객체를 받습니다:
columns- (선택) 각 객체에 대해 다음 매개변수를 포함하는 열 배열:id(number) - (필수) 열의 idcell(any) - (선택) 셀 내용이 담긴 템플릿 (template 헬퍼를 통한 템플릿 추가 참조)template- (선택)tableShape속성을 통해 정의된 템플릿fields(array) - (선택) 트리 모드의 계층형 열에서 필드를 정의합니다. 각 레벨에서 이 열에 표시되는 필드를 반영합니다field- (선택) 필드의 id인 문자열method(string) - (선택) 이 열의 필드에 대해 정의된 메서드methods(array) - (선택) 트리 모드의 계층형 열에서 필드에 적용되는 메서드를 정의합니다format(string or object) - (필수) 날짜 형식 또는 숫자 형식 (필드에 형식 적용 참조)isNumeric(boolean) - (선택) 열에 숫자 값이 포함되어 있는지 여부를 정의합니다isTotal(boolean) - (선택) 합계 열인지 여부를 정의합니다area(string) - (선택) 열이 렌더링되는 영역: "rows", "columns", "values"header- (선택) 각 셀에 대해 다음 속성을 포함하는 헤더 셀 배열:text(string) - (선택) 셀 텍스트, 또는 형식화된 값, 또는 predicate 템플릿으로 처리된 값rowspan(number) - (선택) 헤더가 차지할 행 수colspan(number) - (선택) 헤더가 차지할 열 수value(any) - (필수) 셀이 "columns" 영역에 속하는 경우 원시 값field(string) - (필수) 셀이 "columns" 영역에 속하는 경우 값이 표시되는 필드method(string) - (필수) 셀이 "columns" 영역에 속하고 predicate가 정의된 경우 필드 predicateformat(string or object) - 날짜 형식 또는 숫자 형식 (필드에 형식 적용 참조)
footer- (선택) 헤더 레이블 또는 헤더 설정과 동일한 footer 설정을 포함하는 객체
data- (선택) 테이블 데이터를 포함하는 객체 배열; 각 객체는 하나의 행을 나타냅니다:id(number) - (필수) 행 idvalues(array) - (필수) 행 데이터를 포함하는 배열open(boolean) - (선택) 브랜치 상태$level(boolean) - (선택) 브랜치 인덱스
footer- (선택) true로 설정하면 테이블 하단에 footer가 표시됩니다; 기본값은 false이며 보이지 않습니다sizes- (선택) 테이블 크기 설정을 포함하는 객체 (columnWidth, footerHeight, headerHeight, rowHeight)split(object) - (선택) 다음 속성을 포함하는 객체:left(number) - 왼쪽에서 고정할 열 수right(number) - 오른쪽에서 고정할 열 수
tree- (선택) 트리 모드 활성화 여부를 정의합니다 (활성화된 경우 true)cellStyle- (선택) 셀에 커스텀 스타일을 적용하는 함수입니다. 행과 열 객체를 받아 CSS 클래스 이름 문자열을 반환합니다:(row, col) => string
정보
내부 이벤트를 처리하려면 Event Bus 메서드를 사용할 수 있습니다
반환값
callback은 boolean 또는 void를 반환할 수 있습니다.
이벤트 핸들러가 false를 반환하면 해당 작업이 차단됩니다. 이 경우 테이블 렌더링이 방지됩니다.
예제
다음 예제는 config 객체를 콘솔에 출력하고 footer를 추가하는 방법을 보여줍니다.
const table = new pivot.Pivot("#root", {
fields,
data: dataset,
config: {
rows: ["studio", "genre"],
columns: [],
values: [
{
field: "title",
method: "count"
},
{
field: "score",
method: "max"
}
]
}
});
table.api.intercept("render-table", (ev) => {
console.log(ev.config); //config 객체 출력
console.log(ev.config.columns); //columns 배열 출력
ev.config.footer = true;
ev.config.columns[0].footer = ["Custom footer"];
// 여기서 "false"를 반환하면 테이블 렌더링이 방지됩니다
});
다음 예제는 버튼 클릭으로 모든 행을 펼치거나 접는 방법을 보여줍니다. 트리 모드는 tableShape 속성을 통해 활성화해야 합니다.
const table = new pivot.Pivot("#root", {
tableShape: {
tree: true,
},
fields,
data: dataset,
config: {
rows: ["type", "studio"],
columns: [],
values: [
{
field: "score",
method: "max"
},
{
field: "rank",
method: "min"
},
{
field: "members",
method: "sum"
},
{
field: "episodes",
method: "count"
}
]
}
});
const api = table.api;
const tableApi = api.getTable();
// 테이블 구성 업데이트 시 모든 테이블 브랜치를 닫힌 상태로 설정
api.intercept("render-table", (ev) => {
ev.config.data.forEach((r) => (r.open = false));
// 여기서 "false"를 반환하면 테이블 렌더링이 방지됩니다
// return false;
});
function openAll() {
tableApi.exec("open-row", { id: 0, nested: true });
}
function closeAll() {
tableApi.exec("close-row", { id: 0, nested: true });
}
render-table 이벤트를 사용하여 열 고정 기능을 구성하는 방법도 참조하세요: 열 고정.
관련 글: pivot.template 헬퍼