Custom Filter

Overview

The CustomFilter component provides a flexible filtering system with support for multiple filter types and visual display of applied filters. It includes:

• Text input filters
• Date range picker
• Local/remote dropdown lists
• Local/remote multi-select
• Chip display of active filters
• Clear all/reset functionality

Usage Example

Code

import React, { useState } from "react";
import { CustomFilter } from "@components/";
export const CustomFilterDemo = () => {
  const [customFilters, setCustomFilters] = useState([]);
  const customFilterItems = [
    {
      type: "text",
      field: "name",
      label: "Name",
      placeholder: "Search by name...",
    },
    {
      type: "date",
      field: "dateRange",
      label: "Date Range",
    },
  ];

  return (
    <CustomFilter
      filterItems={customFilterItems}
      onApplyFilter={(e) => {
        setCustomFilters(e);
        console.log("Applied filters:", e);
      }}
      filters={customFilters}
      targetClass="target-class"
      style={{ width: "370px" }}
    />
  );
  <div className="target-class mt-3"></div>;
};

Result

Props

Prop	Type	Required	Description
filterItems	Array	Yes	Array of filter configuration objects
onApplyFilter	Function	No	Callback when filters are applied (receives array of current filters)
targetClass	String	Yes	CSS class name where filter chips will be rendered
filters	Array	No	Initial filter values
style	Object	No	Custom styles for the filter button