JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button onclick="expand()">
expand year
</button>
<button onclick="onChange()">
update grid
</button>
<div id="pivot-container"></div>
CSS
.editable {
padding: 0 !important;
z-index: 1 !important;
}
.editable input {
width: 100%;
height: 100%;
background-color: transparent;
border: 0px solid;
padding-left: 4px !important;
}
JavaScript
new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 600,
toolbar: true,
report: getReport()
});
flexmonster.customizeCell(function(cell, data) {
if (data && data.type == "value" && !isNaN(data.value) && data.level == 0 && !data.isTotal) {
cell.addClass("editable");
cell.text = `<input type="text" value="${data.label}" data-cell='${JSON.stringify(data)}'>`;
}
})
function onChange(event) {
flexmonster.updateData({ data: [{
ScenarioKey: 1,
ScenarioName: 'Actual',
OrganizationKey: 3,
OrganizationName: 'Northeast Division',
AccountKey: 80,
AccountDescription: 'Building Leasehold',
Amount: 9000,
Year: '2010',
Month: '12'
}] }, { partial: true });
}
function expand() {
flexmonster.expandData('Year')
}
function getReport() {
return {
dataSource: {
type: "json",
data: [
{
ScenarioKey: 1,
ScenarioName: 'Actual',
OrganizationKey: 3,
OrganizationName: 'Northeast Division',
AccountKey: 80,
AccountDescription: 'Building Leasehold',
Amount: 586,
Year: '2010',
Month: '12'
},
{
ScenarioKey: 2,
ScenarioName: 'Budget',
OrganizationKey: 3,
OrganizationName: 'Northeast Division',
AccountKey: 80,
AccountDescription: 'Building Leasehold',
Amount: 550,
Year: '2010',
Month: '12'
},
{
ScenarioKey: 2,
ScenarioName: 'Budget',
OrganizationKey: 3,
OrganizationName: 'Northeast Division',
AccountKey: 81,
AccountDescription: 'Vehicles',
Amount: 380,
Year: '2010',
Month: '12'
},
{
ScenarioKey: 1,
ScenarioName: 'Actual',
OrganizationKey: 3,
OrganizationName: 'Northeast Division',
AccountKey: 81,
AccountDescription: 'Vehicles',
Amount: 363,
Year: '2010',
Month: '12'
},
{
ScenarioKey: 1,
ScenarioName: 'Actual',
OrganizationKey: 3,
OrganizationName: 'Northeast...