정렬

헤더를 클릭하면 오름차순, 내림차순, 정렬 해제 순으로 바뀝니다. Shift 클릭(또는 Ctrl/⌘ 클릭)은 정렬 기준을 추가하고, 작은 숫자로 순서를 표시합니다. 빈 값은 항상 맨 뒤로 갑니다. 문자열은 현재 언어 기준으로 정렬하므로 한글, 악센트, 문자 속 숫자도…

실행 예제정렬

헤더를 누르면 정렬되고, Shift를 누른 채 누르면 여러 컬럼 기준으로 정렬됩니다.

이 데모의 코드

import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { button, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const columns = demoColumns(lang).map(c =>
    // Custom comparator: sort names by last name, then first name.
    c.field === 'name'
      ? { ...c, comparator: (a: unknown, b: unknown) => {
          const [fa, la] = String(a).split(' ');
          const [fb, lb] = String(b).split(' ');
          return la.localeCompare(lb) || fa.localeCompare(fb);
        } }
      : c,
  );
  const grid = createGrid(ctx.host, { columns, data: makeRows(5000), locale: lang });

  grid.on('sortChange', e => ctx.log(`sortChange → ${JSON.stringify(e.sort)}`));

  button(ctx, tr(lang, { en: 'Country ↑ then Total ↓', ko: '국가 ↑ 다음 합계 ↓' }), () =>
    grid.setSort([{ colId: 'country', dir: 'asc' }, { colId: 'total', dir: 'desc' }]));
  button(ctx, tr(lang, { en: 'Name by last name', ko: '이름(성 기준)' }), () => grid.setSort([{ colId: 'name', dir: 'asc' }]));
  button(ctx, tr(lang, { en: 'Clear sort', ko: '정렬 해제' }), () => grid.setSort([]));
  return grid;
}

헤더를 클릭하면 오름차순, 내림차순, 정렬 해제 순으로 바뀝니다. Shift 클릭(또는 Ctrl/⌘ 클릭)은 정렬 기준을 추가하고, 작은 숫자로 순서를 표시합니다. 빈 값은 항상 맨 뒤로 갑니다. 문자열은 현재 언어 기준으로 정렬하므로 한글, 악센트, 문자 속 숫자도 자연스럽게 정렬됩니다.

grid.setSort([{ colId: 'country', dir: 'asc' }, { colId: 'total', dir: 'desc' }]);
grid.getSort();
grid.setSort([]); // clear

// custom order
{ field: 'grade', comparator: (a, b) => ORDER.indexOf(a) - ORDER.indexOf(b) }