Vue3 Nuxt3 AG Grid 사용 방법

https://www.ag-grid.com/

AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid

 

npm install ag-grid-vue3 ag-grid-community

 

<template>
    <div>
        <ag-grid-vue
            id="1"
            :rowData="rowData"
            :columnDefs="colDefs"
            :rowSelection="rowSelection"
            @rowClicked="rowClick"
            @grid-ready="onGridReady"
            style="height: 500px;"
            class="ag-theme-quartz-dark"
            >
        </ag-grid-vue>
    </div>
    <div>
        <button @click="getSelectedRows()">삭제</button>
    </div>
</template>

<script setup>
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the Data Grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the Data Grid
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component

let testGrid = null;

const onGridReady = (event) => {
    testGrid = event.api
    testGrid.sizeColumnsToFit()  // 처음 로드된 후 칼럼 너비 자동 조정
}

const rowSelection = {
    mode: 'multiRow',
    selectAll: 'filtered'
}

const rowData = ref([
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
]);

// Column Definitions: Defines the columns to be displayed.
const colDefs = ref([
    { field: "make" },
    { field: "model" },
    { field: "electric" }
]);

const rowClick = (event) => {
    console.log(event.data); 
}

const getSelectedRows = () => {
    const selectedRows = testGrid.getSelectedRows()
    console.log("선택된 데이터:", selectedRows)
}
</script>

<style scoped>
/* 테마 커스텀 */
.ag-theme-quartz-dark {
    /* Changes the color of the grid text */
    --ag-foreground-color: rgb(14, 68, 145);
    /* Changes the color of the grid background */
    --ag-background-color: rgb(241, 247, 255);
    /* Changes the header color of the top row */
    --ag-header-background-color: rgb(228, 237, 250);
    /* Changes the hover color of the row*/
    --ag-row-hover-color: rgb(216, 226, 255);
}

</style>