Published
Edited
May 31, 2020
1 star
Insert cell
Insert cell
Insert cell
testData = [
{foo: 'a', bar: 1, baz: true, date: new Date(2010, 0, 1)},
{foo: 'b', bar: 2, baz: false, date: new Date(2010, 5, 15)},
{foo: 'c', bar: -1, baz: null, date: new Date(2010, 9, 31)},
{foo: 'd', bar: NaN, date: new Date(2010, 2, 10, 13, 45, 23)}
]
Insert cell
printTable(testData.slice().reverse(), ['baz', 'bar'], '*');
Insert cell
import {printTable} from '@uwdata/data-utilities'
Insert cell
table_styles = html`<style>

table {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border-collapse: collapse;
display: block;
overflow: auto;
white-space: nowrap;
width:${width}px;
min-width:${width}px
}

th {
background: #F6F6F6;
}


th:nth-child(3),
th:nth-child(4)
{
text-align: right;
}


td:nth-child(3),
td:nth-child(4)
{
font-family: "Pragmata Pro", "Overpass Mono", Consolas, "Courier New", Courier, monospace;
}

td, th {
border: 1px solid #ECECEF;
text-align: left;
padding: 8px;
}

td:first-of-type {
font-weight: 600;
}

</style>
`
Insert cell

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.
Learn more