I am new to the Tabulator JS library and I stumbled upon an issue. I have 2 columns and I am trying to find a way to implement cascading dropdowns in each row. The second column value options are dependent on the first column value selection. What would be an easy way of doing it?
Expected results:
- User selects Color in the first column and then he should see Blue & Yellow in the second column dropdown list of that row.
- User selects Style in the first column and then he should see S1 & S2 in the second column dropdown list of that row.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
$(function () {
var tabledata = [{ Need: "1",Surface:"" }];
var NeedOptionSet = {};
NeedOptionSet["1"] = "Color";
NeedOptionSet["2"] = "Style";
var SurfaceOptionSet_Color = {};
SurfaceOptionSet_Color["1"] = "Blue";
SurfaceOptionSet_Color["2"] = "Yellow";
var SurfaceOptionSet_Style = {};
SurfaceOptionSet_Style["1"] = "Bold";
SurfaceOptionSet_Style["2"] = "Underline";
var table = new Tabulator("#example-table", {
height: 400, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
pagination: "local",
paginationSize: 15,
paginationSizeSelector: [15, 25, 35],
addRowPos: "top",
columns: [ //Define Table Columns
{
title: "Need", field: "Need", editor: "autocomplete", editorParams: {
showListOnEmpty: true,
freetext: true,
values: NeedOptionSet
}, formatter: 'lookup', formatterParams: NeedOptionSet
},
{
title: "Surface", field: "Surface", editor: "autocomplete", editorParams: {
showListOnEmpty: true,
freetext: true,
values: SurfaceOptionSet_Color
}, formatter: 'lookup', formatterParams: SurfaceOptionSet_Color
}
]
});
});
</script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>