📔
DataGrid Documentation
  • Getting Started
  • Buy DataGrid on CodeCanyon
  • Controls
    • Text Filter
    • Sort DropDown Control
    • Sort Button Control
    • Checkbox Filter
    • Radio Button Filter
    • Select Filter
    • Button Filter
    • Pagination
    • Page Size Control
    • Label Control
    • Reset Button
  • Multiple version of the same control (data-id attribute)
  • Languages Support
  • Special Classes
  • Deep Links
  • Storage
  • Multiple DataGrids on Page
  • Filter AND/OR Logic [NEW]
  • How To
    • How To Sort Table in JavaScript
    • HTML Table with Sortable Headers
    • How to Filter HTML Table By Multiple Columns
    • Double Sort (Multiple Column Ordering)
Powered by GitBook
On this page

Was this helpful?

  1. Controls

Text Filter

PreviousGetting StartedNextSort DropDown Control

Last updated 4 years ago

Was this helpful?

The text filter control is used to find HTML elements that match the user input.

<input
    type="text"
    placeholder="Filter by title"
    data-grid-control="text-filter"
    data-path=".title"
/>

Data Attribute

Value

Description

Required

data-grid-control

text-filter

This attribute defines the control type.

Required

data-path

any CSS selector

It defines the path to the item that should be filtered.

Optional

data-mode

  • contains

  • startsWith

  • endsWith

  • equal

Filter mode. The default value is "contains".

Optional

data-id

any alphanumeric string

This attribute may be used in the deep-link,

local storage, or complex filter logic.

Optional

data-skip

[^a-zA-Z0-9]+

Defines a regex of characters that should be skipped.

Optional

If the filter returns no results, it's possible to add .

no results found label