docs(Table): add perf example, make visible existing (microsoft#13373)

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

* reduce iterations

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;

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;

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;

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;

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