JQuery Grid

Invoke the cellhover method of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="kanban"></div>

JavaScript

$(document).ready(function() {
   const fields = [{
       name: "id",
       type: "string"
     },
     {
       name: "status",
       map: "state",
       type: "string"
     },
     {
       name: "text",
       map: "label",
       type: "string"
     },
     {
       name: "tags",
       type: "string"
     },
     {
       name: "color",
       map: "hex",
       type: "string"
     },
     {
       name: "resourceId",
       type: "number"
     }
   ];

   const data = [{
       id: "1161",
       state: "new",
       label: "Combine Orders",
       tags: "orders, combine",
       hex: "#5dc3f0",
       tooltipData: '1161',
       resourceId: 3
     },
     {
       id: "1645",
       state: "work",
       label: "Change Billing Address",
       tags: "billing",
       hex: "#f19b60",
       tooltipData: '1645',
       resourceId: 1
     },
     {
       id: "9213",
       state: "new",
       label: "One item added to the cart",
       tags: "cart",
       hex: "#5dc3f0",
       tooltipData: '9213',
       resourceId: 3
     },
     {
       id: "6546",
       state: "done",
       label: "Edit Item Price",
       tags: "price, edit",
       hex: "#5dc3f0",
       tooltipData: '6546',
       resourceId: 4
     },
     {
       id: "9034",
       state: "new",
       label: "Login 404 issue",
       tags: "issue, login",
       tooltipData: '9034',
       hex: "#6bbd49"
     }
   ];

   const source = {
     localData: data,
     dataType: "array",
     dataFields: fields
   };

   const dataAdapter = new $.jqx.dataAdapter(source);

   $('#kanban').jqxKanban({
     width: 600,
     height: 500,
     source: dataAdapter,
     columns: [{
         text: "Backlog",
         dataField: "new",
         maxItems: 5
       },
       {
         text: "In Progress",
         dataField: "work",
         maxItems: 5
       },
       {
         text: "Done",
         dataField: "done",
         maxItems: 5,
         collapseDirection: "right"
       }
     ],
    ...