Find

Ctrl+F opens a find bar inside the grid that searches every row, highlights matches and steps through them; find() does the same from code.

Paid feature · Find. Free for 30 days on a new domain; after that it needs a free personal key or a company key. See pricing

Live demoFind

Ctrl+F inside the grid: matches highlighted, next and previous.

Code for this demo

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

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: demoColumns(lang),
    data: makeRows(5000),
    locale: lang,
    findBar: true, // Ctrl+F inside the grid opens the find bar
  });

  text(ctx, h('Click a cell and press Ctrl+F (⌘F), or type below. Enter goes to the next match, Shift+Enter to the previous one.',
    '셀을 클릭하고 Ctrl+F(⌘F)를 누르거나 아래에 입력해 보세요. Enter는 다음, Shift+Enter는 이전 결과로 갑니다.'));
  separator(ctx);
  search(ctx, h('Find in the grid', '그리드에서 찾기'), q => ctx.log(`find("${q}") → ${grid.find(q)}`));
  button(ctx, h('Previous', '이전'), () => grid.findPrevious());
  button(ctx, h('Next', '다음'), () => grid.findNext());
  button(ctx, h('Clear', '지우기'), () => grid.clearFind());
  return grid;
}

The browser's own find only sees the rows on screen, because a grid draws just those. Press Ctrl+F (⌘F) while the grid has focus and a find bar opens inside the grid instead: it searches every row, highlights the matching cells, scrolls to the first one and shows "3/120". Enter goes to the next match, Shift+Enter to the previous one, and Escape closes the bar and clears the highlights.

Matching ignores case and looks at the text as shown, so formatted numbers and dates match what people see. Find follows the current sort and filters and updates when the data changes. From code, find() returns the number of matches; findNext(), findPrevious() and clearFind() move and clear. Use it for your own search box, as in the demo.

createGrid(el, { columns, data, findBar: true });   // default: Ctrl+F opens the bar in the grid

const n = grid.find('Seoul');   // highlights matches, focuses the first, returns the count
grid.findNext();                // Enter in the bar
grid.findPrevious();            // Shift+Enter in the bar
grid.clearFind();               // remove the highlights

// findBar: false leaves Ctrl+F to the browser; find() still works

To hide rows instead of highlighting cells, use the quick search, setQuickFilter(), on Filtering.

Korean initial consonants work here too: ㄱㅎㄴ finds 김하늘, as in the filters, the quick search and the column chooser search.

Options and methods

Name	Type	Description
`findBar`	`boolean`	Ctrl+F (⌘F) opens a find bar inside the grid (default true); false leaves Ctrl+F to the browser.
`find(text)`	`number`	Highlight the cells containing the text (any case, as shown on screen), focus the first and return the number of matches (at most 10,000).
`findNext() / findPrevious() / clearFind()`	`void`	Go to the next or previous match, or remove the highlights.

Questions about this page

Does Ctrl+F find rows that are not on screen?

Yes. Inside the grid Ctrl+F opens a find bar that searches every row and highlights the matches; find(), findNext() and findPrevious() do the same from code.