bio_frontend/components/base/ToastGrid.vue

<script setup lang="ts">
import { ref, defineExpose } from 'vue';
import type { OptColumn, OptRow } from 'tui-grid/types/options';
import type { TuiGridElement } from 'vue3-tui-grid';
import type Grid from 'tui-grid';

interface TreeColumnOptions {
  name: string;
  useCascadingCheckbox?: boolean;
}

const tuiGridRef = ref<TuiGridElement>();

const selectionUnit = "row"

const props = defineProps<{
  data: OptRow[];
  // editor: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide-kor.md
  columns: OptColumn[];
  treeColumnOptions?: TreeColumnOptions;
  rowHeaders?: string[];
  rowKey?: string;
}>();

// grid api : https://nhn.github.io/tui.grid/latest/Grid
// const ref = ref<InstanceType<typeof ToastGrid>>();
// ref.value?.api()?.clear();  
// ref.value?.api()?.getModifiedRows();
defineExpose({
  api: (): Grid | undefined => tuiGridRef.value?.gridInstance,
  clearGrid: () => clearGrid(),
});

function clearGrid() {
  tuiGridRef.value?.gridInstance.clear();
}

</script>

<template>
    <tui-grid
      ref="tuiGridRef"
      :data="props.data"
      :columns="props.columns"
      :treeColumnOptions="props.treeColumnOptions"
      :rowHeaders="props.rowHeaders"
      :rowKey="props.rowKey"
      :selectionUnit="selectionUnit"
    />
</template>