jqwidgets-scripts-custom/demos/Angular/kanban/defaultfunctionality/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxSplitter [theme]="'material'" [width]="getWidth()" [height]='600' [panels]='mainSplitterPanels'>
    <div>
        <jqxKanban [theme]="'material'" id="kanban1" #myKanbanOne
                   [width]='"100%"' [height]='"100%"' [source]='dataAdapter'
                   [columns]='kanbanOneColumns' [connectWith]='"#kanban2, #kanban3"'
                   [resources]='resourcesAdapterFunc()' [columnRenderer]='kanbanOneColumnRenderer'>
        </jqxKanban>
    </div>
    <div>
    <jqxSplitter [theme]="'material'" [width]='"100%"' [height]='"100%"'
        [orientation]='"horizontal"' [panels]='rightSplitterPanels'>
        <div>
            <jqxKanban [theme]="'material'" id="kanban2" #myKanbanTwo
                       [width]='"100%"' [height]='"100%"' [source]='dataAdapter2'
                       [columns]='kanbanTwoColumns' [connectWith]='"#kanban1, #kanban3"'
                       [resources]='resourcesAdapterFunc()' [columnRenderer]='kanbanTwoColumnRenderer'>
            </jqxKanban>
        </div>
        <div>
            <jqxKanban [theme]="'material'" id="kanban3" #myKanbanThree
                       [width]='"100%"' [height]='"100%"' [source]='dataAdapter3'
                       [columns]='kanbanThreeColumns' [connectWith]='"#kanban2, #kanban1"'
                       [resources]='resourcesAdapterFunc()' [columnRenderer]='kanbanThreeColumnRenderer'>
            </jqxKanban>
        </div>
    </jqxSplitter>
    </div>
</jqxSplitter>