Horizontal Table

Back To Home

Back to Mapboard Topic Panel wiki

Horizontal Table

A horizontal table will include a row for each record of a dataset. The fields must be fields of the records in the state.

options:

option	description or example
topicKey
id
limit	Numeric Note: Must be used with sort to limit by order. Otherwise results will be random.
dataSources	an optional array array of dataSources that the table will wait for for rendering
defaultIncrement
showAllRowsOnFirstClick
showOnlyIfData
fields	Fields (property within 'slots')
filters	Filters
sort	Sort
externalLink	External Links
mapOverlay	Map Overlay Docs

slots:

slot	description or example
title
items

NOTE: externalLink should be a slot, not an option because it requires calling "evaluateSlot"

The "get-more-records" Event

There is a function in @philly/vue-datafetch which can be called by any component which uses the HorizontalTable component:

getMoreRecords(value) {
  this.$controller.getMoreRecords(value);
}

In a Mapboard config file

Example:

{
  type: 'horizontal-table',
  options: {
    topicKey: 'permits',
    id: 'liPermits',
    limit: 5,
    fields: [
      {
        label: 'Date',
        value: function(state, item){
          return item.permitissuedate
        },
        nullValue: 'no date available',
        transforms: [
          'date'
        ]
      },
      {
        label: 'ID',
        value: function(state, item){
          return "<a target='_blank' href='//li.phila.gov/#details?entity=permits&eid="+item.permitnumber+"&key="+item.addresskey+"&address="+item.address+"'>"+item.permitnumber+" <i class='fa fa-external-link'></i></a>"
        }
      },
      {
        label: 'Description',
        value: function(state, item){
          return item.permitdescription
        }
      },
      {
        label: 'Status',
        value: function(state, item){
          return item.status
        }
      },
    ],
    sort: {
      // this should return the val to sort on
      getValue: function(item) {
        return item.permitissuedate;
      },
      // asc or desc
      order: 'desc'
    },
    externalLink: {
      action: function(count) {
        return 'See ' + count + ' older permits at L&I Property History';
      },
      name: 'L&I Property History',
      href: function(state) {
        var address = state.geocode.data.properties.street_address;
        var addressEncoded = encodeURIComponent(address);
        return '//li.phila.gov/#summary?address=' + addressEncoded;
      }
    }
  },
  slots: {
    title: 'Permits',
    items: function(state) {
      var data = state.sources['liPermits'].data.rows;
      var rows = data.map(function(row){
        var itemRow = row;
        return itemRow;
      });
      return rows;
    },
  },
}