chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

테이블 데이터 바인딩

Browse Source
This commit is contained in:
dohyeons
2025-10-01 18:04:38 +09:00
parent dfa642798e
commit 7d801c0a2b
6 changed files with 363 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/components/report/designer/ReportPreviewModal.tsx
View File

@@ -297,28 +297,70 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
)}
{component.type === "table" && queryResult && queryResult.rows.length > 0 ? (
<table className="w-full border-collapse text-xs">
<thead>
<tr className="bg-gray-100">
{queryResult.fields.map((field) => (
<th key={field} className="border border-gray-300 p-1">
{field}
</th>
))}
</tr>
</thead>
<tbody>
{queryResult.rows.map((row, idx) => (
<tr key={idx}>
{queryResult.fields.map((field) => (
<td key={field} className="border border-gray-300 p-1">
{String(row[field] ?? "")}
</td>
(() => {
// tableColumns가 없으면 자동 생성
const columns =
component.tableColumns && component.tableColumns.length > 0
? component.tableColumns
: queryResult.fields.map((field) => ({
field,
header: field,
align: "left" as const,
}));
return (
<table
style={{
width: "100%",
borderCollapse: component.showBorder !== false ? "collapse" : "separate",
fontSize: "12px",
}}
>
<thead>
<tr
style={{
backgroundColor: component.headerBackgroundColor || "#f3f4f6",
color: component.headerTextColor || "#111827",
}}
>
{columns.map((col) => (
<th
key={col.field}
style={{
border: component.showBorder !== false ? "1px solid #d1d5db" : "none",
padding: "6px 8px",
textAlign: col.align || "left",
width: col.width ? `${col.width}px` : "auto",
fontWeight: "600",
}}
>
{col.header}
</th>
))}
</tr>
</thead>
<tbody>
{queryResult.rows.map((row, idx) => (
<tr key={idx}>
{columns.map((col) => (
<td
key={col.field}
style={{
border: component.showBorder !== false ? "1px solid #d1d5db" : "none",
padding: "6px 8px",
textAlign: col.align || "left",
height: component.rowHeight ? `${component.rowHeight}px` : "auto",
}}
>
{String(row[col.field] ?? "")}
</td>
))}
</tr>
))}
</tr>
))}
</tbody>
</table>
</tbody>
</table>
);
})()
) : component.type === "table" ? (
<div className="text-xs text-gray-400">쿼리를 실행해주세요</div>
) : null}