Insites Docs Web Components V2Data DisplayKanban Board

Kanban Board

Published on March 08, 2023, updated on April 11, 2023

Element: <ins-kanban-board>

Defines a Kanban board.

Complete Example
Item Name
2020-08-12
2:12 PM
Courtney Henry
$120
column 1 item 2 column 1 item 3 column 2 item 1 column 2 item 2 column 2 item 3

Code Snippet

<ins-kanban-board>
    <ins-kanban-column
      heading="TODO"
	  heading-color="#4ecdc4"
	  heading-text-color="#000"
      total-count="3"
      heading-sub-detail="$308"
      add-item-button
	  add-item-button-label="Add New" >
      <ins-kanban-card id="columnItem">
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              2020-08-12
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              2:12 PM
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              Courtney Henry
            </span>
          </div>
          <div class="primary-detail">
            $120
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card>
        column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>

    <ins-kanban-column
      heading="In Progress"
      heading-color="#76E5FC"
	  heading-text-color="#000"
      total-count="3"
      heading-sub-detail="$123"
      add-item-button >
      <ins-kanban-card>
        column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        column 2 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        column 2 item 3
      </ins-kanban-card>
    </ins-kanban-column>
  </ins-kanban-board>
Kanban Column Empty State

Code Snippet

<ins-kanban-board>
    <ins-kanban-column
      id="emptyComlumn"
      heading="Empty State (No Items)"
      no-items
      no-items-detail="Cras venenatis justo quis turpis vestibulum placerat. Curabitur aliquet lacus fringilla sem tempor lacinia.">
    </ins-kanban-column>
  </ins-kanban-board>
Kanban Column Disabled Sort
column 1 item 1 column 1 item 2 column 1 item 3 Please note that this only disables the sorting within the column, but you can still move cards from one column to another

Code Snippet

<ins-kanban-board>
    <ins-kanban-column
      id="disabledSortColumn"
      heading="Sort Disabled"
      disable-sort >
      <ins-kanban-card>
        column 1 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        column 1 item 3
      </ins-kanban-card>
      <ins-kanban-card>
        <i>Please note that this only disables the sorting within the column, but you can still move cards from one column to another</i>
      </ins-kanban-card>
    </ins-kanban-column>
  </ins-kanban-board>
Kanban Card Customisation

The kanban-card tag will not require you to put any attributes to display the contents you want inside it. This will allow you to customise the card contents in any way you like. However, this component still provides a default design which can be overriden via css. Just take note of the tags, classes, and containers used.

We design and make concrete products.
2020-08-09
2:33 PM
Jane Cooper
$98
Item Name
Date
Time
The quick brown fox jumps over the lazy dog
Price
Item Name
Date
Time
The quick brown fox jumps over the lazy dog
Price
Sunt Lorem et ullamco laborum anim nisi dolor labore sint nulla Lorem. Nulla mollit pariatur laboris eu veniam occaecat eiusmod tempor ex anim in. Eiusmod sint aute voluptate non ipsum adipisicing commodo laborum dolore aliquip occaecat. Labore deserunt do nulla non sint reprehenderit. Amet nulla sit cupidatat reprehenderit dolor ea minim. Excepteur adipisicing ullamco ea aliquip ut irure.

Incididunt consectetur minim mollit aute do elit proident deserunt ipsum.

Lorem ipsum

Pariatur velit officia aliqua aute deserunt proident deserunt.

Sample link Insites Docs.

Code Snippet

<ins-kanban-board>
    <ins-kanban-column
      heading="With the default design style containers and classes"
	  heading-color="#FFD6E0"
      total-count="2"
      add-item-button
	  add-item-button-label="Add Task">
      <ins-kanban-card>
        <div class="card-title">
          We design and make concrete products.
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              2020-08-09
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              2:33 PM
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              Jane Cooper
            </span>
          </div>
          <div class="primary-detail">
            $98
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card>
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              Date
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              Time
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              The quick brown fox jumps over the lazy dog
            </span>
          </div>
          <div class="primary-detail">
            Price
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card>
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              Date
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              Time
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              The quick brown fox jumps over the lazy dog
            </span>
          </div>
          <div class="primary-detail">
            Price
          </div>
        </div>
      </ins-kanban-card>
    </ins-kanban-column>

    <ins-kanban-column
      heading="With custom components, elements"
	  heading-color="#7BF1A8"
      total-count="3"
      add-item-button >
      <ins-kanban-card>
        <strong>Sunt Lorem et ullamco laborum anim nisi dolor labore sint nulla Lorem.</strong>
        <i>Nulla mollit pariatur laboris eu veniam occaecat eiusmod tempor ex anim in. Eiusmod sint aute voluptate non ipsum adipisicing commodo laborum dolore aliquip occaecat.            Labore deserunt do nulla non sint reprehenderit. Amet nulla sit cupidatat reprehenderit dolor ea minim. Excepteur adipisicing ullamco ea aliquip ut irure.
        </i>
      </ins-kanban-card>
      <ins-kanban-card>
        <h3>Incididunt consectetur minim mollit aute do elit proident deserunt ipsum.</h3>
      </ins-kanban-card>
      <ins-kanban-card>
        <i class="icon-heart"></i>
        <h3>
        Lorem ipsum
        </h3>
        <doc-quote type="reference">
        <div>
            <span class="icon-feather"></span>
            <span class="box-title">Pariatur velit officia aliqua aute deserunt proident deserunt.</span>
        </div>
        <p>Sample link <a href="https://docs.insites.io/" target="_blank">Insites Docs</a>.</p>
         </doc-quote>
     </ins-kanban-card>
    </ins-kanban-column>
  </ins-kanban-board>
