Advanced Query Builder for Svelte – SVAR Svelte Filter

SVAR Svelte Filter is a filtering solution that adds advanced query-building capabilities to Svelte applications.

It currently provides three components that work together to create flexible data filtering experiences: FilterBuilder for complex multi-field queries, FilterBar for simple form-based filtering, and FilterEditor for single-field rule editing.

Features

Use Cases

• E-commerce Product Lists: Allow customers to filter products by category, price range, brand, and other attributes simultaneously.
• Data Dashboards: Create advanced query builders for users to analyze and visualize complex datasets from multiple angles.
• Admin Panels: Enable administrators to search and filter through user lists, application logs, or order histories with high precision.
• Project Management Tools: Let team members filter tasks by status, assignee, priority, and due date to manage their workflows.
• Real Estate Listings: Provide a powerful search for homebuyers to filter properties by location, price, size, and number of rooms.

Installation

1. Install the package using npm:

npm install wx-svelte-filter

2. You can then import the components you need and add them to your Svelte application.

FilterBuilder Component

The FilterBuilder component allows users to construct detailed queries.

<script>
  import { FilterBuilder } from 'wx-svelte-filter';
  const fields = [
      { id: "first_name", label: "Name", type: "text" },
      { id: "age", label: "Age", type: "number" },
      { id: "created_date", label: "Created", type: "date" }
  ];
  const options = {
      first_name: ["Alex", "Marta", "Claire", "David"],
      age: [21, 25, 28, 35, 42, 51, 53]
  };
  function handleFilterChange(event) {
      console.log('Filter changed:', event.detail);
  }
</script>
<FilterBuilder 
  {fields} 
  {options} 
  on:change={handleFilterChange}
/>

FilterBar Component

The FilterBar provides a more compact, single-line interface for filtering.

<script>
  import { FilterBar } from "wx-svelte-filter";
  const fields = [
      "first_name",
      { id: "age", type: "number"},
      { id: "status", type: "select", options: ["active", "inactive"] }
  ];
  let filterValue = {};
</script>
<FilterBar 
  {fields} 
  bind:value={filterValue}
/>

FilterEditor Component

Use the FilterEditor for editing a single rule. You can dynamically provide options based on the selected field.

<script>
  import { FilterEditor } from "wx-svelte-filter";
  const fields = [
      { id: "first_name", label: "First Name", type: "text" },
      { id: "age", label: "Age", type: "number" },
      { id: "country", label: "Country", type: "text" }
  ];
  const options = {
      first_name: ["Alex", "Adam", "John", "Jane"],
      age: [17, 21, 35, 42],
      country: ["USA", "Canada", "UK", "Germany"]
  };
  function provideOptions(field) {
      return options[field] || [];
  }
  let currentRule = {};
</script>
<FilterEditor 
  {fields} 
  field="age" 
  options={provideOptions}
  bind:value={currentRule}
/>

FAQs

Q: Can I customize the appearance of the filter components?
A: Yes, the library offers configurable layouts, including vertical, horizontal, and a minimal filter bar, to better match your application’s styling.

Q: Does the component support loading filter options from a server?
A: Yes, it features dynamic loading, which allows you to fetch and populate filter options on demand as the user interacts with the query builder.

Q: Can I customize the operators available for different field types?
A: Yes, you can define custom operators for each field type. The library supports standard operators like equals, contains, greater than, and less than, but you can extend these with your own custom operators.