From bd55b0621d57f38afa8ed037563f894037689dd4 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sat, 25 Jul 2026 20:41:01 +0900 Subject: [PATCH] feat(ux): upgrade QuantDataGrid header toolbar to premium trading-room style with quick search, status chips, and reset/autosize/export controls --- src/frontend/src/components/QuantDataGrid.vue | 198 ++++++++++++++++-- 1 file changed, 186 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/components/QuantDataGrid.vue b/src/frontend/src/components/QuantDataGrid.vue index 4ee6bed0..1c04b91a 100644 --- a/src/frontend/src/components/QuantDataGrid.vue +++ b/src/frontend/src/components/QuantDataGrid.vue @@ -12,6 +12,9 @@ const props = defineProps<{ const emit = defineEmits(['row-selected', 'cell-value-changed']); const gridApi = ref(null); +const selectedCount = ref(0); +const quickFilterText = ref(''); +const isExportMenuOpen = ref(false); // AG Grid v36 rowSelection deprecation 대응 const normalizedRowSelection = computed(() => { @@ -31,6 +34,7 @@ const onGridReady = (params: GridReadyEvent) => { const onSelectionChanged = () => { if (!gridApi.value) return; const selectedNodes = gridApi.value.getSelectedNodes(); + selectedCount.value = selectedNodes.length; const selectedData = selectedNodes.map(node => node.data); emit('row-selected', selectedRowPayload(selectedData)); }; @@ -46,26 +50,76 @@ const onCellValueChanged = (event: CellValueChangedEvent) => { emit('cell-value-changed', event); }; -const exportToExcel = () => { +const resetGridState = () => { if (!gridApi.value) return; + gridApi.value.setFilterModel(null); + gridApi.value.resetColumnState(); + quickFilterText.value = ''; +}; + +const autoSizeColumns = () => { + if (!gridApi.value) return; + gridApi.value.sizeColumnsToFit(); +}; + +const exportToCsv = () => { + if (!gridApi.value) return; + isExportMenuOpen.value = false; gridApi.value.exportDataAsCsv({ - fileName: `${props.filename || 'export'}_${new Date().toISOString().substring(0, 10)}.csv` + fileName: `${props.filename || 'quant_grid_export'}_${new Date().toISOString().substring(0, 10)}.csv` }); }; -defineExpose({ exportToExcel, gridApi }); +defineExpose({ exportToExcel: exportToCsv, resetGridState, autoSizeColumns, gridApi });