generate data

// Samples are generated with ranjs:
// https://synesenom.github.io/ran/
function getData () {
  const hasCurrency = Math.random() < 0.5
  return Array.from({ length: ranjs.core.int(2, 30) }, () => ({
    id: ranjs.core.char('0123456789abcdef', 6).join(''),
    date: new Date(2019, ranjs.core.int(0, 11), ranjs.core.int(1, 28))
      .toISOString().substr(0, 10),
    city: ranjs.core.choice(['Copenhagen', 'Oslo', 'Stockholm', 'Reykjavík']),
    total: ranjs.core.float(100).toFixed(1),
    ...(hasCurrency && { currency: ranjs.core.choice(['DKK', 'NOK', 'SEK', 'ISK']) })
  }))
}

create chart

const table = dalian.Table('table', '#widget')
  .data(getData())
  .schema([
    {key: 'id', name: 'ID'},
    {key: 'date', name: 'Date', type: 'date'},
    {key: 'city', name: 'Place of purchase'},
    {key: 'total', name: 'Total amount', type: 'number'},
    {key: 'currency', name: 'Currency'}
  ])
  .width(WIDTH)
  .height(HEIGHT)
  .margins(40)
  .font.size(14)
  .mouse.over(k => table.highlight(`row-${k.row}`))
  .mouse.leave(() => table.highlight())
  .render()