Skip to content

Filters output

When the filter is valid, so no syntax or type errors, the onValueChange prop output parameter is a structure representing the written filter text, otherwise it is null

.ts
ts
const filters = createDatabitFilters(rootEl, {
  onValueChange: ({ output }) => {
    if (output !== null) {
      doSomethingWithOutput(output);
    }
  },
});

An example filter input (assuming variables x, y and z are available):

x = 0 and y < 1 and z != "hello"

Transforms into a following output:

js
{
  "type": "logic",
  "operator": "and",
  "children": [
    {
      "type": "condition",
      "variable": "x",
      "operator": "=",
      "value": "0",
    },
    {
      "type": "logic",
      "operator": "and",
      "children": [
        {
          "type": "condition",
          "variable": "y",
          "operator": "<",
          "value": "1",
        },
        {
          "type": "condition",
          "variable": "z",
          "operator": "!=",
          "value": "\"hello\"", // note that the double quotes stay for strings
        },
      ],
    },
  ],
}