Menu
Day icon Night icon Day icon Night icon

R-orgchart – React module for displaying and editing data in org chart

Here at Kod Biro, we have this project called Farseer. That is a web app that helps to create and carry out business plans (you can read more about it here).

Farseer is written in JavaScript – frontend is in React, and backend in Node. At some point of development, we needed to display certain data in an org chart in a way which enables users to add, edit and delete nodes easily.

Why did we create our own org chart module?

We have spent a few days searching for adequate libraries. Most of them were not even written in React, but we gave them a chance nevertheless.

Some were too complex for our needs – that wasn’t good because it meant having too much of unused code in our project. Others were not flexible enough – which meant a lot of overwriting and ugly code.

So, I was thinking: “Well, okay, how hard it can be to simply write our own org chart from scratch?”.

That way we can have everything we need the way we want. Also, if one day some modifications needed to be done, I will know where everything is and what it does. So, I will be able to do them easy, fast and without breaking anything else along the way.

Basic structure

Firstly, I researched how other people make them.
It turned out that the easiest way to show and style data in the org chart is to display each node as an html table. Each table will, of course, contain its children-nodes (which are also tables).
To better understand what I’m trying to say, check out the code of this simple example I made on CodePen:

See the Pen R-orgchart – simple html structure by Kristina Sičaja (@Kodbiro) on CodePen.

Basically, each node is a table containing two rows. In the first row we display that node, and, in the second row, we display its children.
Important: td element which contains the node x should have colspan equal to the number of x’s children.

Adding connection lines

My favorite thing about this lovely tabular structure: adding the connection lines is a piece of a cake. Check out this CodePen to see how I did this:

See the Pen R-orgchart – simple html structure with lines by Kristina Sičaja (@Kodbiro) on CodePen.

Basically, I doubled the colspan on all elements which had it defined in the previous example. That made the procedure of adding connection lines very easy. As you can see, they are borders of elements in two new table rows.

With this knowledge of base structure, you can build the org chart as complicated as you need.
Or, you can save yourself some time and use ours.

R-orgchart – our org chart module for React apps

We have written our module in React. It is lightweight and very simple to use.
Below is a sample app which uses our org chart to display all novels from Revelations Space Universe by Alastair Reynolds. When you hover over some node, you will see buttons for adding a child node, editing and deleting.
You can play around. For example, you can delete novels you don’t like or add short stories. You can also edit the whole chart to display something completely different.
I have also added this ‘Colorize’ button. If you click it, tables will be colored. That will give you a better grasp of inner, earlier mentioned, tabular structure. (My nodes are a bit like those Russian nesting dolls – one inside another. Although, there is one crucial difference: usually, on the same level, there is more than one child node.)

If you want to use our module in your React project, you can install it with the following command:

$ npm install -s r-orgchart

Then, import and display component in your React project:

import Rorgchart from 'r-orgchart';
...
<Rorgchart />

If you already have data you want to display in the org chart, you can send it via props. Data must be an array of objects, and each object should contain unique id, title, and ParentId; for example:

const data = [
{id: 1, title: "Root Node", ParentId: null},
{id: 2, title: "Node 1", ParentId: 1},
{id: 3, title: "Node 2", ParentId: 1},
{id: 4, title: "Node 1.1", ParentId: 2},
{id: 5, title: "Node 1.2", ParentId: 2},
];

On our NPM and GitHub, you can learn more about using our module, for example, how to:
– export data from the chart
– make chart readonly
– do some custom styling (of nodes, lines, and buttons)
– send your custom functions for add/edit/delete


Leave a Comment

*