Kanban Boards Grouping

By default, cards inside the columns that belong to the parent Kanban Board element can only be moved in that container only. However, if you want to move cards between different boards, you can achieve this by adding the board-group attribute on the Kanban Boards that you want to belong in the same group. This attribute is a string type and you can put any name that you prefer.

board 1 column 1 item 1 board 1 column 1 item 2 board 1 column 1 item 3 board 1 column 2 item 1 board 1 column 2 item 2
board 2 column 1 item 1 board 2 column 1 item 2 board 2 column 1 item 3 board 2 column 2 item 1 board 2 column 2 item 2
board 3 column 1 item 1 board 3 column 1 item 2 board 3 column 1 item 3 board 3 column 2 item 1 board 3 column 2 item 2

Code Snippet

<ins-kanban-board board-group="MyGroup" class="MyGroup1">
    <ins-kanban-column
      heading="Board 1: MyGroup"
	  heading-color="#FF8C42" >
      <ins-kanban-card style="background-color: rgba(255, 140, 66, 0.25)">
        board 1 column 1 item 1
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(255, 140, 66, 0.25)">
        board 1 column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(255, 140, 66, 0.25)">
        board 1 column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>
    <ins-kanban-column
      heading="Board 1: MyGroup"
	  heading-color="#FF8C42">
      <ins-kanban-card style="background-color: rgba(255, 140, 66, 0.25)">
        board 1 column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(255, 140, 66, 0.25)">
        board 1 column 2 item 2
      </ins-kanban-card>
    </ins-kanban-column>
</ins-kanban-board>
<br>
<ins-kanban-board board-group="MyGroup" class="MyGroup2">
    <ins-kanban-column
      heading="Board 2: MyGroup"
	  heading-color="#FDE74C" >
      <ins-kanban-card style="background-color: rgba(253, 231, 76, 0.25)">
        board 2 column 1 item 1
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(253, 231, 76, 0.25)">
        board 2 column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(253, 231, 76, 0.25)">
        board 2 column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>
    <ins-kanban-column
      heading="Board 2: MyGroup"
	  heading-color="#FDE74C">
      <ins-kanban-card style="background-color: rgba(253, 231, 76, 0.25)">
        board 2 column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(253, 231, 76, 0.25)">
        board 2 column 2 item 2
      </ins-kanban-card>
    </ins-kanban-column>
</ins-kanban-board>
<br>
<ins-kanban-board>
    <ins-kanban-column
      heading="Board 3: No group" >
      <ins-kanban-card>
        board 3 column 1 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        board 3 column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        board 3 column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>
    <ins-kanban-column
      heading="Board 3: No group">
      <ins-kanban-card>
        board 3 column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        board 3 column 2 item 2
      </ins-kanban-card>
    </ins-kanban-column>
</ins-kanban-board>
Kanban Board Events/Methods

Please check console log for the output.

Item Name
2020-08-12
2:12 PM
Courtney Henry
$120
column 1 item 2 column 1 item 3 column 2 item 1 column 2 item 2 column 2 item 3

Code Snippet

<ins-kanban-board>
    <ins-kanban-column
      id="myColumn"
      heading="TODO"
      total-count="2"
      heading-sub-detail="$308"
      add-item-button>
      <ins-kanban-card id="myCard" card-id="123" card-sortable-id="1">
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              2020-08-12
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              2:12 PM
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              Courtney Henry
            </span>
          </div>
          <div class="primary-detail">
            $120
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card card-id="324" card-sortable-id="2">
        column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card card-id="897" card-sortable-id="3">
        column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>

    <ins-kanban-column
      heading="In Progress (No Sort)"
      heading-sub-detail="$123"
      add-item-button
      disable-sort >
      <ins-kanban-card>
        column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        column 2 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        column 2 item 3
      </ins-kanban-card>
    </ins-kanban-column>
</ins-kanban-board>

