Search

The component introduces a search feature which offers a way to focus on specific elements within the chart. By binding a needle object or string, items fitting the search criteria are highlighted.

function App() { const [searchQuery, setSearchQuery] = useState('') return ( <> <OrgChart data={data} searchNeedle={searchQuery} onSearch={(data: CustomOrgChartItem, searchQuery: string) => data.name.toLowerCase().includes(searchQuery.toLowerCase()) } ></OrgChart> <input className="search" type={'search'} placeholder="Search..." onChange={event => { setSearchQuery(event.target.value) }} ></input> </> ) } [ { position: 'Chief Executive Officer', name: 'Eric Joplin', email: 'ejoplin@yoyodyne.com', phone: '555-0100', fax: '555-0101', businessUnit: 'Executive Unit', status: 'present', subordinates: [1, 2, 3, 4, 5, 6], id: 0 }, { position: 'Chief Executive Assistant', name: 'Gary Roberts', email: 'groberts@yoyodyne.com', phone: '555-0100', fax: '555-0101', businessUnit: 'Executive Unit', status: 'present', assistant: true, subordinates: [70, 71], id: 1 }, { position: 'Vice President of Production', name: 'Amy Kain', email: 'akain@yoyodyne.com', phone: '555-0106', fax: '555-0107', businessUnit: 'Production', status: 'unavailable', subordinates: [55, 56, 57, 58, 59], id: 2 }, { position: 'Vice President of Sales', name: 'Richard Fuller', email: 'rfuller@yoyodyne.com', phone: '555-0134', fax: '555-0135', businessUnit: 'Sales', status: 'present', subordinates: [49, 50], id: 3 }, { position: 'Vice President of Engineering', name: 'Mildred Shark', email: 'mshark@yoyodyne.com', phone: '555-0156', fax: '555-0157', businessUnit: 'Engineering', status: 'present', subordinates: [21], id: 4 }, { position: 'Marketing Manager', name: 'Angela Haase', email: 'ahaase@yoyodyne.com', phone: '555-0170', fax: '555-0171', businessUnit: 'Marketing', status: 'present', subordinates: [19, 20], id: 5 }, { position: 'Chief Financial Officer', name: 'David Kerry', email: 'dkerry@yoyodyne.com', phone: '555-0180', fax: '555-0181', businessUnit: 'Accounting', status: 'present', subordinates: [7, 8, 9], id: 6 }, { position: 'Accounts Manager', name: 'Walter Hastings', email: 'whastings@yoyodyne.com', phone: '555-0182', fax: '555-0183', businessUnit: 'Accounting', status: 'present', subordinates: [16, 17, 18], id: 7 }, { position: 'Finance Manager', name: 'Joy Medico', email: 'jmedico@yoyodyne.com', phone: '555-0190', fax: '555-0191', businessUnit: 'Accounting', status: 'present', subordinates: [13, 14, 15], id: 8 }, { position: 'Human Resource Manager', name: 'Danny Welch', email: 'dwelch@yoyodyne.com', phone: '555-0198', fax: '555-0199', businessUnit: 'Accounting', status: 'present', subordinates: [10, 11, 12], id: 9 }, { position: 'Human Resource Administrative Assistant', name: 'Leroy Vison', email: 'lvison@yoyodyne.com', phone: '555-0200', fax: '555-0201', businessUnit: 'Accounting', status: 'present', assistant: true, id: 10 }, { position: 'Benefits Specialist', name: 'Mark Parks', email: 'mparks@yoyodyne.com', phone: '555-0202', fax: '555-0203', businessUnit: 'Accounting', status: 'present', id: 11 }, { position: 'Recruiter', name: 'Linda Lenhart', email: 'llenhart@yoyodyne.com', phone: '555-0204', fax: '555-0205', businessUnit: 'Accounting', status: 'busy', id: 12 }, { position: 'Purchasing Manager', name: 'Edward Lewis', email: 'elewis@yoyodyne.com', phone: '555-0192', fax: '555-0193', businessUnit: 'Accounting', status: 'unavailable', id: 13 }, { position: 'Purchasing Assistant', name: 'Mildred Bean', email: 'mbean@yoyodyne.com', phone: '555-0194', fax: '555-0195', businessUnit: 'Accounting', status: 'busy', assistant: true, id: 14 }, { position: 'Buyer', name: 'Raymond Lindley', email: 'rlindley@yoyodyne.com', phone: '555-0196', fax: '555-0197', businessUnit: 'Accounting', status: 'present', id: 15 }, { position: 'Accounts Receivable Specialist', name: 'Susan Moran', email: 'smoran@yoyodyne.com', phone: '555-0184', fax: '555-0185', businessUnit: 'Accounting', status: 'present', id: 16 }, { position: 'Accountant', name: 'Melvin Cruz', email: 'mcruz@yoyodyne.com', phone: '555-0186', fax: '555-0187', businessUnit: 'Accounting', status: 'present', id: 17 }, { position: 'Accounts Payable Specialist', name: 'Rachel King', email: 'rking@yoyodyne.com', phone: '555-0188', fax: '555-0189', businessUnit: 'Accounting', status: 'present', id: 18 }, { position: 'Marketing Specialist', name: 'Jermaine Stewart', email: 'jstewart@yoyodyne.com', phone: '555-0172', fax: '555-0173', businessUnit: 'Marketing', status: 'present', id: 19 }, { position: 'Marketing Assistant', name: 'Lorraine Deaton', email: 'ldeaton@yoyodyne.com', phone: '555-0174', fax: '555-0175', businessUnit: 'Marketing', status: 'present', assistant: true, id: 20 }, { position: 'Engineering Manager', name: 'Martha Barnes', email: 'mbarnes@yoyodyne.com', phone: '555-0158', fax: '555-0159', businessUnit: 'Engineering', status: 'busy', subordinates: [22, 23, 24], id: 21 }, { position: 'Senior Tool Designer', name: 'Maria Dossantos', email: 'mdossantos@yoyodyne.com', phone: '555-0160', fax: '555-0161', businessUnit: 'Engineering', status: 'present', subordinates: [43, 44, 45, 46, 47, 48], id: 22 }, { position: 'Senior Design Engineer', name: 'Laurie Aitken', email: 'laitken@yoyodyne.com', phone: '555-0164', fax: '555-0165', businessUnit: 'Engineering', status: 'present', subordinates: [38, 39, 40, 41, 42], id: 23 }, { position: 'R & D Manager', name: 'John Payne', email: 'jpayne@yoyodyne.com', phone: '555-0168', fax: '555-0169', businessUnit: 'Engineering', status: 'present', subordinates: [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37], id: 24 }, { position: 'R & D Engineer', name: 'Rana Oxborough', email: 'roxborough@yoyodyne.com', phone: '555-0176', fax: '555-0177', businessUnit: 'Engineering', status: 'present', id: 25 }, { position: 'R & D Engineer', name: 'Gary Olsen', email: 'golsen@yoyodyne.com', phone: '555-0178', fax: '555-0179', businessUnit: 'Engineering', status: 'present', id: 26 }, { position: 'R & D Engineer', name: 'Matthew Finney', email: 'mfinney@yoyodyne.com', phone: '555-0206', fax: '555-0207', businessUnit: 'Engineering', status: 'travel', id: 27 }, { position: 'R & D Engineer', name: 'Julius Kelly', email: 'jkelly@yoyodyne.com', phone: '555-0208', fax: '555-0209', businessUnit: 'Engineering', status: 'present', id: 28 }, { position: 'R & D Engineer', name: 'Charles Wylam', email: 'cwylam@yoyodyne.com', phone: '555-0212', fax: '555-0213', businessUnit: 'Engineering', status: 'present', id: 29 }, { position: 'R & D Engineer', name: 'Steven Dotter', email: 'sdotter@yoyodyne.com', phone: '555-0214', fax: '555-0215', businessUnit: 'Engineering', status: 'busy', id: 30 }, { position: 'R & D Engineer', name: 'Richard Bradshaw', email: 'rbradshaw@yoyodyne.com', phone: '555-0216', fax: '555-0217', businessUnit: 'Engineering', status: 'unavailable', id: 31 }, { position: 'R & D Engineer', name: 'Vera Shoe', email: 'vshoe@yoyodyne.com', phone: '555-0218', fax: '555-0219', businessUnit: 'Engineering', status: 'present', id: 32 }, { position: 'R & D Engineer', name: 'Marty Tucker', email: 'mtucker@yoyodyne.com', phone: '555-0230', fax: '555-0231', businessUnit: 'Engineering', status: 'present', id: 33 }, { position: 'R & D Engineer', name: 'Dennis Long', email: 'dlong@yoyodyne.com', phone: '555-0232', fax: '555-0233', businessUnit: 'Engineering', status: 'present', id: 34 }, { position: 'R & D Engineer', name: 'Anthony Rice', email: 'arice@yoyodyne.com', phone: '555-0222', fax: '555-0223', businessUnit: 'Engineering', status: 'busy', id: 35 }, { position: 'R & D Engineer', name: 'Joseph Lewis', email: 'jlewis@yoyodyne.com', phone: '555-0224', fax: '555-0225', businessUnit: 'Engineering', status: 'present', id: 36 }, { position: 'R & D Engineer', name: 'Susan Reid', email: 'sreid@yoyodyne.com', phone: '555-0226', fax: '555-0227', businessUnit: 'Engineering', status: 'present', id: 37 }, { position: 'Design Engineer', name: 'Carla Clark', email: 'cclark@yoyodyne.com', phone: '555-0242', fax: '555-0243', businessUnit: 'Engineering', status: 'unavailable', id: 38 }, { position: 'Design Engineer', name: 'Cynthia Judd', email: 'cjudd@yoyodyne.com', phone: '555-0244', fax: '555-0245', businessUnit: 'Engineering', status: 'unavailable', id: 39 }, { position: 'Design Engineer', name: 'Robert Finn', email: 'rfinn@yoyodyne.com', phone: '555-0246', fax: '555-0247', businessUnit: 'Engineering', status: 'present', id: 40 }, { position: 'Design Engineer', name: 'Willie Schaub', email: 'wschaub@yoyodyne.com', phone: '555-0248', fax: '555-0249', businessUnit: 'Engineering', status: 'present', id: 41 }, { position: 'Design Engineer', name: 'Edwin Nagy', email: 'enagy@yoyodyne.com', phone: '555-0166', fax: '555-0167', businessUnit: 'Engineering', status: 'present', id: 42 }, { position: 'Tool Designer', name: 'Hector Donald', email: 'hdonald@yoyodyne.com', phone: '555-0162', fax: '555-0163', businessUnit: 'Engineering', status: 'busy', id: 43 }, { position: 'Tool Designer', name: 'Michelle Douglas', email: 'mdouglas@yoyodyne.com', phone: '555-0228', fax: '555-0229', businessUnit: 'Engineering', status: 'present', id: 44 }, { position: 'Tool Designer', name: 'Bonnie Penney', email: 'bpenney@yoyodyne.com', phone: '555-0234', fax: '555-0235', businessUnit: 'Engineering', status: 'present', id: 45 }, { position: 'Tool Designer', name: 'Francis Webster', email: 'fwebster@yoyodyne.com', phone: '555-0236', fax: '555-0237', businessUnit: 'Engineering', status: 'present', id: 46 }, { position: 'Tool Designer', name: 'Gregory Arnold', email: 'garnold@yoyodyne.com', phone: '555-0238', fax: '555-0239', businessUnit: 'Engineering', status: 'present', id: 47 }, { position: 'Tool Designer', name: 'Ken Kowalski', email: 'kkowalski@yoyodyne.com', phone: '555-0240', fax: '555-0241', businessUnit: 'Engineering', status: 'present', id: 48 }, { position: 'North America Sales Manager', name: 'Joe Vargas', email: 'jvargas@yoyodyne.com', phone: '555-0136', fax: '555-0137', businessUnit: 'Sales', status: 'present', subordinates: [53, 54], id: 49 }, { position: 'European Sales Manager', name: 'Robert Hartman', email: 'rhartman@yoyodyne.com', phone: '555-0138', fax: '555-0139', businessUnit: 'Sales', status: 'present', subordinates: [51, 52], id: 50 }, { position: 'Sales Representative', name: 'Rebecca Polite', email: 'rpolite@yoyodyne.com', phone: '555-0148', fax: '555-0149', businessUnit: 'Sales', status: 'travel', id: 51 }, { position: 'Sales Representative', name: 'Michael Daniels', email: 'mdaniels@yoyodyne.com', phone: '555-0154', fax: '555-0155', businessUnit: 'Sales', status: 'travel', id: 52 }, { position: 'Sales Representative', name: 'Robert Parson', email: 'rparson@yoyodyne.com', phone: '555-0150', fax: '555-0151', businessUnit: 'Sales', status: 'travel', id: 53 }, { position: 'Sales Representative', name: 'Melissa Noren', email: 'mnoren@yoyodyne.com', phone: '555-0152', fax: '555-0153', businessUnit: 'Sales', status: 'present', id: 54 }, { position: 'Quality Assurance Manager', name: 'Dorothy Turner', email: 'dturner@yoyodyne.com', phone: '555-0108', fax: '555-0109', businessUnit: 'Production', status: 'unavailable', subordinates: [65, 66], id: 55 }, { position: 'Master Scheduler', name: 'Larry Littlefield', email: 'llittlefield@yoyodyne.com', phone: '555-0126', fax: '555-0127', businessUnit: 'Production', status: 'present', id: 56 }, { position: 'Facilities Manager', name: 'Anne Binger', email: 'abinger@yoyodyne.com', phone: '555-0122', fax: '555-0123', businessUnit: 'Production', status: 'present', subordinates: [62], id: 57 }, { position: 'Shipping and Receiving Supervisor', name: 'Ray Hammond', email: 'rhammond@yoyodyne.com', phone: '555-0146', fax: '555-0147', businessUnit: 'Production', status: 'travel', subordinates: [60, 61], id: 58 }, { position: 'Production Supervisor', name: 'Kathy Maxwell', email: 'kmaxwell@yoyodyne.com', phone: '555-0132', fax: '555-0133', businessUnit: 'Production', status: 'present', id: 59 }, { position: 'Shipping and Receiving Clerk', name: 'Bob Lacey', email: 'blacey@yoyodyne.com', phone: '555-0124', fax: '555-0125', businessUnit: 'Production', status: 'travel', id: 60 }, { position: 'Stocker', name: 'Ronnie Garcia', email: 'rgarcia@yoyodyne.com', phone: '555-0130', fax: '555-0131', businessUnit: 'Production', status: 'present', id: 61 }, { position: 'Facilities Administrative Assistant', name: 'Timothy Jackson', email: 'tjackson@yoyodyne.com', phone: '555-0140', fax: '555-0141', businessUnit: 'Production', status: 'busy', subordinates: [63, 64], id: 62 }, { position: 'Maintenance Supervisor', name: 'Carmen Shortened', email: 'cshortened@yoyodyne.com', phone: '555-0142', fax: '555-0143', businessUnit: 'Production', status: 'present', id: 63 }, { position: 'Janitor', name: 'Thomas Stark', email: 'tstark@yoyodyne.com', phone: '555-0144', fax: '555-0145', businessUnit: 'Production', status: 'present', id: 64 }, { position: 'Quality Assurance Supervisor', name: 'Valerie Burnett', email: 'vburnett@yoyodyne.com', phone: '555-0110', fax: '555-0111', businessUnit: 'Production', status: 'present', subordinates: [69], id: 65 }, { position: 'Document Control Manager', name: 'Edward Monge', email: 'emonge@yoyodyne.com', phone: '555-0118', fax: '555-0119', businessUnit: 'Production', status: 'present', subordinates: [67, 68], id: 66 }, { position: 'Control Specialist', name: 'Howard Meyer', email: 'hmeyer@yoyodyne.com', phone: '555-0116', fax: '555-0117', businessUnit: 'Production', status: 'present', id: 67 }, { position: 'Document Control Assistant', name: 'Lisa Jensen', email: 'ljensen@yoyodyne.com', phone: '555-0120', fax: '555-0121', businessUnit: 'Production', status: 'travel', assistant: true, id: 68 }, { position: 'Quality Assurance Technician', name: 'Martin Cornett', email: 'mcornett@yoyodyne.com', phone: '555-0114', fax: '555-0115', businessUnit: 'Production', status: 'present', id: 69 }, { position: 'Senior Executive Assistant', name: 'Alexander Burns', email: 'aburns@yoyodyne.com', phone: '555-0102', fax: '555-0103', businessUnit: 'Executive Unit', status: 'present', id: 70 }, { position: 'Junior Executive Assistant', name: 'Linda Newland', email: 'lnewland@yoyodyne.com', phone: '555-0112', fax: '555-0113', businessUnit: 'Executive Unit', status: 'present', id: 71 } ] .search{ position: absolute; top: 10px; left: 10px; }

To further tailor the search functionality, developers can customize the process by registering a function to the onSearch event, which returns a boolean value indicating if the search was successful for the given item.