How to use Tabulator JavaScript library in observablehg? - javascript

I would like to use the Tabulator JavaScript library as part of an observablehq notebook, but for some reason I can't make it work. Below is an example. Works fine in browser, but I could not make it work in observablehq. Here is my naive attempt at observablehq. I also tried to load the css and JavaScript urls using require, but to no avail.
<html>
<script src="https://unpkg.com/tabulator-tables#5.3.0/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#5.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
<div id="table"></div>`
<script>
var tableData = [
{name:"Bob"},
{name:"Steve"},
{name:"Jim"},
]
//Example Table
var table = new Tabulator("#table", {
data:tableData, //load data into table
height:200, //enable the virtual DOM
columns:[
{title:"Name", field:"name", width:200, editor:"input"},
]
});
</script>
</html>

Here's an example https://observablehq.com/#fil/hello-tabulator
you can use, in different cells:
Tabulator = require("tabulator-tables#5")
to load the library
#import url("https://unpkg.com/tabulator-tables#5/dist/css/tabulator.min.css")
to load the css
And, finally:
viewof t = {
const data = penguins;
const table = new Tabulator(document.createElement("DIV"), {
data,
height: 400,
layout: "fitColumns",
autoColumns: true,
autoColumnsDefinitions: (columns) =>
columns.map((d) => ({ ...d, editor: true })),
editor: true,
pagination: "local"
});
table.element.value = data;
table.on("dataChanged", (data) => {
table.element.value = data;
table.element.dispatchEvent(new CustomEvent("input"));
});
return table.element;
}

Related

How do I exclude/hide rows in TableToExcel?

I'm using PivotTable.js to generate a dynamic table via .json archive and also using TableToExcel plugin to make an export from the displayed data on the screen.
What I do notice is that the export makes two rows filled with that I do not need, and I'm searching a way to either exclude or hide them.
This is my code at the moment:
$(function(){
var derivers = $.pivotUtilities.derivers;
var renderers = $.extend($.pivotUtilities.renderers,
$.pivotUtilities.c3_renderers);
$.getJSON("reportes.json", function(mps) {
$("#output").pivotUI(mps, {
renderers: renderers,
rendererName: "Heatmap",
//rowOrder: "value_z_to_a", colOrder: "value_z_to_a",
rendererOptions: {
c3: { data: {colors: {
Liberal: '#dc3912', Conservative: '#3366cc', NDP: '#ff9900',
Green:'#109618', 'Bloc Quebecois': '#990099'
}}}
}
});
});
});
$(function() {
$("button.generate").click(function(e) {
TableToExcel.convert(document.getElementById("output"), {
name: "Report.xlsx",
sheet: {
name: "Sheet 1"
}
});
});
});
Every option I find to exclude rows is for HTML made tables, which is not my case.
Any help is kindly appreciated. Thanks!

Handsontable problem: Can’t change data once nestedRows=true

I'm working with the Handsontable nested rows.
I’m trying to set a new dataset for the table with the nestedRows=true but the data remains the same.
import Handsontable from "handsontable";
import 'handsontable/dist/handsontable.full.css';
import "./styles.css";
let data = [
{a:'', b:'Tesla', c:'Volvo', d:'Toyota', e:'Ford'},
];
const container = document.getElementById('example');
const btn = document.getElementById('btn');
btn.addEventListener("click", doTest);
const hot = new Handsontable(container, {
data: data,
width: '100%',
height: '100%',
rowHeaders: true,
colHeaders: true,
nestedRows: true,
licenseKey: 'non-commercial-and-evaluation'
});
function doTest(){
hot.updateData([
{a:'1', b:'2', c:'3', d:'4', e:'5'},
]);
}
Please check the example
here
click on “Test” button to update the dataset. For nestedRows=false - works fine, for nestedRows=true - does nothing.
Please help me to understand what is wrong here.

Inserting Vanilla JS into VueJS framework

With the concept of VueJS is a kind of framework of JS, then it should have no problem inserting the vanilla JS into it. The following is the attempt to insert the pure JS code into vue-cli project(webpack structure).
[Before Start] I tried the example code as the following link(official document)
URL: https://codepen.io/Tobyliao/pen/ZEWNvwE?editable=true%3Dhttps%3A%2F%2Fdocs.bokeh.org%2F
it works.
[Question] As I tried to imlement into Vue project. It fails. picture1 is the directory structure.
I tried to place the src url include into ./public/html's tag as following:
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.1.min.js"></script>
Create a componet in './src/components/BokehPlot.vue'
inside the code, I insert
<template>
<h1>Measurement Plotting</h1>
</template>
<script src='./main.js'>
export default {
}
</script>
Then finally place all the Bokeh code into './src/component/main.js'. It is the pure JS code I want to import into the structure.
[Result]
I can see the plot in the background, but it kept on showing the error message like picture2.
You have many options here, I went ahead and simply made a mixin to utilize the component lifecycle that Vue provides. source
Here are the relevant parts:
BokehPlot.vue
<template>
<h1>治具量測</h1>
</template>
<script>
import Chart from "#/mixins/Chart";
export default {
mixins: [Chart],
};
</script>
Chart.js
export default {
data() {
return {
plot: null,
xdr: null,
ydr: null
};
},
beforeMount() {
// create some ranges for the plot
this.xdr = new Bokeh.Range1d({ start: -1, end: 100 });
this.ydr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
// make the plot
this.plot = new Bokeh.Plot({
title: "BokehJS Plot",
x_range: this.xdr,
y_range: this.ydr,
plot_width: 400,
plot_height: 400,
background_fill_color: "#F2F2F7"
});
},
mounted() {
this.loadData();
},
methods: {
loadData() {
// create some data and a ColumnDataSource
let x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
let y = x.map(function (v) {
return v * 0.5 + 3.0;
});
let source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });
// add axes to the plot
let xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
let yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
this.plot.add_layout(xaxis, "below");
this.plot.add_layout(yaxis, "left");
// add grids to the plot
let xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
let ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
this.plot.add_layout(xgrid);
this.plot.add_layout(ygrid);
// add a Line glyph
let line = new Bokeh.Line({
x: { field: "x" },
y: { field: "y" },
line_color: "#666699",
line_width: 2
});
this.plot.add_glyph(line, source);
Bokeh.Plotting.show(this.plot);
}
}
};
Many decisions to still make, but hopefully that will get you pointed down the right path.
See working example:
https://codesandbox.io/s/bokehjs-forked-4w20k?fontsize=14&hidenavigation=1&theme=dark

MVC Webgrid, javascript stops working after sort and paging

I have a problem with my webgrid, in one of my columns I have an actionlinks that has a JavaScript with a click function, everything works fine. But after I have sorted any column or paging the grid my JavaScript stops working. I have removed the ajaxupdatecontainerID property and my JavaScript works after paging but I can´t sort my columns anymore and after paging the browser scrolls to top of the page. check my code below:
<div id="grider">
#{ var grid3 = new WebGrid(Model.webgridlastlopp.ToList(), rowsPerPage: 10, defaultSort: "Status", canPage: true, ajaxUpdateContainerId: "grider");}
#grid3.GetHtml(tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
grid3.Column("Startstation", "Start station/kombiterminal"),
grid3.Column("Slutstation", "Slut station/kombiterminal"),
grid3.Column("Upphämtningsdatum", "Startdatum", format: #<text>#item.Upphämtningsdatum.ToString("yyyy/MM/dd")</text>),
grid3.Column("Leveransdatum", "Leveransdatum", format: #<text>#item.Leveransdatum.ToString("yyyy/MM/dd")</text>),
grid3.Column(format: (item) => Html.ActionLink("Visa detaljer", "OrderDetails", "Home", new { id = item.Ordernummer }, new { #class = "modal", #Style = "color:Gray;" }))
))
</div>
<script type="text/javascript">
$(function () {
$('.modal').click(function () {
alert("hello");
});
</script>
As you page, new HTML is being loaded into the page. Because of this, you need to use the jQuery live method:
<script type="text/javascript">
$(function () {
$('.modal').live('click', function () {
alert("hello");
});
</script>
jQuery live
In your code add reference to the js function for attribute
#{
var grid3 = new WebGrid(
Model.webgridlastlopp.ToList(),
rowsPerPage: 10,
defaultSort: "Status",
canPage: true,
ajaxUpdateContainerId: "grider",
ajaxUpdateCallback: "GridUpdate");
}
js function
function GridUpdate(data) {
applyGridChanges();
}

Dojo DataGrid Not Showing

In my dojo.xhrGet I have specified this load::
load: function (data) {
// reset data display containers
dojo.addClass("search_results", "hide_on_load");
dojo.byId("search_results_found").innerHTML = "";
// populate table with new results.
dojo.byId("search_results_found").innerHTML = "" + data.length + " search result(s) found.";
// when data is from an XHR request, you must transform it into a store.
// See: http://stackoverflow.com/questions/2423459/datagrid-in-dojo-with-json-data-from-a-servlet
var items = dojo.map(data, function (res_row) {
return {
'Id': res_row.Id,
'Name': res_row.Name,
'VisitType': res_row.VisitType,
'VisitDate': res_row.VisitDate
};
});
var store = new dojo.data.ItemFileReadStore({
data: {
items: items
}
});
var res_layout = [
{field: 'Id', name: 'ID', width: '10%'},
{field: 'Name', name: 'Site Name', width: '50%'},
{field: 'VisitType', name: 'Visit Type', width: '20%'},
{field: 'VisitDate', name: 'Visit Date', width: '20%'}
];
// create a new grid:
var res_grid = new dojox.grid.DataGrid({
store: store,
structure: res_layout,
rowsPerPage: 10
}, document.createElement('div'));
// append the new grid to the div "search_results_table":
dojo.byId("search_results_table").appendChild(res_grid.domNode);
// Call startup, in order to render the grid:
res_grid.startup();
dojo.removeClass("search_results", "hide_on_load");
standby.hide();
},
And, the html is:
<!-- Search Results Table -->
<div id="search_results" class="hide_on_load">
<div id="search_results_found"></div>
<div id="search_results_table"></div>
</div>
At the end of this script, the grid does not show.
I removed the hide_on_load css class selector so that I could exclude it as being the issue. But, that did not help.
Looking at the console, there are no errors logged.
Also, writing the various objects (res_grid, store, etc.) all produce output that looks to be correct.
Can somebody provide some help on how to get it to show?
Thanks!
Update:
When I inspect the DOM after this code has run, I see the tabler created with the headers but then when I go to find the actual table with the search results (under div class=dojoxGridContent), it isn't there.
Update 2:
I have the styles specified too:
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table { margin: 0; }
</style>
Make sure you set a size through the style property on the div where you place your grid, and don't forget to import the CSS files for your grid, like :
<style type="text/css">
#import "dojoroot/dojox/grid/resources/Grid.css";
#import "dojoroot/dojox/grid/resources/soriaGrid.css";
.dojoxGrid table {
margin: 0;
}
</style>
Note : Replace soria by whatever theme you are using...
... and don't forget to set a size to your grid's dom node :
<div id="gridnode" style="width:100%; height:500px;"></div>
If you don't want a fix height you can declare the grid withautoHeight: true.
var res_grid = new dojox.grid.DataGrid({
store: store,
structure: res_layout,
rowsPerPage: 10,
autoHeight: true
}, document.createElement('div'));
With This attribute you don't need to add style to the parent container for it to display.

Categories