1363 lines
43 KiB
TypeScript
1363 lines
43 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* PivotGrid 메인 컴포넌트
|
|
* 다차원 데이터 분석을 위한 피벗 테이블
|
|
*/
|
|
|
|
import React, { useState, useMemo, useCallback, useEffect, useRef } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
PivotGridProps,
|
|
PivotResult,
|
|
PivotFieldConfig,
|
|
PivotCellData,
|
|
PivotFlatRow,
|
|
PivotCellValue,
|
|
PivotGridState,
|
|
} from "./types";
|
|
import { processPivotData, pathToKey } from "./utils/pivotEngine";
|
|
import { exportPivotToExcel } from "./utils/exportExcel";
|
|
import { getConditionalStyle, formatStyleToReact, CellFormatStyle } from "./utils/conditionalFormat";
|
|
import { FieldPanel } from "./components/FieldPanel";
|
|
import { FieldChooser } from "./components/FieldChooser";
|
|
import { DrillDownModal } from "./components/DrillDownModal";
|
|
import { PivotChart } from "./components/PivotChart";
|
|
import { FilterPopup } from "./components/FilterPopup";
|
|
import { useVirtualScroll } from "./hooks/useVirtualScroll";
|
|
import {
|
|
ChevronRight,
|
|
ChevronDown,
|
|
Download,
|
|
Settings,
|
|
RefreshCw,
|
|
Maximize2,
|
|
Minimize2,
|
|
LayoutGrid,
|
|
FileSpreadsheet,
|
|
BarChart3,
|
|
Filter,
|
|
ArrowUp,
|
|
ArrowDown,
|
|
ArrowUpDown,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
// ==================== 서브 컴포넌트 ====================
|
|
|
|
// 행 헤더 셀
|
|
interface RowHeaderCellProps {
|
|
row: PivotFlatRow;
|
|
rowFields: PivotFieldConfig[];
|
|
onToggleExpand: (path: string[]) => void;
|
|
}
|
|
|
|
const RowHeaderCell: React.FC<RowHeaderCellProps> = ({
|
|
row,
|
|
rowFields,
|
|
onToggleExpand,
|
|
}) => {
|
|
const indentSize = row.level * 20;
|
|
|
|
return (
|
|
<td
|
|
className={cn(
|
|
"border-r border-b border-border bg-muted/50",
|
|
"px-2 py-1.5 text-left text-sm",
|
|
"whitespace-nowrap font-medium",
|
|
row.isExpanded && "bg-muted/70"
|
|
)}
|
|
style={{ paddingLeft: `${8 + indentSize}px` }}
|
|
>
|
|
<div className="flex items-center gap-1">
|
|
{row.hasChildren && (
|
|
<button
|
|
onClick={() => onToggleExpand(row.path)}
|
|
className="p-0.5 hover:bg-accent rounded"
|
|
>
|
|
{row.isExpanded ? (
|
|
<ChevronDown className="h-3.5 w-3.5" />
|
|
) : (
|
|
<ChevronRight className="h-3.5 w-3.5" />
|
|
)}
|
|
</button>
|
|
)}
|
|
{!row.hasChildren && <span className="w-4" />}
|
|
<span>{row.caption}</span>
|
|
</div>
|
|
</td>
|
|
);
|
|
};
|
|
|
|
// 데이터 셀
|
|
interface DataCellProps {
|
|
values: PivotCellValue[];
|
|
isTotal?: boolean;
|
|
isSelected?: boolean;
|
|
onClick?: () => void;
|
|
onDoubleClick?: () => void;
|
|
conditionalStyle?: CellFormatStyle;
|
|
}
|
|
|
|
const DataCell: React.FC<DataCellProps> = ({
|
|
values,
|
|
isTotal = false,
|
|
isSelected = false,
|
|
onClick,
|
|
onDoubleClick,
|
|
conditionalStyle,
|
|
}) => {
|
|
// 조건부 서식 스타일 계산
|
|
const cellStyle = conditionalStyle ? formatStyleToReact(conditionalStyle) : {};
|
|
const hasDataBar = conditionalStyle?.dataBarWidth !== undefined;
|
|
const icon = conditionalStyle?.icon;
|
|
|
|
// 선택 상태 스타일
|
|
const selectedClass = isSelected && "ring-2 ring-primary ring-inset bg-primary/10";
|
|
|
|
if (!values || values.length === 0) {
|
|
return (
|
|
<td
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1.5 text-right text-sm",
|
|
isTotal && "bg-primary/5 font-medium",
|
|
selectedClass
|
|
)}
|
|
style={cellStyle}
|
|
onClick={onClick}
|
|
onDoubleClick={onDoubleClick}
|
|
>
|
|
-
|
|
</td>
|
|
);
|
|
}
|
|
|
|
// 단일 데이터 필드인 경우
|
|
if (values.length === 1) {
|
|
return (
|
|
<td
|
|
className={cn(
|
|
"border-r border-b border-border relative",
|
|
"px-2 py-1.5 text-right text-sm tabular-nums",
|
|
isTotal && "bg-primary/5 font-medium",
|
|
(onClick || onDoubleClick) && "cursor-pointer hover:bg-accent/50",
|
|
selectedClass
|
|
)}
|
|
style={cellStyle}
|
|
onClick={onClick}
|
|
onDoubleClick={onDoubleClick}
|
|
>
|
|
{/* Data Bar */}
|
|
{hasDataBar && (
|
|
<div
|
|
className="absolute inset-y-0 left-0 opacity-30"
|
|
style={{
|
|
width: `${conditionalStyle?.dataBarWidth}%`,
|
|
backgroundColor: conditionalStyle?.dataBarColor || "#3b82f6",
|
|
}}
|
|
/>
|
|
)}
|
|
<span className="relative z-10 flex items-center justify-end gap-1">
|
|
{icon && <span>{icon}</span>}
|
|
{values[0].formattedValue}
|
|
</span>
|
|
</td>
|
|
);
|
|
}
|
|
|
|
// 다중 데이터 필드인 경우
|
|
return (
|
|
<>
|
|
{values.map((val, idx) => (
|
|
<td
|
|
key={idx}
|
|
className={cn(
|
|
"border-r border-b border-border relative",
|
|
"px-2 py-1.5 text-right text-sm tabular-nums",
|
|
isTotal && "bg-primary/5 font-medium",
|
|
(onClick || onDoubleClick) && "cursor-pointer hover:bg-accent/50",
|
|
selectedClass
|
|
)}
|
|
style={cellStyle}
|
|
onClick={onClick}
|
|
onDoubleClick={onDoubleClick}
|
|
>
|
|
{hasDataBar && (
|
|
<div
|
|
className="absolute inset-y-0 left-0 opacity-30"
|
|
style={{
|
|
width: `${conditionalStyle?.dataBarWidth}%`,
|
|
backgroundColor: conditionalStyle?.dataBarColor || "#3b82f6",
|
|
}}
|
|
/>
|
|
)}
|
|
<span className="relative z-10 flex items-center justify-end gap-1">
|
|
{icon && <span>{icon}</span>}
|
|
{val.formattedValue}
|
|
</span>
|
|
</td>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
|
|
// ==================== 메인 컴포넌트 ====================
|
|
|
|
export const PivotGridComponent: React.FC<PivotGridProps> = ({
|
|
title,
|
|
fields: initialFields = [],
|
|
totals = {
|
|
showRowGrandTotals: true,
|
|
showColumnGrandTotals: true,
|
|
showRowTotals: true,
|
|
showColumnTotals: true,
|
|
},
|
|
style = {
|
|
theme: "default",
|
|
headerStyle: "default",
|
|
cellPadding: "normal",
|
|
borderStyle: "light",
|
|
alternateRowColors: true,
|
|
highlightTotals: true,
|
|
},
|
|
fieldChooser,
|
|
chart: chartConfig,
|
|
allowExpandAll = true,
|
|
height = "auto",
|
|
maxHeight,
|
|
exportConfig,
|
|
data: externalData,
|
|
onCellClick,
|
|
onCellDoubleClick,
|
|
onFieldDrop,
|
|
onExpandChange,
|
|
}) => {
|
|
// 디버깅 로그
|
|
console.log("🔶 PivotGridComponent props:", {
|
|
title,
|
|
hasExternalData: !!externalData,
|
|
externalDataLength: externalData?.length,
|
|
initialFieldsLength: initialFields?.length,
|
|
});
|
|
// ==================== 상태 ====================
|
|
|
|
const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
|
|
const [pivotState, setPivotState] = useState<PivotGridState>({
|
|
expandedRowPaths: [],
|
|
expandedColumnPaths: [],
|
|
sortConfig: null,
|
|
filterConfig: {},
|
|
});
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
const [showFieldPanel, setShowFieldPanel] = useState(false); // 기본적으로 접힌 상태
|
|
const [showFieldChooser, setShowFieldChooser] = useState(false);
|
|
const [drillDownData, setDrillDownData] = useState<{
|
|
open: boolean;
|
|
cellData: PivotCellData | null;
|
|
}>({ open: false, cellData: null });
|
|
const [showChart, setShowChart] = useState(chartConfig?.enabled || false);
|
|
const [containerHeight, setContainerHeight] = useState(400);
|
|
const tableContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
// 셀 선택 상태
|
|
const [selectedCell, setSelectedCell] = useState<{
|
|
rowIndex: number;
|
|
colIndex: number;
|
|
} | null>(null);
|
|
const tableRef = useRef<HTMLTableElement>(null);
|
|
|
|
// 정렬 상태
|
|
const [sortConfig, setSortConfig] = useState<{
|
|
field: string;
|
|
direction: "asc" | "desc";
|
|
} | null>(null);
|
|
|
|
// 외부 fields 변경 시 동기화
|
|
useEffect(() => {
|
|
if (initialFields.length > 0) {
|
|
setFields(initialFields);
|
|
}
|
|
}, [initialFields]);
|
|
|
|
// 데이터
|
|
const data = externalData || [];
|
|
|
|
// ==================== 필드 분류 ====================
|
|
|
|
const rowFields = useMemo(
|
|
() =>
|
|
fields
|
|
.filter((f) => f.area === "row" && f.visible !== false)
|
|
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
|
|
[fields]
|
|
);
|
|
|
|
const columnFields = useMemo(
|
|
() =>
|
|
fields
|
|
.filter((f) => f.area === "column" && f.visible !== false)
|
|
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
|
|
[fields]
|
|
);
|
|
|
|
const dataFields = useMemo(
|
|
() =>
|
|
fields
|
|
.filter((f) => f.area === "data" && f.visible !== false)
|
|
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
|
|
[fields]
|
|
);
|
|
|
|
// 필터 영역 필드
|
|
const filterFields = useMemo(
|
|
() =>
|
|
fields
|
|
.filter((f) => f.area === "filter" && f.visible !== false)
|
|
.sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
|
|
[fields]
|
|
);
|
|
|
|
// 사용 가능한 필드 목록 (FieldChooser용)
|
|
const availableFields = useMemo(() => {
|
|
if (data.length === 0) return [];
|
|
|
|
const sampleRow = data[0];
|
|
return Object.keys(sampleRow).map((key) => {
|
|
const existingField = fields.find((f) => f.field === key);
|
|
const value = sampleRow[key];
|
|
|
|
// 데이터 타입 추론
|
|
let dataType: "string" | "number" | "date" | "boolean" = "string";
|
|
if (typeof value === "number") dataType = "number";
|
|
else if (typeof value === "boolean") dataType = "boolean";
|
|
else if (value instanceof Date) dataType = "date";
|
|
else if (typeof value === "string") {
|
|
// 날짜 문자열 감지
|
|
if (/^\d{4}-\d{2}-\d{2}/.test(value)) dataType = "date";
|
|
}
|
|
|
|
return {
|
|
field: key,
|
|
caption: existingField?.caption || key,
|
|
dataType,
|
|
isSelected: existingField?.visible !== false,
|
|
currentArea: existingField?.area,
|
|
};
|
|
});
|
|
}, [data, fields]);
|
|
|
|
// ==================== 필터 적용 ====================
|
|
|
|
const filteredData = useMemo(() => {
|
|
if (!data || data.length === 0) return data;
|
|
|
|
// 필터 영역의 필드들로 데이터 필터링
|
|
const activeFilters = fields.filter(
|
|
(f) => f.area === "filter" && f.filterValues && f.filterValues.length > 0
|
|
);
|
|
|
|
if (activeFilters.length === 0) return data;
|
|
|
|
return data.filter((row) => {
|
|
return activeFilters.every((filter) => {
|
|
const value = row[filter.field];
|
|
const filterValues = filter.filterValues || [];
|
|
const filterType = filter.filterType || "include";
|
|
|
|
if (filterType === "include") {
|
|
return filterValues.includes(value);
|
|
} else {
|
|
return !filterValues.includes(value);
|
|
}
|
|
});
|
|
});
|
|
}, [data, fields]);
|
|
|
|
// ==================== 피벗 처리 ====================
|
|
|
|
const pivotResult = useMemo<PivotResult | null>(() => {
|
|
if (!filteredData || filteredData.length === 0 || fields.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const visibleFields = fields.filter((f) => f.visible !== false);
|
|
// 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외)
|
|
if (visibleFields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return processPivotData(
|
|
filteredData,
|
|
visibleFields,
|
|
pivotState.expandedRowPaths,
|
|
pivotState.expandedColumnPaths
|
|
);
|
|
}, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
|
|
|
|
// 조건부 서식용 전체 값 수집
|
|
const allCellValues = useMemo(() => {
|
|
if (!pivotResult) return new Map<string, number[]>();
|
|
|
|
const valuesByField = new Map<string, number[]>();
|
|
|
|
// 데이터 매트릭스에서 모든 값 수집
|
|
pivotResult.dataMatrix.forEach((values) => {
|
|
values.forEach((val) => {
|
|
if (val.field && typeof val.value === "number" && !isNaN(val.value)) {
|
|
const existing = valuesByField.get(val.field) || [];
|
|
existing.push(val.value);
|
|
valuesByField.set(val.field, existing);
|
|
}
|
|
});
|
|
});
|
|
|
|
// 행 총계 값 수집
|
|
pivotResult.grandTotals.row.forEach((values) => {
|
|
values.forEach((val) => {
|
|
if (val.field && typeof val.value === "number" && !isNaN(val.value)) {
|
|
const existing = valuesByField.get(val.field) || [];
|
|
existing.push(val.value);
|
|
valuesByField.set(val.field, existing);
|
|
}
|
|
});
|
|
});
|
|
|
|
// 열 총계 값 수집
|
|
pivotResult.grandTotals.column.forEach((values) => {
|
|
values.forEach((val) => {
|
|
if (val.field && typeof val.value === "number" && !isNaN(val.value)) {
|
|
const existing = valuesByField.get(val.field) || [];
|
|
existing.push(val.value);
|
|
valuesByField.set(val.field, existing);
|
|
}
|
|
});
|
|
});
|
|
|
|
return valuesByField;
|
|
}, [pivotResult]);
|
|
|
|
// ==================== 가상 스크롤 ====================
|
|
|
|
const ROW_HEIGHT = 32; // 행 높이 (px)
|
|
const VIRTUAL_SCROLL_THRESHOLD = 50; // 이 행 수 이상이면 가상 스크롤 활성화
|
|
|
|
// 컨테이너 높이 측정
|
|
useEffect(() => {
|
|
if (!tableContainerRef.current) return;
|
|
|
|
const observer = new ResizeObserver((entries) => {
|
|
for (const entry of entries) {
|
|
setContainerHeight(entry.contentRect.height);
|
|
}
|
|
});
|
|
|
|
observer.observe(tableContainerRef.current);
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
// 가상 스크롤 훅 사용
|
|
const flatRows = pivotResult?.flatRows || [];
|
|
const enableVirtualScroll = flatRows.length > VIRTUAL_SCROLL_THRESHOLD;
|
|
|
|
const virtualScroll = useVirtualScroll({
|
|
itemCount: flatRows.length,
|
|
itemHeight: ROW_HEIGHT,
|
|
containerHeight: containerHeight,
|
|
overscan: 10,
|
|
});
|
|
|
|
// 가상 스크롤 적용된 행 데이터
|
|
const visibleFlatRows = useMemo(() => {
|
|
if (!enableVirtualScroll) return flatRows;
|
|
return flatRows.slice(virtualScroll.startIndex, virtualScroll.endIndex + 1);
|
|
}, [enableVirtualScroll, flatRows, virtualScroll.startIndex, virtualScroll.endIndex]);
|
|
|
|
// 조건부 서식 스타일 계산 헬퍼
|
|
const getCellConditionalStyle = useCallback(
|
|
(value: number | undefined, field: string): CellFormatStyle => {
|
|
if (!style?.conditionalFormats || style.conditionalFormats.length === 0) {
|
|
return {};
|
|
}
|
|
const allValues = allCellValues.get(field) || [];
|
|
return getConditionalStyle(value, field, style.conditionalFormats, allValues);
|
|
},
|
|
[style?.conditionalFormats, allCellValues]
|
|
);
|
|
|
|
// ==================== 이벤트 핸들러 ====================
|
|
|
|
// 필드 변경
|
|
const handleFieldsChange = useCallback(
|
|
(newFields: PivotFieldConfig[]) => {
|
|
setFields(newFields);
|
|
},
|
|
[]
|
|
);
|
|
|
|
// 행 확장/축소
|
|
const handleToggleRowExpand = useCallback(
|
|
(path: string[]) => {
|
|
setPivotState((prev) => {
|
|
const pathKey = pathToKey(path);
|
|
const existingIndex = prev.expandedRowPaths.findIndex(
|
|
(p) => pathToKey(p) === pathKey
|
|
);
|
|
|
|
let newPaths: string[][];
|
|
if (existingIndex >= 0) {
|
|
newPaths = prev.expandedRowPaths.filter(
|
|
(_, i) => i !== existingIndex
|
|
);
|
|
} else {
|
|
newPaths = [...prev.expandedRowPaths, path];
|
|
}
|
|
|
|
onExpandChange?.(newPaths);
|
|
|
|
return {
|
|
...prev,
|
|
expandedRowPaths: newPaths,
|
|
};
|
|
});
|
|
},
|
|
[onExpandChange]
|
|
);
|
|
|
|
// 전체 확장
|
|
const handleExpandAll = useCallback(() => {
|
|
if (!pivotResult) return;
|
|
|
|
const allRowPaths: string[][] = [];
|
|
pivotResult.flatRows.forEach((row) => {
|
|
if (row.hasChildren) {
|
|
allRowPaths.push(row.path);
|
|
}
|
|
});
|
|
|
|
setPivotState((prev) => ({
|
|
...prev,
|
|
expandedRowPaths: allRowPaths,
|
|
expandedColumnPaths: [],
|
|
}));
|
|
}, [pivotResult]);
|
|
|
|
// 전체 축소
|
|
const handleCollapseAll = useCallback(() => {
|
|
setPivotState((prev) => ({
|
|
...prev,
|
|
expandedRowPaths: [],
|
|
expandedColumnPaths: [],
|
|
}));
|
|
}, []);
|
|
|
|
// 셀 클릭
|
|
const handleCellClick = useCallback(
|
|
(rowPath: string[], colPath: string[], values: PivotCellValue[]) => {
|
|
if (!onCellClick) return;
|
|
|
|
const cellData: PivotCellData = {
|
|
value: values[0]?.value,
|
|
rowPath,
|
|
columnPath: colPath,
|
|
field: values[0]?.field,
|
|
};
|
|
|
|
onCellClick(cellData);
|
|
},
|
|
[onCellClick]
|
|
);
|
|
|
|
// 셀 더블클릭 (Drill Down)
|
|
const handleCellDoubleClick = useCallback(
|
|
(rowPath: string[], colPath: string[], values: PivotCellValue[]) => {
|
|
const cellData: PivotCellData = {
|
|
value: values[0]?.value,
|
|
rowPath,
|
|
columnPath: colPath,
|
|
field: values[0]?.field,
|
|
};
|
|
|
|
// Drill Down 모달 열기
|
|
setDrillDownData({ open: true, cellData });
|
|
|
|
// 외부 콜백 호출
|
|
if (onCellDoubleClick) {
|
|
onCellDoubleClick(cellData);
|
|
}
|
|
},
|
|
[onCellDoubleClick]
|
|
);
|
|
|
|
// CSV 내보내기
|
|
const handleExportCSV = useCallback(() => {
|
|
if (!pivotResult) return;
|
|
|
|
const { flatRows, flatColumns, dataMatrix, grandTotals } = pivotResult;
|
|
|
|
let csv = "";
|
|
|
|
// 헤더 행
|
|
const headerRow = [""].concat(
|
|
flatColumns.map((col) => col.caption || "총계")
|
|
);
|
|
if (totals?.showRowGrandTotals) {
|
|
headerRow.push("총계");
|
|
}
|
|
csv += headerRow.join(",") + "\n";
|
|
|
|
// 데이터 행
|
|
flatRows.forEach((row) => {
|
|
const rowData = [row.caption];
|
|
|
|
flatColumns.forEach((col) => {
|
|
const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
|
|
const values = dataMatrix.get(cellKey);
|
|
rowData.push(values?.[0]?.value?.toString() || "");
|
|
});
|
|
|
|
if (totals?.showRowGrandTotals) {
|
|
const rowTotal = grandTotals.row.get(pathToKey(row.path));
|
|
rowData.push(rowTotal?.[0]?.value?.toString() || "");
|
|
}
|
|
|
|
csv += rowData.join(",") + "\n";
|
|
});
|
|
|
|
// 열 총계 행
|
|
if (totals?.showColumnGrandTotals) {
|
|
const totalRow = ["총계"];
|
|
flatColumns.forEach((col) => {
|
|
const colTotal = grandTotals.column.get(pathToKey(col.path));
|
|
totalRow.push(colTotal?.[0]?.value?.toString() || "");
|
|
});
|
|
if (totals?.showRowGrandTotals) {
|
|
totalRow.push(grandTotals.grand[0]?.value?.toString() || "");
|
|
}
|
|
csv += totalRow.join(",") + "\n";
|
|
}
|
|
|
|
// 다운로드
|
|
const blob = new Blob(["\uFEFF" + csv], {
|
|
type: "text/csv;charset=utf-8;",
|
|
});
|
|
const link = document.createElement("a");
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = `${title || "pivot"}_export.csv`;
|
|
link.click();
|
|
}, [pivotResult, totals, title]);
|
|
|
|
// Excel 내보내기
|
|
const handleExportExcel = useCallback(async () => {
|
|
if (!pivotResult) return;
|
|
|
|
try {
|
|
await exportPivotToExcel(pivotResult, fields, totals, {
|
|
fileName: title || "pivot_export",
|
|
title: title,
|
|
});
|
|
} catch (error) {
|
|
console.error("Excel 내보내기 실패:", error);
|
|
}
|
|
}, [pivotResult, fields, totals, title]);
|
|
|
|
// ==================== 렌더링 ====================
|
|
|
|
// 빈 상태
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col items-center justify-center",
|
|
"p-8 text-center text-muted-foreground",
|
|
"border border-dashed border-border rounded-lg"
|
|
)}
|
|
>
|
|
<RefreshCw className="h-8 w-8 mb-2 opacity-50" />
|
|
<p className="text-sm">데이터가 없습니다</p>
|
|
<p className="text-xs mt-1">데이터를 로드하거나 필드를 설정해주세요</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 필드 미설정 (행, 열, 데이터 영역에 필드가 있는지 확인)
|
|
const hasActiveFields = fields.some(
|
|
(f) => f.visible !== false && ["row", "column", "data"].includes(f.area)
|
|
);
|
|
if (!hasActiveFields) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col",
|
|
"border border-border rounded-lg overflow-hidden bg-background"
|
|
)}
|
|
>
|
|
{/* 필드 패널 */}
|
|
<FieldPanel
|
|
fields={fields}
|
|
onFieldsChange={handleFieldsChange}
|
|
collapsed={!showFieldPanel}
|
|
onToggleCollapse={() => setShowFieldPanel(!showFieldPanel)}
|
|
/>
|
|
|
|
{/* 안내 메시지 */}
|
|
<div className="flex flex-col items-center justify-center p-8 text-center text-muted-foreground">
|
|
<Settings className="h-8 w-8 mb-2 opacity-50" />
|
|
<p className="text-sm">필드가 설정되지 않았습니다</p>
|
|
<p className="text-xs mt-1">
|
|
행, 열, 데이터 영역에 필드를 배치해주세요
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="mt-4"
|
|
onClick={() => setShowFieldChooser(true)}
|
|
>
|
|
<LayoutGrid className="h-4 w-4 mr-2" />
|
|
필드 선택기 열기
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 필드 선택기 모달 */}
|
|
<FieldChooser
|
|
open={showFieldChooser}
|
|
onOpenChange={setShowFieldChooser}
|
|
availableFields={availableFields}
|
|
selectedFields={fields}
|
|
onFieldsChange={handleFieldsChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 피벗 결과 없음
|
|
if (!pivotResult) {
|
|
return (
|
|
<div className="flex items-center justify-center p-8">
|
|
<RefreshCw className="h-5 w-5 animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const { flatColumns, dataMatrix, grandTotals } = pivotResult;
|
|
|
|
// ==================== 키보드 네비게이션 ====================
|
|
|
|
// 키보드 핸들러
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (!selectedCell) return;
|
|
|
|
const { rowIndex, colIndex } = selectedCell;
|
|
const maxRowIndex = visibleFlatRows.length - 1;
|
|
const maxColIndex = flatColumns.length - 1;
|
|
|
|
let newRowIndex = rowIndex;
|
|
let newColIndex = colIndex;
|
|
|
|
switch (e.key) {
|
|
case "ArrowUp":
|
|
e.preventDefault();
|
|
newRowIndex = Math.max(0, rowIndex - 1);
|
|
break;
|
|
case "ArrowDown":
|
|
e.preventDefault();
|
|
newRowIndex = Math.min(maxRowIndex, rowIndex + 1);
|
|
break;
|
|
case "ArrowLeft":
|
|
e.preventDefault();
|
|
newColIndex = Math.max(0, colIndex - 1);
|
|
break;
|
|
case "ArrowRight":
|
|
e.preventDefault();
|
|
newColIndex = Math.min(maxColIndex, colIndex + 1);
|
|
break;
|
|
case "Home":
|
|
e.preventDefault();
|
|
if (e.ctrlKey) {
|
|
newRowIndex = 0;
|
|
newColIndex = 0;
|
|
} else {
|
|
newColIndex = 0;
|
|
}
|
|
break;
|
|
case "End":
|
|
e.preventDefault();
|
|
if (e.ctrlKey) {
|
|
newRowIndex = maxRowIndex;
|
|
newColIndex = maxColIndex;
|
|
} else {
|
|
newColIndex = maxColIndex;
|
|
}
|
|
break;
|
|
case "PageUp":
|
|
e.preventDefault();
|
|
newRowIndex = Math.max(0, rowIndex - 10);
|
|
break;
|
|
case "PageDown":
|
|
e.preventDefault();
|
|
newRowIndex = Math.min(maxRowIndex, rowIndex + 10);
|
|
break;
|
|
case "Enter":
|
|
e.preventDefault();
|
|
// 셀 더블클릭과 동일한 동작 (드릴다운)
|
|
if (visibleFlatRows[rowIndex] && flatColumns[colIndex]) {
|
|
const row = visibleFlatRows[rowIndex];
|
|
const col = flatColumns[colIndex];
|
|
const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
|
|
const values = dataMatrix.get(cellKey) || [];
|
|
// 드릴다운 모달 열기
|
|
const cellData: PivotCellData = {
|
|
value: values[0]?.value,
|
|
rowPath: row.path,
|
|
columnPath: col.path,
|
|
field: values[0]?.field,
|
|
};
|
|
setDrillDownData({ open: true, cellData });
|
|
}
|
|
break;
|
|
case "Escape":
|
|
e.preventDefault();
|
|
setSelectedCell(null);
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
|
|
if (newRowIndex !== rowIndex || newColIndex !== colIndex) {
|
|
setSelectedCell({ rowIndex: newRowIndex, colIndex: newColIndex });
|
|
}
|
|
};
|
|
|
|
// 셀 클릭으로 선택
|
|
const handleCellSelect = (rowIndex: number, colIndex: number) => {
|
|
setSelectedCell({ rowIndex, colIndex });
|
|
};
|
|
|
|
// 정렬 토글
|
|
const handleSort = (field: string) => {
|
|
setSortConfig((prev) => {
|
|
if (prev?.field === field) {
|
|
// 같은 필드 클릭: asc -> desc -> null 순환
|
|
if (prev.direction === "asc") {
|
|
return { field, direction: "desc" };
|
|
}
|
|
return null; // 정렬 해제
|
|
}
|
|
// 새로운 필드: asc로 시작
|
|
return { field, direction: "asc" };
|
|
});
|
|
};
|
|
|
|
// 정렬 아이콘 렌더링
|
|
const SortIcon = ({ field }: { field: string }) => {
|
|
if (sortConfig?.field !== field) {
|
|
return <ArrowUpDown className="h-3 w-3 opacity-30" />;
|
|
}
|
|
if (sortConfig.direction === "asc") {
|
|
return <ArrowUp className="h-3 w-3 text-primary" />;
|
|
}
|
|
return <ArrowDown className="h-3 w-3 text-primary" />;
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col",
|
|
"border border-border rounded-lg overflow-hidden",
|
|
"bg-background",
|
|
isFullscreen && "fixed inset-4 z-50 shadow-2xl"
|
|
)}
|
|
style={{
|
|
height: isFullscreen ? "auto" : height,
|
|
maxHeight: isFullscreen ? "none" : maxHeight,
|
|
}}
|
|
>
|
|
{/* 필드 패널 - 항상 렌더링 (collapsed 상태로 접기/펼치기 제어) */}
|
|
<FieldPanel
|
|
fields={fields}
|
|
onFieldsChange={handleFieldsChange}
|
|
collapsed={!showFieldPanel}
|
|
onToggleCollapse={() => setShowFieldPanel(!showFieldPanel)}
|
|
/>
|
|
|
|
{/* 헤더 툴바 */}
|
|
<div className="flex items-center justify-between px-3 py-2 border-b border-border bg-muted/30">
|
|
<div className="flex items-center gap-2">
|
|
{title && <h3 className="text-sm font-medium">{title}</h3>}
|
|
<span className="text-xs text-muted-foreground">
|
|
({filteredData.length !== data.length
|
|
? `${filteredData.length} / ${data.length}건`
|
|
: `${data.length}건`})
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
{/* 필드 선택기 버튼 */}
|
|
{fieldChooser?.enabled !== false && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={() => setShowFieldChooser(true)}
|
|
title="필드 선택기"
|
|
>
|
|
<LayoutGrid className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
|
|
{/* 필드 패널 토글 */}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={() => setShowFieldPanel(!showFieldPanel)}
|
|
title={showFieldPanel ? "필드 패널 숨기기" : "필드 패널 보기"}
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
</Button>
|
|
|
|
{allowExpandAll && (
|
|
<>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={handleExpandAll}
|
|
title="전체 확장"
|
|
>
|
|
<ChevronDown className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={handleCollapseAll}
|
|
title="전체 축소"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{/* 차트 토글 */}
|
|
{chartConfig && (
|
|
<Button
|
|
variant={showChart ? "secondary" : "ghost"}
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={() => setShowChart(!showChart)}
|
|
title={showChart ? "차트 숨기기" : "차트 보기"}
|
|
>
|
|
<BarChart3 className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
|
|
{/* 내보내기 버튼들 */}
|
|
{exportConfig?.excel && (
|
|
<>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={handleExportCSV}
|
|
title="CSV 내보내기"
|
|
>
|
|
<Download className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={handleExportExcel}
|
|
title="Excel 내보내기"
|
|
>
|
|
<FileSpreadsheet className="h-4 w-4" />
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={() => setIsFullscreen(!isFullscreen)}
|
|
title={isFullscreen ? "원래 크기" : "전체 화면"}
|
|
>
|
|
{isFullscreen ? (
|
|
<Minimize2 className="h-4 w-4" />
|
|
) : (
|
|
<Maximize2 className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 필터 바 - 필터 영역에 필드가 있을 때만 표시 */}
|
|
{filterFields.length > 0 && (
|
|
<div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-orange-50/50 dark:bg-orange-950/10">
|
|
<Filter className="h-3.5 w-3.5 text-orange-600 dark:text-orange-400" />
|
|
<span className="text-xs font-medium text-orange-700 dark:text-orange-300">필터:</span>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{filterFields.map((filterField) => {
|
|
const selectedValues = filterField.filterValues || [];
|
|
const isFiltered = selectedValues.length > 0;
|
|
|
|
return (
|
|
<FilterPopup
|
|
key={filterField.field}
|
|
field={filterField}
|
|
data={data}
|
|
onFilterChange={(field, values, type) => {
|
|
const newFields = fields.map((f) =>
|
|
f.field === field.field && f.area === field.area
|
|
? { ...f, filterValues: values, filterType: type }
|
|
: f
|
|
);
|
|
handleFieldsChange(newFields);
|
|
}}
|
|
trigger={
|
|
<button
|
|
className={cn(
|
|
"flex items-center gap-1.5 px-2 py-1 rounded text-xs",
|
|
"border transition-colors",
|
|
isFiltered
|
|
? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
|
|
: "bg-background border-border hover:bg-accent"
|
|
)}
|
|
>
|
|
<span>{filterField.caption}</span>
|
|
{isFiltered && (
|
|
<span className="bg-orange-500 text-white px-1 rounded text-[10px]">
|
|
{selectedValues.length}
|
|
</span>
|
|
)}
|
|
<ChevronDown className="h-3 w-3" />
|
|
</button>
|
|
}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 피벗 테이블 */}
|
|
<div
|
|
ref={tableContainerRef}
|
|
className="flex-1 overflow-auto focus:outline-none"
|
|
style={{ maxHeight: enableVirtualScroll ? containerHeight : undefined }}
|
|
tabIndex={0}
|
|
onKeyDown={handleKeyDown}
|
|
>
|
|
<table ref={tableRef} className="w-full border-collapse">
|
|
<thead>
|
|
{/* 열 헤더 */}
|
|
<tr className="bg-muted/50">
|
|
{/* 좌상단 코너 (행 필드 라벨 + 필터) */}
|
|
<th
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-2 text-left text-xs font-medium",
|
|
"bg-muted sticky left-0 top-0 z-20"
|
|
)}
|
|
rowSpan={columnFields.length > 0 ? 2 : 1}
|
|
>
|
|
<div className="flex items-center gap-1 flex-wrap">
|
|
{rowFields.map((f, idx) => (
|
|
<div key={f.field} className="flex items-center gap-0.5 group">
|
|
<span>{f.caption}</span>
|
|
<FilterPopup
|
|
field={f}
|
|
data={data}
|
|
onFilterChange={(field, values, type) => {
|
|
const newFields = fields.map((fld) =>
|
|
fld.field === field.field && fld.area === "row"
|
|
? { ...fld, filterValues: values, filterType: type }
|
|
: fld
|
|
);
|
|
handleFieldsChange(newFields);
|
|
}}
|
|
trigger={
|
|
<button
|
|
className={cn(
|
|
"p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
|
|
"hover:bg-accent",
|
|
f.filterValues && f.filterValues.length > 0 && "opacity-100 text-primary"
|
|
)}
|
|
>
|
|
<Filter className="h-3 w-3" />
|
|
</button>
|
|
}
|
|
/>
|
|
{idx < rowFields.length - 1 && <span className="mx-0.5 text-muted-foreground">/</span>}
|
|
</div>
|
|
))}
|
|
{rowFields.length === 0 && <span>항목</span>}
|
|
</div>
|
|
</th>
|
|
|
|
{/* 열 헤더 셀 */}
|
|
{flatColumns.map((col, idx) => (
|
|
<th
|
|
key={idx}
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1.5 text-center text-xs font-medium",
|
|
"bg-muted/70 sticky top-0 z-10",
|
|
dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
|
|
)}
|
|
colSpan={dataFields.length || 1}
|
|
onClick={dataFields.length === 1 ? () => handleSort(dataFields[0].field) : undefined}
|
|
>
|
|
<div className="flex items-center justify-center gap-1">
|
|
<span>{col.caption || "(전체)"}</span>
|
|
{dataFields.length === 1 && <SortIcon field={dataFields[0].field} />}
|
|
</div>
|
|
</th>
|
|
))}
|
|
|
|
{/* 열 필드 필터 (헤더 왼쪽에 표시) */}
|
|
{columnFields.length > 0 && (
|
|
<th
|
|
className={cn(
|
|
"border-b border-border",
|
|
"px-1 py-1.5 text-center text-xs",
|
|
"bg-muted/50 sticky top-0 z-10"
|
|
)}
|
|
rowSpan={columnFields.length > 0 ? 2 : 1}
|
|
>
|
|
<div className="flex flex-col gap-0.5">
|
|
{columnFields.map((f) => (
|
|
<FilterPopup
|
|
key={f.field}
|
|
field={f}
|
|
data={data}
|
|
onFilterChange={(field, values, type) => {
|
|
const newFields = fields.map((fld) =>
|
|
fld.field === field.field && fld.area === "column"
|
|
? { ...fld, filterValues: values, filterType: type }
|
|
: fld
|
|
);
|
|
handleFieldsChange(newFields);
|
|
}}
|
|
trigger={
|
|
<button
|
|
className={cn(
|
|
"p-0.5 rounded hover:bg-accent",
|
|
f.filterValues && f.filterValues.length > 0 && "text-primary"
|
|
)}
|
|
title={`${f.caption} 필터`}
|
|
>
|
|
<Filter className="h-3 w-3" />
|
|
</button>
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
</th>
|
|
)}
|
|
|
|
{/* 행 총계 헤더 */}
|
|
{totals?.showRowGrandTotals && (
|
|
<th
|
|
className={cn(
|
|
"border-b border-border",
|
|
"px-2 py-1.5 text-center text-xs font-medium",
|
|
"bg-primary/10 sticky top-0 z-10"
|
|
)}
|
|
colSpan={dataFields.length || 1}
|
|
>
|
|
총계
|
|
</th>
|
|
)}
|
|
</tr>
|
|
|
|
{/* 데이터 필드 라벨 (다중 데이터 필드인 경우) */}
|
|
{dataFields.length > 1 && (
|
|
<tr className="bg-muted/30">
|
|
{flatColumns.map((col, colIdx) => (
|
|
<React.Fragment key={colIdx}>
|
|
{dataFields.map((df, dfIdx) => (
|
|
<th
|
|
key={`${colIdx}-${dfIdx}`}
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1 text-center text-xs font-normal",
|
|
"text-muted-foreground cursor-pointer hover:bg-accent/50"
|
|
)}
|
|
onClick={() => handleSort(df.field)}
|
|
>
|
|
<div className="flex items-center justify-center gap-1">
|
|
<span>{df.caption}</span>
|
|
<SortIcon field={df.field} />
|
|
</div>
|
|
</th>
|
|
))}
|
|
</React.Fragment>
|
|
))}
|
|
{totals?.showRowGrandTotals &&
|
|
dataFields.map((df, dfIdx) => (
|
|
<th
|
|
key={`total-${dfIdx}`}
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1 text-center text-xs font-normal",
|
|
"bg-primary/5 text-muted-foreground"
|
|
)}
|
|
>
|
|
{df.caption}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
)}
|
|
</thead>
|
|
|
|
<tbody>
|
|
{/* 가상 스크롤 상단 여백 */}
|
|
{enableVirtualScroll && virtualScroll.offsetTop > 0 && (
|
|
<tr style={{ height: virtualScroll.offsetTop }}>
|
|
<td colSpan={rowFields.length + flatColumns.length + (totals?.showRowGrandTotals ? dataFields.length : 0)} />
|
|
</tr>
|
|
)}
|
|
|
|
{visibleFlatRows.map((row, idx) => {
|
|
// 실제 행 인덱스 계산
|
|
const rowIdx = enableVirtualScroll ? virtualScroll.startIndex + idx : idx;
|
|
|
|
return (
|
|
<tr
|
|
key={rowIdx}
|
|
className={cn(
|
|
style?.alternateRowColors &&
|
|
rowIdx % 2 === 1 &&
|
|
"bg-muted/20"
|
|
)}
|
|
style={{ height: ROW_HEIGHT }}
|
|
>
|
|
{/* 행 헤더 */}
|
|
<RowHeaderCell
|
|
row={row}
|
|
rowFields={rowFields}
|
|
onToggleExpand={handleToggleRowExpand}
|
|
/>
|
|
|
|
{/* 데이터 셀 */}
|
|
{flatColumns.map((col, colIdx) => {
|
|
const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
|
|
const values = dataMatrix.get(cellKey) || [];
|
|
|
|
// 조건부 서식 (첫 번째 값 기준)
|
|
const conditionalStyle =
|
|
values.length > 0 && values[0].field
|
|
? getCellConditionalStyle(values[0].value ?? undefined, values[0].field)
|
|
: undefined;
|
|
|
|
// 선택 상태 확인
|
|
const isCellSelected = selectedCell?.rowIndex === rowIdx && selectedCell?.colIndex === colIdx;
|
|
|
|
return (
|
|
<DataCell
|
|
key={colIdx}
|
|
values={values}
|
|
conditionalStyle={conditionalStyle}
|
|
isSelected={isCellSelected}
|
|
onClick={() => {
|
|
handleCellSelect(rowIdx, colIdx);
|
|
if (onCellClick) {
|
|
handleCellClick(row.path, col.path, values);
|
|
}
|
|
}}
|
|
onDoubleClick={() =>
|
|
handleCellDoubleClick(row.path, col.path, values)
|
|
}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{/* 행 총계 */}
|
|
{totals?.showRowGrandTotals && (
|
|
<DataCell
|
|
values={grandTotals.row.get(pathToKey(row.path)) || []}
|
|
isTotal
|
|
/>
|
|
)}
|
|
</tr>
|
|
);
|
|
})}
|
|
|
|
{/* 가상 스크롤 하단 여백 */}
|
|
{enableVirtualScroll && (
|
|
<tr style={{ height: virtualScroll.totalHeight - virtualScroll.offsetTop - (visibleFlatRows.length * ROW_HEIGHT) }}>
|
|
<td colSpan={rowFields.length + flatColumns.length + (totals?.showRowGrandTotals ? dataFields.length : 0)} />
|
|
</tr>
|
|
)}
|
|
|
|
{/* 열 총계 행 */}
|
|
{totals?.showColumnGrandTotals && (
|
|
<tr className="bg-primary/5 font-medium">
|
|
<td
|
|
className={cn(
|
|
"border-r border-b border-border",
|
|
"px-2 py-1.5 text-left text-sm",
|
|
"bg-primary/10 sticky left-0"
|
|
)}
|
|
>
|
|
총계
|
|
</td>
|
|
|
|
{flatColumns.map((col, colIdx) => (
|
|
<DataCell
|
|
key={colIdx}
|
|
values={grandTotals.column.get(pathToKey(col.path)) || []}
|
|
isTotal
|
|
/>
|
|
))}
|
|
|
|
{/* 대총합 */}
|
|
{totals?.showRowGrandTotals && (
|
|
<DataCell values={grandTotals.grand} isTotal />
|
|
)}
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* 차트 */}
|
|
{showChart && chartConfig && pivotResult && (
|
|
<PivotChart
|
|
pivotResult={pivotResult}
|
|
config={{
|
|
...chartConfig,
|
|
enabled: true,
|
|
}}
|
|
dataFields={dataFields}
|
|
/>
|
|
)}
|
|
|
|
{/* 필드 선택기 모달 */}
|
|
<FieldChooser
|
|
open={showFieldChooser}
|
|
onOpenChange={setShowFieldChooser}
|
|
availableFields={availableFields}
|
|
selectedFields={fields}
|
|
onFieldsChange={handleFieldsChange}
|
|
/>
|
|
|
|
{/* Drill Down 모달 */}
|
|
<DrillDownModal
|
|
open={drillDownData.open}
|
|
onOpenChange={(open) => setDrillDownData((prev) => ({ ...prev, open }))}
|
|
cellData={drillDownData.cellData}
|
|
data={data}
|
|
fields={fields}
|
|
rowFields={rowFields}
|
|
columnFields={columnFields}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PivotGridComponent;
|