Merge pull request woocommerce/woocommerce-admin#2440 from woocommerce/extend/report-tables

Report Tables: Add example extension

plugins/woocommerce-admin/client/analytics/components/report-table/index.js

@@ -106,13 +106,27 @@ class ReportTable extends Component {
 		const totals = get( primaryData, [ 'data', 'totals' ], {} );
 		const totalResults = items.totalResults;
 		const downloadable = 0 < totalResults;
+
+		/**
+		 * Filter report table.
+		 *
+		 * Enables manipulation of data used to create a report table.
+		 *
+		 * @param {object} reportTableData - data used to create the table.
+		 * @param {string} reportTableData.endpoint - table api endpoint.
+		 * @param {array} reportTableData.headers - table headers data.
+		 * @param {array} reportTableData.rows - table rows data.
+		 * @param {object} reportTableData.totals - total aggregates for request.
+		 * @param {array} reportTableData.summary - summary numbers data.
+		 * @param {array} reportTableData.items - response from api requerst.
+		 */
 		const { headers, ids, rows, summary } = applyFilters( TABLE_FILTER, {
-			endpoint: endpoint,
+			endpoint,
 			headers: getHeadersContent(),
-			ids: itemIdField ? items.data.map( item => item[ itemIdField ] ) : [],
 			rows: getRowsContent( items.data ),
-			totals: totals,
+			totals,
 			summary: getSummary ? getSummary( totals, totalResults ) : null,
+			items,
 		} );
 
 		// Hide any headers based on user prefs, if loaded.

plugins/woocommerce-admin/docs/examples/extensions/table-column/js/index.js

@@ -0,0 +1,47 @@
+/** @format */
+/**
+ * External dependencies
+ */
+
+import { addFilter } from '@wordpress/hooks';
+import { Rating } from '@woocommerce/components';
+
+addFilter( 'woocommerce_admin_report_table', 'plugin-domain', reportTableData => {
+	if ( 'products' !== reportTableData.endpoint || ! reportTableData.items.data.length ) {
+		return reportTableData;
+	}
+
+	const newHeaders = [
+		...reportTableData.headers,
+		{
+			label: 'ID',
+			key: 'product_id',
+		},
+		{
+			label: 'Rating',
+			key: 'product_rating',
+		},
+	];
+	const newRows = reportTableData.rows.map( ( row, index ) => {
+		const product = reportTableData.items.data[ index ];
+		const newRow = [
+			...row,
+			// product_id is already returned in the response for productData.
+			{
+				display: product.product_id,
+				value: product.product_id,
+			},
+			// average_rating can be found on extended_info on productData.
+			{
+				display: <Rating rating={ Number( product.extended_info.average_rating ) } totalStars={ 5 } />,
+				value: product.extended_info.average_rating,
+			},
+		];
+		return newRow;
+	} );
+
+	reportTableData.headers = newHeaders;
+	reportTableData.rows = newRows;
+
+	return reportTableData;
+} );

plugins/woocommerce-admin/docs/examples/extensions/table-column/woocommerce-admin-table-column.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * Plugin Name: WooCommerce Admin Table Column Example
+ *
+ * @package WC_Admin
+ */
+
+/**
+ * Register the JS.
+ */
+function table_column_register_script() {
+
+	if ( ! class_exists( 'WC_Admin_Loader' ) || ! WC_Admin_Loader::is_admin_page() ) {
+		return;
+	}
+
+	wp_register_script(
+		'table_column',
+		plugins_url( '/dist/index.js', __FILE__ ),
+		array(
+			'wp-hooks',
+			'wp-element',
+			'wp-i18n',
+			'wc-components',
+		),
+		filemtime( dirname( __FILE__ ) . '/dist/index.js' ),
+		true
+	);
+
+	wp_enqueue_script( 'table_column' );
+}
+add_action( 'admin_enqueue_scripts', 'table_column_register_script' );
+
+/**
+ * Extended attributes can be used to obtain any attribute from a WC_Product instance that is
+ * available by a `get_*` class method. In other words, we can add `average_rating` because
+ * `get_average_rating` is an available method on a WC_Product instance.
+ *
+ * @param array $extended_attributes - Extra information from WC_Product instance.
+ * @return array - Extended attributes.
+ */
+function add_product_extended_attributes( $extended_attributes ) {
+	$extended_attributes[] = 'average_rating';
+	return $extended_attributes;
+}
+add_filter( 'woocommerce_rest_reports_products_extended_attributes', 'add_product_extended_attributes' );
+
+
+
+

plugins/woocommerce-admin/packages/components/src/rating/style.scss

@@ -5,6 +5,7 @@
 	vertical-align: middle;
 	display: inline-block;
 	overflow: hidden;
+	white-space: nowrap;
 
 	.gridicon {
 		fill: $core-grey-light-600;