Support for collapsible lanes

[aditigoel23]

Is there a plan to add support for collapsible lanes? That would be helpful with too many lanes on the board.

Also passing in a custom class name as a prop to the lane would be useful.

[rcdexta]

Also passing in a custom class name as a prop to the lane would be useful.

You should be able to customize the look-and-feel of lane.
Example: https://github.com/rcdexta/react-trello/blob/master/stories/CustomLaneStyling.story.js

The props passed to Lane are yielded internally so className should work too. Let me know if otherwise.

[aditigoel23]

Wouldn't that just add the class to the header. I want to add a class to all the lanes.
As an example, the flex has issues in IE11 so instead of flexible lanes, short term fix is to make the height of the lanes 100%.
So instead of doing
.container > div > section {
height: 100%;
}

If there's a class set on all the lanes, it'll be just
.container .laneClass { ... }

Am I missing something?

[rcdexta]

There are multiple ways to override lane style in the library right now:

1. Pass style attribute as a prop to data.json for every lane. This will help you customise the lane appearance differently for every lane

E.g.: https://github.com/rcdexta/react-trello/blob/master/stories/data/board_with_custom_width.json#L7

2. You can pass a custom template for the Lane as a whole which will be applied to every lane. This gives you maximum flexibility in modifying the look and feel of the Lane as a whole

E.g.: https://github.com/rcdexta/react-trello/blob/master/stories/CustomLaneStyling.story.js

3. I discourage passing css classname directly to the library since it classnames are from a global namespace and you need to be careful the way they are packaged when deployed to production.

You can see here https://github.com/rcdexta/react-trello/blob/master/src/components/Lane.js#L183 that the classname is applied to the lane as a whole and not the header.

Let me know if that helps!

Note: I am keeping this issue open to track collapsible lanes feature. Will get it out in a couple of days.

[aditigoel23]

Thanks @rcdexta! That worked for me.

[rcdexta]

Collapsible events added in latest build.

Example here: http://rcdexta.me/react-trello/?selectedKind=Advanced%20Features&selectedStory=Collapsible%20Lanes&full=0&down=0&left=1&panelRight=0

[aditigoel23]

Hi, thanks for putting this together. I miscommunicated what I was looking for. Not sure if this is also on the roadmap. Something like this -
https://webix.com/demos/kanban.html
Click on the "<" in the header, collapses the lane to leave more horizontal space for the rest of the lanes.