apple table

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>
 	);