https://www.ag-grid.com/documentation/vue/getting-started/
## インストール
```
npm i ag-grid-community ag-grid-vue vue-property-decorator
```
## 設定
### nuxt.config.js
```
css: [
'ag-grid-community/dist/styles/ag-grid.css',
'ag-grid-community/dist/styles/ag-theme-balham.css',
],
```
### Vueファイル
```ts
import { AgGridVue } from 'ag-grid-vue';
@Component({
components: {
'ag-grid-vue': AgGridVue,
},
})
```
```html
<ag-grid-vue
style="width: 100%;"
class="ag-theme-balham tab-contents-height"
floatingFilter
animateRows
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="nodesByNormalizedNameOrderById(activeName)"
>
</ag-grid-vue>
```
```ts
defaultColDef: ColDef = {
filterParams: {
debounceMs: 200,
newRowsAction: 'keep',
},
sortable: true,
filter: true,
resizable: true,
floatingFilterComponentParams: { debounceMs: 200 },
};
columnDefs: ColDef[] = [
{ headerName: 'ノードID', field: 'id', width: 140 },
{ headerName: 'ノード名', field: 'name', width: 240 },
{ headerName: '読み仮名', field: 'ruby', width: 240 },
{ headerName: '都道府県', field: 'prefectures', width: 140 },
{ headerName: 'ファイル名', field: 'fileName', width: 240 },
{ headerName: '行番号', field: 'lineNumber', width: 100 },
];
```