Vue

<script setup lang="ts">
import type { GridApi } from '@freegridjs/core';
import { FreeGrid } from '@freegridjs/vue';
import { computed, ref, shallowRef } from 'vue';
import { demoColumns, makeRows, type Lang } from './data';

const props = defineProps<{ lang: Lang }>();
const t = (en: string, ko: string) => (props.lang === 'ko' ? ko : en);

const columns = computed(() => demoColumns(props.lang));
const rows = shallowRef(makeRows(1000));
const theme = ref<'light' | 'dark'>('light');
const fontSize = ref(13);
const clicked = ref('');
const selected = ref(0);
const summary = computed(() => ({ rows: [{ label: t('Total', '합계'), columns: { total: 'sum' as const, id: 'count' as const } }] }));
const grid = ref<{ getApi(): GridApi | null } | null>(null);

const addRows = () => (rows.value = makeRows(rows.value.length + 1000));
const sortByTotal = () => grid.value?.getApi()?.setSort([{ colId: 'total', dir: 'desc' }]);
</script>

<template>
  <div>
    <div class="demo-controls">
      <button type="button" @click="addRows">{{ t('Add 1,000 rows', '1,000행 추가') }}</button>
      <button type="button" :aria-pressed="theme === 'dark'" @click="theme = theme === 'dark' ? 'light' : 'dark'">
        {{ t('Dark theme', '다크 테마') }}
      </button>
      <button type="button" @click="sortByTotal">{{ t('Sort by total (getApi)', '합계 정렬 (getApi)') }}</button>
      <label>
        {{ t('Font size', '글꼴 크기') }}
        <select v-model.number="fontSize">
          <option v-for="n in [9, 10, 11, 12, 13, 14, 15, 16, 17, 18]" :key="n" :value="n">{{ n }}px</option>
        </select>
      </label>
      <span class="demo-note" style="margin: 0">
        {{ t(`${rows.length.toLocaleString()} rows · ${selected} selected`, `${rows.length.toLocaleString()}행 · ${selected}개 선택`) }}
      </span>
    </div>
    <FreeGrid
      ref="grid"
      class="demo-grid"
      :height="480"
      :columns="columns"
      :data="rows"
      :theme="theme"
      :font-size="fontSize"
      :locale="lang"
      row-selection="multiple"
      :get-row-id="row => String(row.id)"
      :summary="summary"
      @cell-click="e => (clicked = `${e.colId}: ${String(e.value)}`)"
      @selection-change="e => (selected = e.selected.length)"
    />
    <p class="demo-note">{{ clicked ? `@cell-click → ${clicked}` : t('Click any cell.', '아무 셀이나 클릭해 보세요.') }}</p>
  </div>
</template>