Dev: Research tree view on ag-grid

[catrobson]

Understand the amount of effort and flexibility in building a tree into the ag-grid implementation. Come out of sprint understanding general length of time to deliver this capability on ag-grid to the planner team.

[dlabrecq]

I performed another table evaluation of the AgGrid and ngx-datatable libraries. I've also created two POCs AgGrid and ngx-datatable to study how best to implement new features.

I'm on the fence about which library we should be using. After implementing AgGrid myself, I have some concerns about wrapping it with a new patternfly-ng component. It may be easier to implement new features using the Angular template approach used by ngx-datatable?

Regardless of which library we choose, neither implements tree or drag-and-drop features. If we implement a tree with ngx-datatable, we can potentially contribute that upstream? However, it may be easier to implement drag-and-drop with AgGrid because of its callback support -- need to investigate further.

Note that if we must fork a repo, and heavily modify the code, that could create a maintenance nightmare. I'd like to avoid that if possible?

Looking back at the PatternFly core table, I worked on that for about 4+ months. The initial PR was created September 9th and additional functionality was added over subsequent sprints in October and November -- still submitting bug fix PRs in January.

In this case, the CSS had already been implemented, so it was pure JavaScript at this point. We only implemented existing datatables.net features; such as, row selection, pagination, toolbar layout, empty state, filter, inline actions, etc.

For PatternFly-NG, the table CSS must be written from scratch because these libraries output div tags. The existing CSS was written to support standard HTML table tags only, not the HTML layout generated by AgGrid or ngx-datatable.

For starters, I'm guesstimating 2 weeks to become familiar with the code and implement the tree feature. I'm thinking another 1-2 weeks for drag-and-drop, depending on whether we must modify forked code. Creating new CSS could be a 1-2 week effort, depending on what features we expect upfront? Thinking another 1-2 weeks to create a basic patternfly-ng component that wraps ngx-datatable with unit tests and examples -- roughly 6-8 weeks for these features.

Don't know how long it will take to contribute any of these features to ngx-datatable?

[dlabrecq]

Update: The ngx-datatable issues shows drag and drop as a high effort feature. Although, there is someone actively working on this as of 6 days ago.

The ngx-datatable issues also shows tree as another high effort feature. It's on their list of features to implement, but no one appears to be working on that currently.

I discovered that the angular-data-table (the Angular 1.4 version) has a tree feature. It's possible we could help port that upstream to ngx-datatable?

[dlabrecq]

Considering the flexibility provided by ngx-datatable and available feature code, I'd like to propose the following. All these tasks can be performed in parallel, depending on how many devs we're willing to throw at it?

1. Create CSS to skin ngx-datatable as a PatternFly table.
2. Create a patternfly-ng table component to wrap ngx-datatable.
3. Port the tree feature from angular-data-table and contribute upstream to ngx-datatable.
4. Finish developing the drag-and-drop (Plunker) feature as a patternfly-ng directive.