I'm working on Jstree And I want to display a Node attribute on full right side of the screen. Css Currently Showing Like this I want to show the attribute like that
You can get that by using "wholerow" plugin and a little html/css in jstree nodes. Below is a working example without your icons.
var rawData = [
{id: "1", parent: "#", label: "Main Item", amount: 10},
{id: "1.1", parent: "1", label: "Child Item", amount: 4},
{id: "1.1.1", parent: "1.1", label: "Sub Child Item", amount: 4},
{id: "1.2", parent: "1", label: "Child Item 1", amount: 2},
{id: "1.2.1", parent: "1.2", label: "CHeckkkk", amount: 2},
{id: "1.3", parent: "1", label: "Child Item 2", amount: 2},
{id: "1.4", parent: "1", label: "Child Item 3", amount: 2},
{id: "1.5", parent: "1", label: "New Node 176", amount: 0},
{id: "2", parent: "#", label: "New Node", amount: 0},
{id: "3", parent: "#", label: "New Node 173", amount: 0},
{id: "4", parent: "#", label: "New Node 175", amount: 0}
];
rawData.forEach((e, i) => e.text = `${e.label}<span class='amount'>${e.amount}</span>`);
$('#jstree').jstree({
core: {
data: rawData
},
plugins: ['wholerow']
})
.on('loaded.jstree', function() {
$('#jstree').jstree('open_all');
});#jstree-container {
width: 300px;
}
li.jstree-node a {
width: 100%;
}
span.amount {
float: right;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
<div id="jstree-container">
<div id="jstree"></div>
</div>