cf-react-filters

Made with create-react-library

Install

npm install --save cf-react-filters

Usage:Create a wrapper component

import React, { Component } from 'react'
import { Filters } from 'cf-react-filters'
import 'cf-react-filters/dist/index.css'
import axios from "axios";


const FiltersComponent =({table = "", filters=[],onClearFilters=()=> { },onFiltersApply=()=> { }})=>{
  
   //endpoint for storing filters
   const storeFiltersURI = "storeDynamicFilters";

    //endpoint for getting filters
   const getFiltersURI = "getDynamicFilters";

    //endpoint for getting filters
   const clearFiltersURI = "clearDynamicFilters";

  return (
    <>
     <Filters
        className="bg-light border"
        clearButtonClassName="btn-danger"
        filters={filters}
        table={table}
        storeFiltersURI={storeFiltersURI}
        getFiltersURI = {getFiltersURI}
        clearFiltersURI = {clearFiltersURI}
        onClearFilters={onClearFilters}
        onFiltersApply={onFiltersApply}
        axiosInstance={axios}

      />
    </>
  )
}

Usage:Create a wrapper component

import React, { Component } from 'react';
import 'cf-react-filters/dist/index.css';
import FiltersComponent from "./FiltersComponent"
;
const App =()=> {


 const filters = [
  {
    "title": "Statuses ",
    "reference_column": "status_id",
    "reference_table": "statuses",
    "filterType": "multi-select",
    "select": "name",
    "pivot": false,
    "pivot_table": "",
    "base_table_column": ""
  },
  {
    "title": "Date Created From",
    "reference_column": "created_at",
    "reference_table": "users",
    "filterType": "min-date",
    "select": "name",
    "pivot": false,
    "pivot_table": "",
    "base_table_column": ""
  },
  {
    "title": "Date Created to",
    "reference_column": "created_at",
    "reference_table": "users",
    "filterType": "max-date",
    "select": "name",
    "pivot": false,
    "pivot_table": "",
    "base_table_column": ""
  },
  {
    "title": "Roles",
    "reference_column": "role_id",
    "reference_table": "roles",
    "filterType": "single-select",
    "select": "name",
    "pivot": true,
    "pivot_table": "role_user",
    "base_table_column": "user_id"
  },
  {
    "title": "Roles",
    "reference_column": "role_id",
    "reference_table": "roles",
    "filterType": "multi-select",
    "select": "name",
    "pivot": true,
    "pivot_table": "role_user",
    "base_table_column": "user_id"
  }
]
//fetch data on clearing of FIlters
const onClearFilters = ()=>{

}

//fetch data on Filters Apply
const onFiltersApply = ()=>{

}
  return (
    <>
    <FiltersComponent
        table = "users"
        onClearFilters={onClearFilters}
        onFiltersApply={onFiltersApply}
        filters = {filters}
    />
    </>
  )
 
}

License

MIT © Arnoldkhosa