From c1adc83676d1e27716d08fa8823dd7012a130ae7 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Mon, 29 Apr 2019 15:47:46 +1200
Subject: [PATCH] apple table

---
 .../extensions/add-report/js/index.js         | 40 ++++++++++++++++---
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/plugins/woocommerce-admin/docs/examples/extensions/add-report/js/index.js b/plugins/woocommerce-admin/docs/examples/extensions/add-report/js/index.js
index 35563b2302a..2ed442d3461 100644
--- a/plugins/woocommerce-admin/docs/examples/extensions/add-report/js/index.js
+++ b/plugins/woocommerce-admin/docs/examples/extensions/add-report/js/index.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+
 import { addFilter } from '@wordpress/hooks';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -8,16 +9,43 @@ import { __ } from '@wordpress/i18n';
 /**
  * WooCommerce dependencies
  */
-import { ReportFilters } from '@woocommerce/components';
+import { ReportFilters, TableCard } from '@woocommerce/components';
 
 const Report = ( { path, query } ) => {
 	return (
 		<Fragment>
-			<ReportFilters
-				query={ query }
-				path={ path }
-				filters={ [] }
-				advancedFilters={ {} }
+			<ReportFilters query={ query } path={ path } filters={ [] } advancedFilters={ {} } />
+			<TableCard
+				title="Apples"
+				headers={ [
+					{ label: 'Type', key: 'type' },
+					{ label: 'Color', key: 'color' },
+					{ label: 'Taste', key: 'taste' },
+				] }
+				rows={ [
+					[
+						{ display: 'Granny Smith', value: 'type' },
+						{ display: 'Green', value: 'color' },
+						{ display: 'Tangy and sweet', value: 'taste' },
+					],
+					[
+						{ display: 'Golden Delicious', value: 'type' },
+						{ display: 'Gold', value: 'color' },
+						{ display: 'Sweet and cheery', value: 'taste' },
+					],
+					[
+						{ display: 'Gala', value: 'type' },
+						{ display: 'Red', value: 'color' },
+						{ display: 'Mild, sweet and crisp', value: 'taste' },
+					],
+					[
+						{ display: 'Braeburn', value: 'type' },
+						{ display: 'Red', value: 'color' },
+						{ display: 'Firm, crisp and pleasing', value: 'taste' },
+					],
+				] }
+				rowsPerPage={ 100 }
+				totalRows={ 1 }
 			/>
 		</Fragment>
 	);