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
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!
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.
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
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();
}
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.