[Feature request] Add support for custom <li> styling

[daformat]

Hey Alex, thanks for the awesome component you made.

In order to start this new year with an update on your repo, I'd like to suggest an improvement that would allow for deeper style customization:

Requested feature

Allow custom <li> element styling.

Usecase

In the project I'm using treebeard right now, I'm displaying a pretty big tree (JSON data is approx 3600 lines). Having this much data makes it hard to scan the page easily because of the fact every single entry is on its very own line.

To make it easier on the eye, I'd like last-level children to have css display set to inline-block (last level means to me they have no children attribute, or that they have one, but the children array is empty).

Wtf? Can you be more specific?

Yeah, sure! So, basically in your example, that would be the files. They would no more behave as block elements, but as inline-block elements. Here's a screenshot with your original on the left, and how I would like things to be displayed on the right (left the console opened so you check the very basic styles I applied to files):

Please note that I didn't change any of your data to make this screenshot, but in my usecase, I'd put any file before folders in the data source so it's more logical when you display files as inline-block. So index.js would be listed first in src, and then the component folder (as it would make it easier to quickly spot which files belong to which folder when files are displayed first in the subtree). Same thing for Gulpfile.js index.js and package.json that are currently displayed last, they'd have to be listed first in the root folder.

Usage

I guess it's pretty simple how it could work, in my idea, you would simply add a new data attribute, like display that could be set to either "block" or "inline" (I'm omitting the -block here for brevity and I'm not sure that a display type of inline would ever be needed, so maybe the "-block" part could be optional).

Note

The only minor potential issue that I see is that you need to make sure the "activeLink" css can also be set to a custom style matching whatever padding / margins you decide to put on the inline-block elements.

Does that make any sense to you?

[dk4210]

What did you find out about this Mat?