TableWidget

Configuration Options

borderColor

Type: color
Default: "#DDD"

Color of the cell borders

borderWidth

Type: number
Default: 1
Units: px

Width of the cell borders

cellFormat

Type: function
Default: "function (container, text, row, column) {\n\t container.append('div').classed('p', true)\n\t .style('margin', 0)\n\t .text(function(d, i) {\n\t return text;\n\t });\n\t }"

undefined

chartName

Type: string
Default: "TableWidget"

Name of chart for Reporting.

columnWidth

Type: function
Default: "function (column) {\n\t return 120;\n\t }"

undefined

draggableColumns

Type: boolean
Default: true

undefined

fixedHeader

Type: select
Default: {"name":"Fixed","value":true}

Set the header to be fixed in the top position, or to scroll up when scrolling down the table

headerHeight

Type: number
Default: 20
Units: px

Height of the headers (this property does not take into consideration the font height)

headers

Type: array
Default: ["Header 1","Header 2","Header 3"]

undefined

height

Type: number
Default: 400
Units: px

Height of the widget

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

numberOfColumns

Type: number
Default: 3

Number of columns in the table

rowHeight

Type: number
Default: 20
Units: px

Height of the rows (this property does not take into consideration the font height)

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showBorders

Type: select
Default: {"name":"Show","value":true}

Show or hide the borders

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  ['Moe Rogerson',    '204000',  '16'],
  ['Lyle Simpson',    '177002',  '9' ],
  ['Tucker House',    '121000',  '23'],
  ['Lizette Styles',  '162000',  '13'],
  ['Tiffani Tuft',    '216001',  '15'],
  ['Sophy Brand',     '152000',  '19'],
  ['Brayden Sargent', '142300',  '14'],
  ['Rowan Darby',     '100000',  '18'],
];

//Initialze the widget
var chart = d3.select('#vis')
  .chart('ConfigurableTable')
  .c({
    // draggableColumns: false,
    // fixedHeader: {name: 'Fixed', value: true},
    // fixedHeader: {name: 'Not Fixed', value: false},
    configurable: function() {
      return true;
    },
    width: 467,
    height: 250,
    headers: ['Name', 'ID', 'Sales'],
    // columnWidth: function(column) {
    //   return 100;
    // },
    // headerHeight: 20,
    // rowHeight: 20,
    // cellFormat: function(container, text, row, column) {
    //   container.append('div').classed('p', true)
    //     .text(function() {
    //       if (Number(text) % 3 === 0) {
    //         return 'Fizz';
    //       }
    //       return text;
    //     })
    //     .style({
    //       margin: 0,
    //       color: function() {
    //         return Number(text) < 0 ? 'red': 'black';
    //       }
    //     });
    // }
  });

//Render the chart with data
chart.draw(data);