From e2ae7d50d4d934743d8e4a45610285471096fe6c Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 28 May 2020 13:39:27 +0200
Subject: [PATCH] docs(Table): add perf example, make visible existing (#13373)

* docs(Table): add perf example, make visible existing

* reduce iterations
---
 .../Table/Performance/TableManyItems.perf.tsx | 18 ++++++++
 .../components/Table/Performance/index.tsx    | 13 ++++++
 .../Usage/TableExampleStatic.shorthand.tsx    |  6 +--
 .../Table/Usage/TableExampleStatic.tsx        | 42 +++++++++----------
 .../src/examples/components/Table/index.tsx   |  2 +
 5 files changed, 57 insertions(+), 24 deletions(-)
 create mode 100644 packages/fluentui/docs/src/examples/components/Table/Performance/TableManyItems.perf.tsx
 create mode 100644 packages/fluentui/docs/src/examples/components/Table/Performance/index.tsx

diff --git a/packages/fluentui/docs/src/examples/components/Table/Performance/TableManyItems.perf.tsx b/packages/fluentui/docs/src/examples/components/Table/Performance/TableManyItems.perf.tsx
new file mode 100644
index 0000000000000..cb2ea12dba91a
--- /dev/null
+++ b/packages/fluentui/docs/src/examples/components/Table/Performance/TableManyItems.perf.tsx
@@ -0,0 +1,18 @@
+import { Table } from '@fluentui/react-northstar';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+const header = {
+  items: ['A', 'B', 'C', 'D'],
+};
+const rows = _.times(100, i => ({
+  key: i,
+  items: ['1', '2', '3', '4'],
+}));
+
+const TableManyItemsPerf = () => <Table header={header} rows={rows} />;
+
+TableManyItemsPerf.iterations = 20;
+TableManyItemsPerf.filename = 'TTableManyItems.perf.tsx';
+
+export default TableManyItemsPerf;
diff --git a/packages/fluentui/docs/src/examples/components/Table/Performance/index.tsx b/packages/fluentui/docs/src/examples/components/Table/Performance/index.tsx
new file mode 100644
index 0000000000000..40f76f636fc42
--- /dev/null
+++ b/packages/fluentui/docs/src/examples/components/Table/Performance/index.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import ComponentPerfExample from '../../../../components/ComponentDoc/ComponentPerfExample';
+import ExampleSection from '../../../../components/ComponentDoc/ExampleSection';
+
+const Performance = () => (
+  <ExampleSection title="Performance">
+    <ComponentPerfExample title="Minimal" examplePath="components/Table/Performance/TableMinimal.perf" />
+    <ComponentPerfExample title="With many items" examplePath="components/Table/Performance/TableManyItems.perf" />
+  </ExampleSection>
+);
+
+export default Performance;
diff --git a/packages/fluentui/docs/src/examples/components/Table/Usage/TableExampleStatic.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Table/Usage/TableExampleStatic.shorthand.tsx
index f095db0fa1375..1fcd2eb7b740e 100644
--- a/packages/fluentui/docs/src/examples/components/Table/Usage/TableExampleStatic.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Table/Usage/TableExampleStatic.shorthand.tsx
@@ -4,7 +4,7 @@ import { Table } from '@fluentui/react-northstar';
 const header = {
   items: ['id', 'Name', 'Picture', 'Age'],
 };
-const rowsPlain = [
+const rows = [
   {
     key: 1,
     items: ['1', 'Roman van von der Longername', 'None', '30 years'],
@@ -19,6 +19,6 @@ const rowsPlain = [
   },
 ];
 
-const StaticTable = () => <Table header={header} rows={rowsPlain} aria-label="Static table" />;
+const TableExampleStaticShorthand = () => <Table header={header} rows={rows} aria-label="Static table" />;
 
-export default StaticTable;
+export default TableExampleStaticShorthand;
diff --git a/packages/fluentui/docs/src/examples/components/Table/Usage/TableExampleStatic.tsx b/packages/fluentui/docs/src/examples/components/Table/Usage/TableExampleStatic.tsx
index efe1dbe739a2f..c7e37321f6641 100644
--- a/packages/fluentui/docs/src/examples/components/Table/Usage/TableExampleStatic.tsx
+++ b/packages/fluentui/docs/src/examples/components/Table/Usage/TableExampleStatic.tsx
@@ -1,32 +1,32 @@
 import * as React from 'react';
 import { Table, tableHeaderCellBehavior } from '@fluentui/react-northstar';
 
-const StaticTable = () => (
+const TableExampleStatic = () => (
   <Table aria-label="table">
     <Table.Row header>
-      <Table.Cell content="id" key="id" accessibility={tableHeaderCellBehavior} />
-      <Table.Cell content="Name" key="name" accessibility={tableHeaderCellBehavior} />
-      <Table.Cell content="Picture" key="pic" accessibility={tableHeaderCellBehavior} />
-      <Table.Cell content="Age" key="age" accessibility={tableHeaderCellBehavior} />
+      <Table.Cell content="id" accessibility={tableHeaderCellBehavior} />
+      <Table.Cell content="Name" accessibility={tableHeaderCellBehavior} />
+      <Table.Cell content="Picture" accessibility={tableHeaderCellBehavior} />
+      <Table.Cell content="Age" accessibility={tableHeaderCellBehavior} />
     </Table.Row>
-    <Table.Row key="1">
-      <Table.Cell content="1" key="1-1" />
-      <Table.Cell content="Roman van von der Longername" key="1-2" />
-      <Table.Cell content="None" key="1-3" />
-      <Table.Cell content="30 years" key="1-4" />
+    <Table.Row>
+      <Table.Cell content="1" />
+      <Table.Cell content="Roman van von der Longername" />
+      <Table.Cell content="None" />
+      <Table.Cell content="30 years" />
     </Table.Row>
-    <Table.Row key="2">
-      <Table.Cell content="2" key="1-1" />
-      <Table.Cell content="Alex" key="1-2" />
-      <Table.Cell content="None" key="1-3" />
-      <Table.Cell content="1 year" key="1-4" />
+    <Table.Row>
+      <Table.Cell content="2" />
+      <Table.Cell content="Alex" />
+      <Table.Cell content="None" />
+      <Table.Cell content="1 year" />
     </Table.Row>
-    <Table.Row key="3">
-      <Table.Cell content="3" key="1-1" />
-      <Table.Cell content="Ali" key="1-2" />
-      <Table.Cell content="None" key="1-3" />
-      <Table.Cell content="30000000000000 years" key="1-4" />
+    <Table.Row>
+      <Table.Cell content="3" />
+      <Table.Cell content="Ali" />
+      <Table.Cell content="None" />
+      <Table.Cell content="30000000000000 years" />
     </Table.Row>
   </Table>
 );
-export default StaticTable;
+export default TableExampleStatic;
diff --git a/packages/fluentui/docs/src/examples/components/Table/index.tsx b/packages/fluentui/docs/src/examples/components/Table/index.tsx
index bbad8488e35df..651d0e6320670 100644
--- a/packages/fluentui/docs/src/examples/components/Table/index.tsx
+++ b/packages/fluentui/docs/src/examples/components/Table/index.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 
+import Performance from './Performance';
 import Usage from './Usage';
 
 const TableExamples = () => (
   <>
     <Usage />
+    <Performance />
   </>
 );