Introduction

Filter Sphere is a powerful and flexible library for creating dynamic filtering interfaces in your web applications. It provides a set of tools and components to help you build intuitive and customizable filtering interfaces.

Here’s a basic example:

Preview

And

idnamecreatedAtstatusequalsnot equal>>=<<=Delete

Add RuleAdd Group

id	name	createdAt	status
1	rundown shift	5/26/2014	cancelled
2	sinful mix	5/23/2022	completed
3	dense call	3/5/2013	pending
4	querulous chemistry	7/17/2022	cancelled
5	alarming depth	4/7/2021	completed
6	nasty notice	7/20/2021	pending
7	lean tone	2/9/2021	pending
8	puny devil	6/26/2019	pending
9	classic leave	1/29/2014	pending
10	perky fuel	6/12/2023	pending
11	sociable cut	1/12/2015	pending
12	angry remote	10/9/2020	completed
13	kooky instruction	7/2/2015	pending
14	exemplary appearance	5/18/2017	completed
15	pretty bitter	7/23/2016	cancelled
16	super leadership	9/7/2018	pending
17	firsthand base	8/8/2021	cancelled
18	creepy soft	7/23/2018	pending
19	feminine sale	3/15/2014	pending
20	dismal cut	6/24/2022	pending
21	clear sister	9/26/2019	cancelled
22	essential dog	11/10/2021	cancelled
23	required concentrate	7/2/2022	completed
24	deficient theme	5/28/2019	cancelled
25	blind suggestion	3/7/2023	completed
26	expert chocolate	8/20/2022	cancelled
27	pretty detail	10/22/2021	pending
28	impure consideration	10/29/2017	pending
29	delayed whole	3/28/2016	completed
30	agile spot	7/5/2023	pending

Code

import {
  FilterBuilder,
  FilterSphereProvider,
  useFilterSphere,
} from "@fn-sphere/filter";
import { z } from "zod";
import { Table } from "../table";
import { data } from "./utils";

// 1. define the schema for your data
const schema = z.object({
  id: z.number(),
  name: z.string(),
  createdAt: z.date(),
  status: z.union([
    z.literal("pending"),
    z.literal("completed"),
    z.literal("cancelled"),
  ]),
});

export type Data = z.infer<typeof schema>;

export function AdvancedFilter() {
  // 2. use the `useFilterSphere` hook to get the context and predicate
  const { context, predicate } = useFilterSphere({ schema });
  return (
    <>
      {/* 3. display the FilterBuilder inside the FilterSphereProvider */}
      <FilterSphereProvider context={context}>
        <FilterBuilder />
      </FilterSphereProvider>
      {/* 4. use the predicate to filter the data */}
      <Table
        schema={schema}
        data={data.filter(predicate)}
        className="max-h-[250px]"
      />
    </>
  );
}

export default AdvancedFilter;

Key Features

• Easy Integration: Seamlessly integrate Filter Sphere into your existing projects.
• Customizable Themes: Create your own themes or use pre-built ones to match your application’s design.
• Flexible Data Input: Support for various data input views to accommodate different filtering needs.
• Progressive Enhancement: Start with basic components and gradually expand functionality to create sophisticated filtering experiences
• TypeScript Support: Filter Sphere is built with TypeScript, providing type safety and autocompletion for your filtering code.

Show case

These are some of the sites using Filter Sphere:

• 

  Yjs Inspector

• 

  Uglysearch