컬럼 도구 플러그인

import { ZixoGrid, columnToolsPlugin } from '../../src/index.js';
import { rows } from './column-tools.data.js';
import { createToolbar } from '../feature-controls.js';
const host = document.querySelector('#grid'),
  toolbar = document.querySelector('#toolbar'),
  report = document.querySelector('#report');
const { button, select } = createToolbar(toolbar, report);
const options = {
  rowKey: 'id',
  height: 360,
  rows: rows,
  columns: [
    { field: 'name', title: '주문', width: 240 },
    { field: 'qty', title: '수량', type: 'number', parse: Number },
    { field: 'price', title: '단가', type: 'number', parse: Number },
  ],
  plugins: [columnToolsPlugin()],
  columnMenu: ['columns', 'filter'],
};

const grid = new ZixoGrid(host, options);

window.addEventListener('pagehide', () => grid.destroy(), { once: true });
grid.on(
  'validationerror',
  (detail) => (report.textContent = detail.error.message),
);
button('컬럼 표시 설정', () => grid.openColumns());
select(
  '전체 헤더 메뉴',
  ['전체', '컬럼 표시 설정만', '필터만', '메뉴 없음'],
  (value) => {
    const choices = {
      '컬럼 표시 설정만': ['columns'],
      필터만: ['filter'],
      전체: ['columns', 'filter'],
      '메뉴 없음': [],
    };
    grid.options.columnMenu = choices[value];
    for (const column of grid.columns) delete column.columnMenu;
    grid.refresh();
  },
);
report.textContent =
  'columnMenu 배열로 헤더 메뉴에 넣을 영역과 순서를 지정합니다. columns=컬럼 표시 설정, filter=컬럼 필터이며 기본값은 전체입니다. 컬럼 배열은 그리드 배열을 대체하며 []는 메뉴를 숨깁니다. 이 예제의 전체 헤더 메뉴 선택은 주문·수량·단가의 모든 헤더에 적용합니다. 선택하면 컬럼별 columnMenu를 제거하고 그리드 기본 구성을 함께 상속합니다. 초기 선택은 전체이며 세 컬럼의 실제 메뉴와 일치합니다. 필터/정렬 상태와 API는 메뉴를 숨겨도 유지합니다. 컬럼 표시 설정은 표시 컬럼 관리와 같은 컬럼 검색·체크 목록을 하위 창으로 제공합니다. 목록의 체크박스·행 간격·색상·검색창·스크롤 스타일은 필터 값 목록과 같습니다. 체크하면 즉시 표시하고 해제하면 즉시 숨깁니다. 마지막 표시 컬럼은 숨길 수 없으며 권한이 없는 컬럼은 목록에서 제외합니다. 메뉴에는 정렬 항목을 제공하지 않습니다. 필터는 값 검색·모두 선택·체크 목록과 적용/초기화 버튼으로 구성합니다. 검색 중 적용하면 검색 결과에서 체크한 값만 반영합니다. 텍스트/숫자/날짜 필터를 누르면 두 조건을 AND/OR로 결합하는 하위 창이 열립니다. 각 적용은 해당 컬럼의 기존 필터만 교체하며 다른 컬럼·전역 조건은 유지합니다. Escape로 하위 창부터 닫고, 바깥 클릭은 전체를 닫습니다. 목록은 적재한 데이터 기준이며 200개씩 더 볼 수 있습니다. 서버 전체 데이터의 조건 조회는 조건 필터를 사용합니다.';

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ZixoGrid, columnToolsPlugin } from '../../src/index.js';
import { rows } from './column-tools.data.js';

// Instance and DOM belong to this component, never to window or a global ID.
const gridHost = ref(null);
const message = ref('');
const controls = ref([]);

let grid;
let alive = true;

async function run(action, value) {
  try {
    const result = await action(value);
    if (alive && result !== undefined)
      message.value =
        typeof result === 'string' ? result : JSON.stringify(result, null, 2);
  } catch (error) {
    if (alive) message.value = error.message;
  }
}

const button = (label, action) =>
  controls.value.push({ kind: 'button', label, action });
