FreeGridv1.15.1English

필터 행 입력 문법

헤더 아래 필터 행에 입력하는 법: 텍스트는 =정확히, !제외, a | b, 패턴, /정규식/, 숫자는 >10, 10~20, 날짜는 범위와 상대 날짜 이름.

실행 예제필터 행

헤더 아래 칸에 문법대로 입력해 보세요.

이 데모의 코드
import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 170 },
      { field: 'email', header: h('Email', '이메일'), width: 240 },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 120 },
      { field: 'joined', header: h('Joined', '가입일'), type: 'date', width: 150 },
      { field: 'status', header: h('Status', '상태'), width: 120, filter: 'set' },
    ],
    data: makeRows(5000), locale: ctx.lang, filterRow: true,
  });
  grid.on('filterChange', e => ctx.log(JSON.stringify(e.filters)));
  text(ctx, h('Try: name =Emma Smith · !an · kim | park · *son  ·  Q1 >80000 · 1000~5000  ·  joined >2024-01-01 · This month (calendar button).',
    '해 보세요: 이름 =Emma Smith · !an · kim | park · *son  ·  1분기 >80000 · 1000~5000  ·  가입일 >2024-01-01 · 이번 달(달력 버튼).'));
  return grid;
}

filterRow: true를 켜면 헤더 아래 칸이 생기고, 입력하는 대로 걸러집니다(마지막 키 0.2초 뒤). Enter는 바로 적용, Esc는 지우기이고, 알아볼 수 없는 입력은 칸이 빨갛게 되며 필터는 그대로 둡니다.

createGrid(el, { columns, data, filterRow: true });

텍스트 컬럼

입력뜻
kim"kim"이 들어 있음(대소문자 무시)
ㄱㅎ초성: 김하늘을 찾음
=Seoul정확히 Seoul
!testtest가 없음
seoul | busanseoul 또는 busan이 들어 있음(여러 개 가능)
kim* · *@gmail.com · a?c값 전체 패턴: * 아무 글자, ? 한 글자
/^A[0-9]+$/정규식. 잘못되면 칸이 빨개짐

숫자 컬럼

입력뜻
1515와 같음(1,000과 ₩ $ € ¥도 읽음)
>10 · >=10 · <5 · <=5 · <>3초과, 이상, 미만, 이하, 같지 않음
10~20 · 10..2010 이상 20 이하

날짜 컬럼

입력뜻
2026-03-05 · 2026.3.5 · 2026/3/5그날
>2026-01-01 · <2026-12-31그날 이후 / 이전
2026-01-01~2026-03-31두 날짜 사이
이번 달 · 최근 7일 · 최근 14일그리드 언어의 상대 날짜 이름(달력 버튼이 써 넣는 그대로)
달력 버튼상대 날짜, 또는 한 번 누르면 그날·두 번 누르면 기간

목록 컬럼

filter: 'set' 컬럼, 참/거짓, 옵션 편집기(select·라디오·여러 값 선택·스위치·free: false 콤보) 컬럼은 칸 대신 드롭다운이 나옵니다. 옵션 이름이 옵션 순서대로 나오고, 고르면 그 값으로 걸러지며, 컬럼 메뉴에서 여러 값을 고르면 *(2개 선택됨)*처럼 보입니다.

한 필터, 세 곳

  • 필터 행, 컬럼 메뉴, setFilter()는 같은 필터입니다. 한쪽에서 바꾸면 다른 쪽에도 보입니다.
  • 칸으로 쓸 수 없는 필터(그리고로 묶은 두 조건 등)는 칸이 비어 있어도 걸려 있습니다.
  • 실시간 업데이트로 행이 바뀌어도 입력 중인 글자는 유지됩니다.
  • filter: false 컬럼에는 칸이 없습니다.
  • datasource일 때 !, *, /…/는 그냥 글자로 다룹니다(서버가 그 연산을 처리하지 않음).