Vertical Table

Back To Home

Back to Mapboard Topic Panel wiki

Vertical Table

A vertical table has fields down the cells on the right, with single values for each. The fields can be anything you choose.

options:

option	description or example
nullValue
externalLink
dataSources	an optional array array of dataSources that the table will wait for for rendering

slots:

slot	description or example
title	Creates title above table. Ex: title: 'Environmental Hazards and Resources
fields	Fields (property under 'slots')

fields:

parameter	description or example
label
value
transforms

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

In a Mapboard config file

Example:

{
  type: 'vertical-table',
  slots: {
    fields: [
      {
        label: 'OPA Account #',
        value: function(state) {
          return state.geocode.data.properties.opa_account_num;
        }
      },
      {
        label: 'OPA Address',
        value: function(state) {
          return state.geocode.data.properties.opa_address;
        }
      },
      {
        label: 'Owners',
        value: function(state) {
          var owners = state.geocode.data.properties.opa_owners;
          var ownersJoined = owners.join(', ');
          return ownersJoined;
        }
      },
      {
        label: 'Assessed Value ' + new Date().getFullYear(),
        value: function(state) {
          var data = state.sources.opa.data;
          return data.market_value;
        },
        transforms: [
          'currency'
        ]
      },
      {
        label: 'Sale Date',
        value: function(state) {
          var data = state.sources.opa.data;

          return data.sale_date;
        },
        transforms: [
          'date'
        ]
      },
      {
        label: 'Sale Price',
        value: function(state) {
          var data = state.sources.opa.data;
          return data.sale_price;
        },
        transforms: [
          'currency'
        ]
      },
    ],
  },
  options: {
    externalLink: {
      action: function(count) {
        return 'See more';
      },
      name: 'Property Search',
      href: function(state) {
        var id = state.geocode.data.properties.opa_account_num;
        return '//property.phila.gov/?p=' + id;
      }
    }
  }
}