텍스트 필터 연산

텍스트 필터 연산 전체: 포함, 포함하지 않음, 같음, 시작·끝 문자, 다음 중 하나, * ? 패턴, 정규식, 빈 값. 컬럼 메뉴·고급 필터·코드에서 씁니다.

실행 예제텍스트 필터 연산

2,000행에서 연산마다 버튼으로 걸러 보기.

이 데모의 코드

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: 260 }, { field: 'country', header: h('Country', '국가'), width: 150 }, { field: 'status', header: h('Status', '상태'), width: 110 }],
    data: makeRows(2000), locale: ctx.lang,
  });
  const count = text(ctx, '');
  const show = () => (count.textContent = h(`${grid.getDisplayedRowCount()} of 2,000 rows`, `2,000행 중 ${grid.getDisplayedRowCount()}행`));
  grid.on('filterChange', e => { ctx.log(JSON.stringify(e.filters)); show(); });
  const f = (label: string, colId: string, model: object | null) => button(ctx, label, () => grid.setFilter(colId, model as never));
  f(h('Name contains "an"', '이름에 "an" 포함'), 'name', { type: 'text', op: 'contains', value: 'an' });
  f(h('Name does not contain "an"', '이름에 "an" 없음'), 'name', { type: 'text', op: 'notContains', value: 'an' });
  f(h('Country is one of Japan, France', '국가가 Japan, France 중 하나'), 'country', { type: 'text', op: 'in', value: 'Japan, France' });
  f(h('Email matches *1@*', '이메일 패턴 *1@*'), 'email', { type: 'text', op: 'like', value: '*1@*' });
  f(h('Email regex ^m', '이메일 정규식 ^m'), 'email', { type: 'text', op: 'regex', value: '^m' });
  separator(ctx);
  button(ctx, h('Clear', '모두 해제'), () => { for (const id of Object.keys(grid.getFilterModel())) grid.setFilter(id, null); });
  show();
  return grid;
}

텍스트 컬럼(그리고 고급 필터의 옵션 컬럼)은 아래 연산으로 거릅니다. 대소문자를 구분하지 않고, 옵션 컬럼은 이름으로, 서식 값(전화번호)은 하이픈이 있든 없든 찾습니다.

연산 목록

연산자	모델	통과 조건
포함	{ op: 'contains', value: 'kim' }	글자 안에 값이 있음(초성 ㄱㅎ도 됨)
포함하지 않음	{ op: 'notContains', value: 'test' }	글자 안에 없음(빈 셀은 통과)
같음	{ op: 'equals', value: 'Seoul' }	글자 전체가 값과 같음
같지 않음	{ op: 'notEquals', value: 'Seoul' }	그 밖의 모든 값(빈 값 포함)
시작 문자 / 끝 문자	{ op: 'startsWith', value: 'A-' }	그 글자로 시작 / 끝남
다음 중 하나	{ op: 'in', value: 'Seoul, Busan, Incheon' }	쉼표나 줄바꿈으로 나눈 값 중 하나와 같음
패턴 일치 (* ?)	{ op: 'like', value: '*@gmail.com' }	글자 전체가 패턴에 맞음: * 아무 글자, ? 한 글자
정규식	{ op: 'regex', value: '^A[0-9]{3}$' }	정규식이 일치함(대소문자 무시, 잘못된 패턴이면 모든 행 유지)
빈 값 / 빈 값 아님	{ op: 'blank' }	비어 있음(null, undefined, 공백) / 그 밖

코드로 걸기

grid.setFilter('name', { type: 'text', op: 'notContains', value: 'test' });
grid.setFilter('city', { type: 'text', op: 'in', value: 'Seoul, Busan\nIncheon' });   // commas or lines
grid.setFilter('email', { type: 'text', op: 'like', value: '*@gmail.com' });
grid.setFilter('code', { type: 'text', op: 'regex', value: '^A[0-9]{3}$' });
grid.setFilter('name', { type: 'text', op: 'startsWith', value: 'ㄱ' });              // names starting with ㄱ
grid.setFilter('name', null);                                                          // clear

한 컬럼에 조건 두 개

컬럼 메뉴에서는 조건 두 개를 그리고/또는으로 묶습니다. 코드에서는 combined 모델이고, 두 개보다 많이 넣을 수도 있습니다.

grid.setFilter('email', {
  type: 'combined',
  operator: 'and',
  conditions: [
    { type: 'text', op: 'like', value: '*@*.kr' },
    { type: 'text', op: 'notContains', value: 'test' },
  ],
});

연산을 고르면 값 칸의 안내가 바뀝니다: 다음 중 하나는 a, b, c, 패턴 일치는 a*b?.
빈 값·빈 값 아님은 값이 필요 없어 칸이 숨겨집니다.
칸에서 Enter를 누르면 적용되고, 초기화는 컬럼 필터를 지웁니다.

서버 데이터(datasource)일 때

서버 예제는 포함·같음·시작/끝 문자·빈 값을 처리합니다. 다음 중 하나는 값 목록 필터({ type: 'set', values })로 바꿔 보내므로 서버에서도 됩니다. 포함하지 않음·패턴 일치·정규식은 datasource일 때 메뉴에 나오지 않고, 필터 행은 !, *, /…/를 그냥 글자로 다룹니다.

이 페이지에 대한 질문

특정 단어가 없는 행만 보려면?

컬럼 메뉴에서 '포함하지 않음'을 고르거나 setFilter('name', { type: 'text', op: 'notContains', value: 'test' })를 쓰세요. 필터 행에서는 !test라고 입력합니다.

와일드카드나 정규식으로 거를 수 있나요?

네. op 'like'는 값 전체에 대해 *(아무 글자)와 ?(한 글자)를, op 'regex'는 정규식(대소문자 무시)을 받습니다. 필터 행에서는 kim*이나 /^A\d+$/처럼 씁니다.