Tabulator.js Using Icon Column as Row header

I just started using tabulator.js. I've created a table with the first column as an icon column that should show a right arrow when a row is highlighted. That is, what I want to do is show the arrow only on the highlighted row using rowMouseEnter (show arrow) and rowMouseLeave (hide arrow) as shown in the picture.

Code:

	$(function(){
		table.on("rowMouseEnter", function(e, row){
			// Here code to show arrow in the first cell of the row.
		});

		table.on("rowMouseLeave", function(e, row){
			// Here code clear the first cell of the row.
		});
	});

	var table = new Tabulator("#table", {
		data: dataTable,
		layout:"fitColumns",
		addRowPos: "bottom",
		tabEndNewRow: true,
		columns:[
			{headerSort:false, frozen:true, width:30, minWidth:30},
            {title:"Name", field:"name"},
            {title:"Progress", field:"progress", sorter:"number"},
            {title:"Gender", field:"gender"},
            {title:"Rating", field:"rating"},
            {title:"Favourite Color", field:"col"},
            {title:"Date Of Birth", field:"dob"}
		]
	});

I see you posted your own answer while I was typing Glad you found the answer! I will leave my take on it here as an alternative:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const data = [
  { id: 1, name: 'Billy Bob', age: '12', gender: 'male', height: 1, col: 'red', dob: '', cheese: 1 },
  { id: 2, name: 'Mary May', age: '1', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982', cheese: true },
  { id: 10, name: 'Margret Marmajuke', age: '16', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1999' }
]

const table = new Tabulator('#example-table', {
  data: data,
  selectable: true,
  columns: [
    { headerSort:false, frozen:true, width:30, minWidth:30},
    { title: 'Name', field: 'name' },
    { title: 'Age', field: 'age' },
    { title: 'Gender', field: 'gender' },
    { title: 'Height', field: 'height' },
    { title: 'Favourite Color', field: 'col' }
  ]
})

function rowArrow(row, arrow) {
  let cells = row.getCells()
  let el = cells[0].getElement()

  el.innerHTML = arrow ? '<div class="arrow-right"></div>' : ''
}

table.on("rowMouseEnter", (e, row) => rowArrow(row, true))
table.on("rowMouseLeave", (e, row) => rowArrow(row, false))

<!-- language: lang-css -->

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #333;
  margin: 3px auto;
}

<!-- language: lang-html -->

<link href="https://unpkg.com/tabulator-tables@5.5.0/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>

<!-- end snippet -->

Solved !!!

Tabulator.js documentation is great.

Here the code:

table.on("rowMouseEnter", function(e, row){
	let cells = row.getCells();
	let el = cells[0].getElement();
	el.innerHTML = "<i class='material-icons'>arrow_right</i>";
});

table.on("rowMouseLeave", function(e, row){
	let cells = row.getCells();
	cells[0].setValue("");
});