headerShape
설명
선택 사항입니다. Pivot 테이블 헤더의 외관과 동작을 구성합니다
사용법
headerShape?: {
collapsible?: boolean,
vertical?: boolean,
template?: (label: string, field: string, subLabel?: string) => string,
cellStyle?: (
field: string,
value: any,
area: "rows"|"columns"|"values",
method?: string,
isTotal?: boolean)
=> string,
};
매개변수
collapsible- (선택 사항) true로 설정하면 테이블의 차원 그룹을 접을 수 있습니다. 기본값은 false입니다vertical- (선택 사항) true로 설정하면 모든 헤더의 텍스트 방향이 가로에서 세로로 변경됩니다. 기본값은 false입니다cellStyle- (선택 사항) 헤더 셀에 사용자 정의 스타일을 적용하는 함수입니다. 이 함수는 css 클래스 이름을 반환하며 다음 매개변수를 받습니다:field(string) - (필수) 셀이 해당하는 필드 이름을 나타내는 문자열입니다. 트리 열의 헤더인 경우 field는 ""입니다value(string | number | date) - (필수) 셀의 값입니다area- (필수) 셀이 위치한 테이블 영역을 나타내는 문자열입니다("rows", "columns" 또는 "values" 영역)method(string) - (선택 사항) "values" 영역의 필드에 대해 수행되는 연산(예: "sum", "count" 등)이나 "columns" 영역의 필드에 설정된 predicate 이름을 나타낼 수 있는 문자열입니다isTotal- (선택 사항) 셀이 합계 열에 속하는지 여부를 정의합니다
template- (선택 사항) 헤더의 텍스트 형식을 정의합니다. 기본적으로 행으로 적용된 필드에는label매개변수 값이 표시되고, 값으로 적용된 필드에는 label과 method가 함께 표시됩니다(예: Oil(count)). 이 함수는 필드 id, label, 그리고 method 또는 predicate id(있는 경우)를 받아 처리된 값을 반환합니다. 기본 template은 다음과 같습니다:
template: (label, id, subLabel) =>
label + (subLabel ? ` (${subLabel})` : "")
예제
아래 예제에서 values 필드의 헤더는 label과 method 이름(subLabel)을 표시하고 결과를 소문자로 변환합니다(예: profit (sum)):
new pivot.Pivot("#pivot", {
data,
headerShape: {
// 헤더 텍스트의 사용자 정의 template
template: (label, id, subLabel) => (label + (subLabel ? ` (${subLabel})` : "")).toLowerCase(),
},
config: {
rows: ["state", "product_type"],
columns: [],
values: [
{
field: "profit",
method: "sum"
},
{
field: "sales",
method: "sum"
},
// other values
],
},
fields,
});
관련 샘플:
관련 문서: