Skip to content
Backlit
Esc
navigateopen⌘Jpreview
On this page

Text filter

Filter data with free text.

A text filter accepts one text value. Backlit removes whitespace from the start and end. Empty text does not apply a filter.

API

filters.text(name: string): TextFilterBuilder
Method Input Result
setLabel string Sets the filter-control label.

Basic text filter

Use a text filter for a search term or another free-text query.

import {
  defineFilters,
  defineResource,
  filters,
  section,
} from '@backlit/sdk'

const orders = defineResource('orders', [])
const orderFilters = defineFilters([
  filters.text('search'),
])

orders.view(
  'list',
  { filters: orderFilters },
  (_ctx, view) =>
    section('Orders').setFilters(view.state.filters)
)

export default orders
{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "list",
    "slots": {
      "content": [
        {
          "kind": "section",
          "title": "Orders",
          "slots": {
            "content": [],
            "filters": {
              "kind": "filters",
              "resource": "orders",
              "view": "list",
              "keyword": "f",
              "definesResult": true,
              "dependsOnResult": false,
              "filters": [
                {
                  "kind": "text",
                  "name": "search",
                  "label": ""
                }
              ]
            }
          }
        }
      ]
    }
  }
}

Was this page helpful?