Table library api

We have mapped out the API options used for creating a table with our library. This can be used as a helper when using the everviz API to create a table programatically.

{
  title: {
    text: String,
    style: CSSObject,
  },
  subtitle: {
    text: String,
    style: CSSObject,
  },
  caption: {
    text: String,
    style: CSSObject,
  },
  canvas: {
    style: CSSObject
  },
  table: {
    style: CSSObject,
    searchable: {
      enabled: Boolean,
      placeholderText: String
    },
    sortable: Boolean,
    cards: Boolean,
    pagination: {
      enabled: Boolean,
      resultsPerPage: Number,
      backButtonStyle: {
        color: ColorString
      },
      frontButtonStyle: {
        color: ColorString
      }
    }
  },
  header: {
    style: CSSObject,
    headerRows: Number
  },
  rows: {
    stripes: Boolean,
    stripesColor: ColorString,
    textColor: ColorString
  },
  logo: {
    url: String,
    position: 'bottomRight' | 'bottomLeft' | 'topRight' | 'topLeft',
    width: '20%',
    minWidth: Number,
    style: CSSObject
  },
  columns: [{
      type: 'data' | 'chart',
      visible: Boolean,

      //Conditional Formatting (optional)
      rule: Boolean,
      color: ColorString,
      value: String | Number,
      style: CSSObject,

      //Charts (optional)
      columnToValue: Number,
      columnFromValue: Number,
      typeValue: 'bar' | 'line' | 'area' | 'stacked' | 'column',
      hideOriginalColumnsValue: Boolean,
      negativeColor: ColorString,
      colors: Array<ColorString>
  }],
}

Data options for the table can be laid out in either of two ways. A string/number value or an object with properties for the following:

• value
• style
• colSpan
• rowSpan

{
    value: [
        ["Header 1","Header 2","Header 3","Header 4","Header 5","Header 6"],
        ["<p>1</p>", { 
            value: '<p>1</p>', 
            style: { 
                color: 'red'
            },
            colSpan: 1,
            rowSpan: 1
        },"","","",""],
        ["<p>2</p>","","","","",""],
        ["<p>3</p>","","","","",""]
    ],
}