0.7.6 • Published 10 months ago

@jehlicot07/qfilter v0.7.6

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

QFilter

Query library designed for advanced filtering, crafted with ❤ using TypeScript and React. ⚛

logo

Table of Contents

Installation

Install the library using the followind commands:

npm

npm i @jehlicot07/qfilter

Usage

Basic Usage

To start using QFilter, import the necessary components and create filters using the QFilterBuilder class:

import { QFilterBuilder } from "@jehlicot07/qfilter";

const users = [
  { name: "Jhael", age: 20, city: "DN" },
  { name: "Jhael", age: 21, city: "Santiago" },
  { name: "Galva", age: 26, city: "SD" },
  { name: "Galva", age: 26, city: "SDE" },
  { name: "Thomas", age: 20, city: "SDN" },
  { name: "Sthifer", age: 25, city: "SDN" },
  { name: "Enmanuel", age: 19, city: "SDO" },
];

const builder = new QFilterBuilder()
  .condition("name", "Contains", "e")
  .and()
  .condition("age", "GreaterThan", 20);

const QFilter = builder.build();
const filteredUsers = QFilter.filter(users);

console.log(filteredUsers);
// Output: [
//   { name: 'Jhael', age: 21, city: 'Santiago' },
//   { name: 'Sthifer', age: 25, city: 'SDN' }
// ]

Advanced Usage

You can use logical operators and groups to create more complex filters:

import { QFilterBuilder, condition, and, or, not, group } from "@jehlicot07/qfilter";

const builder = new QFilterBuilder()
  .condition("name", "Contains", "e")
  .and()
  .group([condition("age", "GreaterThan", 20), or(), not(condition("city", "Equal", "SD"))]);

const QFilter = builder.build();
const filteredUsers = QFilter.filter(users);

console.log(filteredUsers);
/*  
  OUTPUT:
  { name: "Jhael", age: 20, city: "DN" },
  { name: "Jhael", age: 21, city: "Santiago" },
  { name: "Galva", age: 26, city: "SD" },
  { name: "Galva", age: 26, city: "SDE" },
  { name: "Thomas", age: 20, city: "SDN" },
  { name: "Sthifer", age: 25, city: "SDN" },
   */

UI Usage

Integrate QFilter in your React components for a more interactive experience:

/* eslint-disable @typescript-eslint/no-explicit-any */
import QFilterComponent from "@jehlicot07/qfilter";

type User = {
  name: string;
  age: number;
  company?: { name: string; subgroup?: { subname: string } };
  a?: FilterGroup[];
};

const App = () => {
  const users: User[] = [
    {
      name: "jhael",
      age: 20,
      company: {
        name: "FMP",
      },
      a: [],
    },
    {
      name: "Miguel",
      age: 26,
      company: {
        name: "FMP",
        subgroup: {
          subname: "Company 2",
        },
      },
    },
  ];

  return (
    <QFilterComponent
      dataSource={users}
      onFilter={(data) => {
        const result = data.filter(users);
        console.log(result);
      }}
      columns={[
        { label: "Name", value: "name", type: "text" },
        { label: "Company Name", value: "company?.name", type: "text" },
        {
          label: "Age",
          value: "age",
          type: "number",
        },
      ]}
    />
  );
};

export default App;

UI VIEW

tool

API

QFilterBuilder

Method SignatureParamsDescription
conditionfield: Join<T>operator: OPvalue: number | string | booleanid: string | numberparentId: string | number | nullAdds a comparison filter.
groupfilters:Array<GroupCondition<T> | Array<GroupCondition<T>>>Creates a group of filters.
addid: string | numberfiltersToAdd: Array<FiltersType<T>>position: "after" | "before"filtersArr?: Array<FiltersType<T>> | undefinedAdds filters at a specified position.
removeid: string | numberfilters?: Array<FiltersType<T>>Removes filters by ID.
updateid:string | numberfilter: FiltersType<T> filters?: Array<FiltersType<T>>Updates a filter by ID.
andAdds a logical AND operator.
orAdds a logical OR operator.
notAdds a logical NOT operator.
buildBuilds and returns a QFilter instance.

QFilter

filter(dataSource: T[]): readonly T[]

Applies the filters to the given data source and returns the filtered data.

Utilities for group filter

Method SignatureDescription
generateUID()Generates a random UID.
condition(field, operator, value, id, parentId)Creates a condition filter.
group(filters)Creates a group of filters.
and()Creates a logical AND filter.
or()Creates a logical OR filter.
not()Creates a logical NOT filter.

