48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
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 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"
|
||
|
|
/>
|
||
|
|
</template>
|