BALKAN OrgChart React - React Org Chart Library | Docs

Filter ​

You can use filters to show/hide or edit particular nodes dynamically based on criteria.
Filtering data in OrgChart React is easy. You can filter by one or more criteria.

Add Filtering ​

To add filtering functionality, use the filterBy option in the chart configuration.

Then you should add a template or CSS for the filtered nodes.

filterBy values ​

The value of filterBy can be:

  • an array of node properties
  • "all"
  • an object that contains filtering properties and initial state values

You can also customize the text values in the filter.

js
    //filterBy={['title', 'city']}
    //filterBy={'all'}
    filterBy={{
        title: {
            'QA Lead': { checked: false, text: 'Leads not working'},
            'Manager': { checked: false, text: 'Managets not working'},
            'QA': { checked: true, text: 'QAs are working'},
        },
        name: {},
        city: {
            'Sofia': { checked: false }
        }
    }}

Hiding the filtered nodes ​

To hide the filtered nodes, add filter in the tag configuration and set a template (e.g. dot):

javascript
tags={{
  filter: {
      template: 'dot'
  }
}}

Filter with dot

Template of the filtered nodes ​

You can use any template for the filtered nodes even if you use custom templates for the chart

javascript
tags={{
  filter: {
      template: 'ula'
  }
}}

Filter with templates

Filtering with CSS ​

You can use CSS to style the filtered nodes:

css
.filter rect, .filter image, .filter text, .filter use {
    filter: blur(10px);
}

Filter with CSS

Localization ​

You can change the texts "Filter by" and "all":

javascript
import { OrgChartReact, OrgChartJS } from "balkan-orgchart-react";

OrgChartJS.filterUI.textFilterBy = 'Filtre par';
OrgChartJS.filterUI.all = '[Toute]';