grid = html`<div id="my-grid" style="width: 100%;height:500px" class="ag-theme-balham"></div>`
status = {
if (!latest || !latest.value) {
document.getElementById('my-grid').innerHTML = '';
return 'missing input';
}
const obj = latest.value;
const { gridOptions } = obj;
gridOptions.rowSelection = 'single';
gridOptions.onSelectionChanged = async function() {
const selectedRows = gridOpt.api.getSelectedRows();
send('grid-row', selectedRows[0], true);
mutable clicked = selectedRows[0];
};
console.log(gridOptions);
const eGridDiv = document.getElementById('my-grid');
let status = '';
if (!gridOpt) {
console.log('creation');
new AgGrid.Grid(eGridDiv, gridOptions);
mutable gridOpt = gridOptions;
status = 'created';
} else {
console.log('update');
const data = gridOptions.rowData;
// console.log(data);
gridOpt.api.setRowData(data);
status = 'updated';
}
gridOpt.columnApi.autoSizeColumns();
return status;
}
mutable gridOpt = null
{
const variables = { channel: "channel-1", name: "grid" };
const opts = { fetchPolicy: 'network-only' };
const obj = await b.actions.read({ client, variables, opts, raw: false });
mutable latest = obj;
return obj;
}
send = async (name, value, add_histo = false) => {
const variables = {
channel,
name,
value: JSON.stringify(value),
add_histo,
expiry: null
};
const opts = { fetchPolicy: 'no-cache' };
await b.actions.publishWrite({ client, variables, opts, raw: false });
return variables.value;
}
mutable clicked = ({ row: 0, col: 0 })
latest
synced = {
const params = {
client,
channel,
pattern: false,
maxDuration: 3000,
filter: name => name === 'grid'
};
return buildSubscription(params);
}
// handler.remove('10_38_41_582')
stylesheet2 = html`<link rel='stylesheet'
href='https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css' />`
stylesheet1 = html`<link rel='stylesheet'
href='https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css' />`
AgGrid = require('ag-grid-community@23.0.2/dist/ag-grid-community.js')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