Example

.group([
  condition("age", "GreaterThan", 20),
  or(),
  not(condition("city", "Equal", "SD"), and(), group([condition("age", "GreaterThan", 20)])),
]);

Types Definitions

OP

type OP =
  | "Equals"
  | "NotEquals"
  | "LessThan"
  | "GreaterThan"
  | "GreaterThanOrEqual"
  | "LessThanOrEqual"
  | "Contains"
  | "NotContains"
  | "StartsWith"
  | "NotStartsWith"
  | "EndsWith"
  | "NotEndsWith"
  | ComparisonOperator;

FilterType

type FilterType = "group" | "logicalOperator" | "comparisonOperator";

FilterGroup

type FilterGroup = "(" | ")";

LogicalOperator

type LogicalOperator = "&&" | "||" | "!";

ComparisonOperator

type ComparisonOperator = "===" | "!==" | ">" | "<" | ">=" | "<=";

commonFilterProps<T>

type commonFilterProps<T> = {
  id: string | number;
  parentId?: string | number | null;
  type: FilterType;
  children?: Array<GroupCondition<T>>;
};

FilterLogicalOperator<T>

type FilterLogicalOperator<T> = {
  operator: LogicalOperator;
} & commonFilterProps<T>;

FilterGroupOperator<T>

type FilterGroupOperator<T> = {
  operator: FilterGroup;
} & commonFilterProps<T>;

FilterOperator<T>

type FilterOperator<T> = {
  operator: OP;
  value: string | number | boolean;
  field: Join<T>;
} & commonFilterProps<T>;

FilterBuild<T>

type FilterBuild<T> = FilterGroupOperator<T> | FilterLogicalOperator<T> | FilterOperator<T>;

AddFilterFn<T>

type AddFilterFn<T> = (
  id: string | number,
  field: Join<T>,

  operator: OP,
  value: string | number | boolean,
  filters: Array<FiltersType<T>>,
  parentId: string | number | null
) => Array<FiltersType<T>>;

GroupCondition<T>

type GroupCondition<T> = FilterBuild<T> | AddFilterFn<T>;

FiltersType<T>

type FiltersType<T> =
  | FilterBuild<T>
  | FilterLogicalOperator<T>
  | FilterGroupOperator<T>
  | FilterOperator<T>
  | GroupCondition<T>
  | AddFilterFn<T>;

SelectOption

type SelectOption = {
  label: string;
  value: string | number | boolean;
};

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License.

0.7.6

10 months ago

0.7.5

11 months ago

0.7.4

11 months ago

0.7.3

11 months ago

0.7.2

11 months ago

0.7.1

11 months ago

0.7.0

11 months ago

0.6.5

11 months ago

0.6.4

11 months ago

0.6.3

11 months ago

0.6.2

11 months ago

0.6.1

11 months ago

0.6.0

11 months ago

0.5.11

11 months ago

0.5.10

11 months ago

0.5.9

11 months ago

0.5.8

11 months ago

0.5.7

11 months ago

0.5.6

11 months ago

0.5.5

11 months ago

0.5.4

11 months ago

0.5.3

11 months ago

0.5.2

11 months ago

0.5.1

11 months ago

0.5.0

11 months ago

0.4.0

11 months ago

0.3.9

11 months ago

0.3.7

11 months ago

0.3.6

11 months ago

0.3.5

11 months ago

0.3.4

11 months ago

0.3.3

11 months ago

0.3.2

11 months ago

0.3.1

11 months ago

0.3.0

11 months ago

0.2.19

11 months ago

0.2.18

11 months ago

0.2.17

11 months ago

0.2.16

11 months ago

0.2.15

11 months ago

0.2.14

11 months ago

0.2.13

11 months ago

0.2.12

11 months ago

0.2.11

11 months ago

0.2.10

11 months ago

0.2.9

11 months ago

0.2.8

11 months ago

0.2.7

11 months ago

0.2.6

11 months ago

0.2.5

11 months ago

0.2.4

11 months ago

0.2.3

11 months ago

0.2.2

11 months ago

0.2.1

11 months ago

0.2.0

11 months ago

0.1.7

11 months ago

0.1.6

11 months ago

0.1.5

11 months ago

0.1.4

11 months ago

0.1.3

11 months ago

0.1.2

11 months ago

0.1.1

11 months ago

0.1.0

11 months ago