<script>
    var myColumn = document.getElementById('myColumn');
  
    // Event for when the Add Item button is clicked
    myColumn.addEventListener('insColumnAdd', event => {
      console.log(event.detail);
      
      // Method that returns the order of the cards in the column (this is based from the card-sortable-id attribute of the ins-kanban-card)
      console.log(myColumn.getColumnCardsOrder())
      
      var order = ["3","2","1"];
      // Method that reorders the cards in the column based on the passed order array
      myColumn.reorderCards(order);
    });
	
    // Event for when the a drag has started
    myColumn.addEventListener('insDragStart', event => {
      console.log("insDragStart: ", event.detail);
    });
    
    // Event for when the a drag has ended
    myColumn.addEventListener('insDragEnd', event => {
      console.log("insDragEnd: ", event.detail);
    });
    
    // Event for when a card is dropped into the column from another column
    myColumn.addEventListener('insAdd', event => {
      console.log("insAdd: ", event.detail);
    });
    
    // Event for when any change is done to the column (add/update/remove)
    myColumn.addEventListener('insSort', event => {
      console.log("insSort: ", event.detail);
    });
    
    // Event for when when a card is chosen
    myColumn.addEventListener('insChoose', event => {
      console.log("insChoose: ", event.detail);
    });
    
    // Event for when the sorting is changed within the column
    myColumn.addEventListener('insUpdate', event => {
      console.log("insUpdate: ", event.detail);
    });
    
    // Event for when a card is moved in the column or between columns
    myColumn.addEventListener('insMove', event => {
      console.log("insMove: ", event.detail);
    });
    
    // Event for when a card is removed from the column into another column
    myColumn.addEventListener('insRemove', event => {
      console.log("insRemove: ", event.detail);
    });
    
    // Event for when the dragged card changes position
    myColumn.addEventListener('insPositionChanged', event => {
      console.log("insPositionChanged: ", event.detail);
    });

    var myCard = document.getElementById('myCard');
    // Event for when a card is clicked
    myCard.addEventListener('insClick', event => {
      console.log(event.detail)
    });
 </script>

 

<ins-kanban-board> Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
boardGroup string _blank - Defines which boards belong to the same group (Can be used to drag and drop kanban cards from one kanban board to the other.)

 

<ins-kanban-column> Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
add-item-button boolean false true, false Defines if an Add Item button should be shown on the board
add-item-button-label string Add Item - Label for the Add Item button
disable-sort boolean false true, false Disables the sorting/moving of cards in a board
heading string Heading - Heading label of the board
heading-color string #fff - Color of the heading
heading-text-color string - - Color of the heading text
heading-sub-detail string - - Heading's sub detail (will be shown on the right part of the heading wrapper)
no-items boolean false true, false Defines if there are card items inside the board
no-items-heading string - - No Items heading/label
total-count any - - Defines total count value

 

<ins-kanban-card> Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
card-id string - - Defines unique identifier for the card
card-sortable-id number - - Defines sort order identifier for the card

 

<ins-kanban-column> Events

 

EVENT OBJECT DESCRIPTION
insColumnAdd heading, el Execute a script when the Add Item button is clicked
insAdd item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script when a card is dropped into the column from another column
insChoose item, from, oldIndex Execute a script when a card is chosen
insDragStart item, from, oldIndex, oldDraggableIndex Execute a script on drag start
insDragEnd item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script on drag end
insMove item, to, from, relatedItem, insertedAfter Execute a script when a card is moved in the column or between columns
insPositionChanged item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script when the dragged card changes position
insRemove item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script when a card is removed from the column into another column
insSort item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script when any change is done to the column (add/update/remove)
insUpdate item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script when the sorting is changed within the column

 

<ins-kanban-column> Methods

 

FUNCTION PARAMETERS RETURN DESCRIPTION
getColumnCardsOrder n/a array object Returns the order of the cards in the column (this is based from the card-sortable-id attribute of the ins-kanban-card)
reorderCards array n/a Reorders the cards in the column based on the passed order array (e.g. ["3", "2", "1])

 

<ins-kanban-card> Events

 

EVENT OBJECT DESCRIPTION
insClick cardId, currentOrder Execute a script when the card is clicked

 

Events Return Objects

 

OBJECT DESCRIPTION
heading Kanban Board heading value
el Kanban Board HTMLElement
item Dragged HTMLElement(kanban card)
to Target list(kanban column)
from Previous list(kanban column)
oldIndex Card element's old index within old parent
newIndex Card element's new index within new parent
oldDraggableIndex Card element's old index within old parent, only counting draggable elements
newDraggableIndex Card element's new index within new parent, only counting draggable elements
relatedItem HTMLElement(kanban card) on which previously has the dragged card's new position
insertedAfter Defines if the dragged card has been inserted after the related item

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.