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

``js
/*----------------------------------------------------------------------------------
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);

``