const select = (label, values, action) =>
  controls.value.push({
    kind: 'select',
    label,
    values,
    value: values[0],
    action,
  });

onMounted(() => {
  const options = {
    rowKey: 'id',
    height: 360,
    rows: rows,
    columns: [
      { field: 'name', title: '주문', width: 240 },
      { field: 'qty', title: '수량', type: 'number', parse: Number },
      { field: 'price', title: '단가', type: 'number', parse: Number },
    ],
    plugins: [columnToolsPlugin()],
    columnMenu: ['columns', 'filter'],
  };

  grid = new ZixoGrid(gridHost.value, options);

  grid.on(
    'validationerror',
    (detail) => (message.value = detail.error.message),
  );
  button('컬럼 표시 설정', () => grid.openColumns());
  select(
    '전체 헤더 메뉴',
    ['전체', '컬럼 표시 설정만', '필터만', '메뉴 없음'],
    (value) => {
      const choices = {
        '컬럼 표시 설정만': ['columns'],
        필터만: ['filter'],
        전체: ['columns', 'filter'],
        '메뉴 없음': [],
      };
      grid.options.columnMenu = choices[value];
      for (const column of grid.columns) delete column.columnMenu;
      grid.refresh();
    },
  );
  message.value =
    'columnMenu 배열로 헤더 메뉴에 넣을 영역과 순서를 지정합니다. columns=컬럼 표시 설정, filter=컬럼 필터이며 기본값은 전체입니다. 컬럼 배열은 그리드 배열을 대체하며 []는 메뉴를 숨깁니다. 이 예제의 전체 헤더 메뉴 선택은 주문·수량·단가의 모든 헤더에 적용합니다. 선택하면 컬럼별 columnMenu를 제거하고 그리드 기본 구성을 함께 상속합니다. 초기 선택은 전체이며 세 컬럼의 실제 메뉴와 일치합니다. 필터/정렬 상태와 API는 메뉴를 숨겨도 유지합니다. 컬럼 표시 설정은 표시 컬럼 관리와 같은 컬럼 검색·체크 목록을 하위 창으로 제공합니다. 목록의 체크박스·행 간격·색상·검색창·스크롤 스타일은 필터 값 목록과 같습니다. 체크하면 즉시 표시하고 해제하면 즉시 숨깁니다. 마지막 표시 컬럼은 숨길 수 없으며 권한이 없는 컬럼은 목록에서 제외합니다. 메뉴에는 정렬 항목을 제공하지 않습니다. 필터는 값 검색·모두 선택·체크 목록과 적용/초기화 버튼으로 구성합니다. 검색 중 적용하면 검색 결과에서 체크한 값만 반영합니다. 텍스트/숫자/날짜 필터를 누르면 두 조건을 AND/OR로 결합하는 하위 창이 열립니다. 각 적용은 해당 컬럼의 기존 필터만 교체하며 다른 컬럼·전역 조건은 유지합니다. Escape로 하위 창부터 닫고, 바깥 클릭은 전체를 닫습니다. 목록은 적재한 데이터 기준이며 200개씩 더 볼 수 있습니다. 서버 전체 데이터의 조건 조회는 조건 필터를 사용합니다.';
});
onBeforeUnmount(() => {
  alive = false;
  grid?.destroy(); // Cancels grid requests, removes events and releases plugins.
  grid = undefined;
});
defineExpose({ getGrid: () => grid });
</script>

<template>
  <main>
    <h1>컬럼 메뉴 · 표시 · 필터</h1>
    <div class="toolbar">
      <template v-for="(control, index) in controls" :key="index">
        <button
          v-if="control.kind === 'button'"
          type="button"
          @click="run(control.action)"
        >
          {{ control.label }}
        </button>
        <label v-else
          >{{ control.label }}
          <select
            v-model="control.value"
            :aria-label="control.label"
            @change="run(control.action, control.value)"
          >
            <option v-for="value in control.values" :key="value" :value="value">
              {{ value }}
            </option>
          </select>
        </label>
      </template>
    </div>
    <div ref="gridHost" class="vue-grid-host"></div>
    <div class="notes result" aria-live="polite">{{ message }}</div>
  </main>
</template>