improvement(data-table): add cell formatters & custom tabular array option

packages/core/src/components/essentials/modal.ts

@@ -61,6 +61,9 @@ export class Modal extends Component {
 
 		const tableArray = this.model.getTabularDataArray();
 
+		const headingsCells = get(tableArray, 0) || []
+		const dataRows = tableArray.slice(1) || []
+
 		return `
 		<div class="bx--modal-container">
 			<div class="bx--modal-header">
@@ -77,7 +80,7 @@ export class Modal extends Component {
 			<div class="bx--modal-content"><table class="bx--data-table bx--data-table--no-border">
 					<thead>
 						<tr>
-							${get(tableArray, 0)
+							${headingsCells
 								.map(
 									(heading) => `<th scope="col">
 								<div class="bx--table-header-label">${heading}</div>
@@ -86,9 +89,8 @@ export class Modal extends Component {
 								.join('')}
 						</tr>
 					</thead>
-					<tbody>${tableArray
-						.slice(1)
-						.map(
+					<tbody>${
+						dataRows.map(
 							(row) => `
 							<tr>
 								${row.map((column) => `<td>${column}</td>`).join('')}

packages/core/src/model/alluvial.ts

@@ -9,7 +9,7 @@ export class AlluvialChartModel extends ChartModelCartesian {
 		super(services);
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const displayData = this.getDisplayData();
 
 		// Sort array by source to get a close depiction of the alluvial chart

packages/core/src/model/binned-charts.ts

@@ -7,7 +7,7 @@ import { get } from 'lodash-es';
  * this is intended for binned type of charts
  * */
 export class ChartModelBinned extends ChartModelCartesian {
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const options = this.getOptions();
 		const { groupMapsTo } = options.data;
 

packages/core/src/model/boxplot.ts

@@ -89,7 +89,7 @@ export class BoxplotChartModel extends ChartModelCartesian {
 		return boxplotData;
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const options = this.getOptions();
 		const { groupMapsTo } = options.data;
 

packages/core/src/model/bullet.ts

@@ -29,7 +29,7 @@ export class BulletChartModel extends ChartModelCartesian {
 		return 0;
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const displayData = this.getDisplayData();
 		const options = this.getOptions();
 		const { groupMapsTo } = options.data;

packages/core/src/model/cartesian-charts.ts

@@ -56,7 +56,7 @@ export class ChartModelCartesian extends ChartModel {
 		return scales;
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const displayData = this.getDisplayData();
 		const options = this.getOptions();
 		const { groupMapsTo } = options.data;

packages/core/src/model/circle-pack.ts

@@ -140,7 +140,7 @@ export class CirclePackChartModel extends ChartModel {
 		}
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const displayData = this.getDisplayData();
 
 		const result = [['Child', 'Parent', 'Value']];

packages/core/src/model/gauge.ts

@@ -13,7 +13,7 @@ export class GaugeChartModel extends ChartModel {
 		return super.getDataGroups().filter((item) => item.name !== 'delta');
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const displayData = this.getDisplayData();
 		const options = this.getOptions();
 		const { groupMapsTo } = options.data;

packages/core/src/model/heatmap.ts

@@ -252,7 +252,7 @@ export class HeatmapModel extends ChartModelCartesian {
 	 * Generate tabular data from display data
 	 * @returns Array<Object>
 	 */
-	getTabularDataArray() {
+	 createTabularDataArray() {
 		const displayData = this.getDisplayData();
 
 		const {

packages/core/src/model/meter.ts

@@ -79,7 +79,7 @@ export class MeterChartModel extends ChartModel {
 		return null;
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const displayData = this.getDisplayData();
 		const options = this.getOptions();
 		const { groupMapsTo } = options.data;

packages/core/src/model/model.ts

@@ -10,6 +10,8 @@ import { scaleOrdinal } from 'd3-scale';
 import { stack, stackOffsetDiverging } from 'd3-shape';
 import { histogram } from 'd3-array';
 
+import { get } from "lodash-es";
+
 /** The charting model layer which includes mainly the chart data and options,
  * as well as some misc. information to be shared among components */
 export class ChartModel {
@@ -718,8 +720,34 @@ export class ChartModel {
 		return tabularData;
 	}
 
+	createTabularDataArray() {
+		return [[], []];
+	}
+
 	getTabularDataArray() {
-		return [];
+		const options = this.getOptions();
+
+		const userProvidedTabularDataArray = Tools.getProperty(options, 'dataTable', 'tabularArray');
+		if (Array.isArray(userProvidedTabularDataArray)) {
+			return userProvidedTabularDataArray;
+		} else {
+			const tabularDataArray = this.createTabularDataArray();
+
+			const headingsCellsFormatter = Tools.getProperty(options, 'dataTable', 'headingCellsFormatter');
+			const dataCellsFormatter = Tools.getProperty(options, 'dataTable', 'dataCellsFormatter');
+
+			let headingsCells = get(tabularDataArray, 0) || []
+			if (typeof headingsCellsFormatter === "function" && headingsCells.length !== 0) {
+				headingsCells = headingsCells.map(cell => headingsCellsFormatter(cell))
+			}
+
+			let dataRows = tabularDataArray.slice(1) || []
+			if (typeof dataCellsFormatter === "function" && dataRows.length !== 0) {
+				dataRows = dataRows.map(row => row.map(cell => dataCellsFormatter(cell)))
+			}
+
+			return [headingsCells, ...dataRows];
+		}
 	}
 
 	exportToCSV() {

packages/core/src/model/pie.ts

@@ -25,7 +25,7 @@ export class PieChartModel extends ChartModel {
 		return tabularData;
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const displayData = this.getDisplayData();
 		const options = this.getOptions();
 		const { groupMapsTo } = options.data;

packages/core/src/model/radar.ts

@@ -9,7 +9,7 @@ export class RadarChartModel extends ChartModelCartesian {
 		super(services);
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const options = this.getOptions();
 
 		const groupedData = this.getGroupedData();

packages/core/src/model/tree.ts

@@ -9,7 +9,7 @@ export class TreeChartModel extends ChartModel {
 		super(services);
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const displayData = this.getDisplayData();
 
 		const result = [['Child', 'Parent']];

packages/core/src/model/treemap.ts

@@ -9,7 +9,7 @@ export class TreemapChartModel extends ChartModel {
 		super(services);
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const displayData = this.getDisplayData();
 
 		const result = [['Child', 'Group', 'Value']];

packages/core/src/model/wordcloud.ts

@@ -8,7 +8,7 @@ export class WordCloudModel extends ChartModel {
 		super(services);
 	}
 
-	getTabularDataArray() {
+	createTabularDataArray() {
 		const displayData = this.getDisplayData();
 
 		const options = this.getOptions();