I am trying to make it so the end user can select a row, column, or cell and make it any color they choose while on the front end of the website. Tabulator has a way to change colors for specific columns, but it's coded in the backend. I can do the same for rows, even cells, but this won't work for end users.
I have tried multiple JavaScript and jQuery snippets in an attempt to get this to work. I also installed the jsColor jQuery plugin, but can't seem to get it to work with Tabulator. Ideally, I would like for a double-click on a row to open the color picker.
I have spent several hours today poring over Tabulator documentation and jsColor, then writing different snippets of code, but with little luck.
<!DOCTYPE html>
<html>
<head>
<title>Tabulator Table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="tabulator-master/dist/css/bootstrap/tabulator_bootstrap4.css">
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
/* Create data */
$(document).ready(function() {
// Build Table
var tab_table = new Tabulator("#data-container", {
layout: "fitColumns",
selectable: true,
height: "auto",
width: "auto",
var colorFormatter = function rowClick(e, row){
var value = row.getValue('color');
}
columns: [
{title: "First Name", field: "first_name", width: 200, formatter: "color"},
{title: "Last Name", field: "last_name", width: 200, formatter: "color"},
{title: "Email", field: "email", width: 200, formatter: "color"},
{title: "Phone", field: "phone", width: 200, formatter: "color"},
],
data: [
{id:1, first_name: "Bugs", last_name: "Bunny", email: "[email protected]", phone: "(555) 555-1212"},
{id:2, first_name: "Yosemite", last_name: "Sam", email: "[email protected]", phone: "(555) 555-2323"},
{id:3, first_name: "Daffy", last_name: "Duck", email: "[email protected]", phone: "(555) 555-3434"},
{id:4, first_name: "Wile E.", last_name: "Coyote", email: "[email protected]", phone: "(555) 555-4545"},
{id:5, first_name: "Elmer", last_name: "Fudd", email: "[email protected]", phone: "(555) 555-5656"},
],
rowSelectionChanged:function(data, rows){
//update selected row counter on selection change
$("#select-stats span").text(data.length);
}
});
var setJsColor = function update(jscolor) {
document.getElementByClassId('row_id').style.backgroundColor = '#' + jscolor;
}
});
</script>
</head>
<body>
<div class="container">
<div id="table-buttons">
<input class="form-control" type="text" id="numColumns" value="1" />
<button class="btn btn-primary" id="btnAddColumns">Add Columns</button>
<button class="btn btn-primary" id="btnRemoveColumn">Remove Column</button>
<button class="jscolor
{valueElement:'valueInput', styleElement:'styleInput'}">
Click here to pick a color
</button>
</div>
<div id="data-container" class="table-responsive">
</div>
</div>
</body>
</html>
Expected Result: Click once to select row (or cell) and click a second time to trigger the color picker.
Actual Result: I can get the select row to work, but can't get any farther than that.
Error Messages: None.
I've never used jQuery tabulator before but by referring to the manual here I managed to get it working the way you want (at least I hope so), here is the code
<!DOCTYPE html>
<html>
<head>
<title>Tabulator Table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/css/bootstrap/tabulator_bootstrap4.min.css">
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/js/tabulator.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* Create data */
$(document).ready(function() {
// Build Table
var tab_table = new Tabulator("#data-container", {
layout: "fitColumns",
selectable: true,
height: "auto",
width: "auto",
rowSelected: function(row) {
$(row.getElement()).css({
borderWidth: '3px',
borderColor: 'red'
});
},
rowDeselected: function(row) {
$(row.getElement()).css({
borderWidth: '',
borderColor: ''
});
},
columns: [{
title: "First Name",
field: "first_name",
width: 200
},
{
title: "Last Name",
field: "last_name",
width: 200
},
{
title: "Email",
field: "email",
width: 200
},
{
title: "Phone",
field: "phone",
width: 200
},
],
data: [{
id: 1,
first_name: "Bugs",
last_name: "Bunny",
email: "[email protected]",
phone: "(555) 555-1212"
},
{
id: 2,
first_name: "Yosemite",
last_name: "Sam",
email: "[email protected]",
phone: "(555) 555-2323"
},
{
id: 3,
first_name: "Daffy",
last_name: "Duck",
email: "[email protected]",
phone: "(555) 555-3434"
},
{
id: 4,
first_name: "Wile E.",
last_name: "Coyote",
email: "[email protected]",
phone: "(555) 555-4545"
},
{
id: 5,
first_name: "Elmer",
last_name: "Fudd",
email: "[email protected]",
phone: "(555) 555-5656"
},
],
});
$('.jscolor').focusout(function() {
$('.tabulator-selected').css({
borderWidth: '',
borderColor: ''
});
$('.tabulator-selected').removeClass('tabulator-selected');
$('.jscolor').html('Click here to pick a color');
});
$('.jscolor').html('Click here to pick a color');
});
</script>
</head>
<body>
<div class="container">
<div id="table-buttons">
<input class="form-control" type="text" id="numColumns" value="1" />
<button class="btn btn-primary" id="btnAddColumns">Add Columns</button>
<button class="btn btn-primary" id="btnRemoveColumn">Remove Column</button>
<button class="jscolor
{onFineChange:'update(this)', closable:true, closeText:'Close me!'}">
Click here to pick a color
</button>
<script type="text/javascript">
function update(picker) {
var color = picker.valueElement.innerHTML;
$('.tabulator-selected').css('backgroundColor', '#' + color);
}
</script>
</div>
<div id="data-container" class="table-responsive">
</div>
</div>
</body>
</html>When you click on a row (or multiple), it gets underlined with red border so you can see which rows you selected to change their colors, once you picked your desired color the border removes itself to let you know the changes were made.
The following methods did the trick :
rowSelected:function(row){
$(row.getElement()).css({borderWidth: '3px', borderColor: 'red'});
},
rowDeselected:function(row){
$(row.getElement()).css({borderWidth: '', borderColor: ''});
},
and for the color picker :
<script type="text/javascript">
function update(picker) {
var color = picker.valueElement.innerHTML;
$('.tabulator-selected').css('backgroundColor', '#' + color);
}
</script>
Feel free to modify it at your own convenience, hope that helps.