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 = () =>
;
+
+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 = () => (
+
+
+
+
+);
+
+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 = () => ;
+const TableExampleStaticShorthand = () => ;
-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 = () => (
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
);
-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 = () => (
<>
+
>
);