From 9d8a73702ff419c51eff61a32e96c393cdd67721 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Tue, 12 Oct 2021 13:58:54 -0500
Subject: [PATCH] feat(docs): update worksheet page to use new layout (#626)

---
 .../docs/PropTables/WorksheetPropTable.tsx    |   59 +-
 .../docs/components/PropTable/PropTable.tsx   |    2 +-
 packages/docs/pages/worksheet.tsx             | 1045 ++++++++++-------
 3 files changed, 640 insertions(+), 466 deletions(-)

diff --git a/packages/docs/PropTables/WorksheetPropTable.tsx b/packages/docs/PropTables/WorksheetPropTable.tsx
index c064d9e97..c123aae8f 100644
--- a/packages/docs/PropTables/WorksheetPropTable.tsx
+++ b/packages/docs/PropTables/WorksheetPropTable.tsx
@@ -5,11 +5,36 @@ import { Code, NextLink, Prop, PropTable, PropTableWrapper } from '../components
 const worksheetProps: Prop[] = [
   {
     name: 'columns',
-    types: ['TextColumn', 'NumberColumn', 'CheckboxColumn', 'SelectableColumn', 'ModalColumn'],
+    types: [
+      <NextLink key="text" href={{ hash: 'worksheet-text-column-prop-table', query: { props: 'text-column' } }}>
+        TextColumn
+      </NextLink>,
+      <NextLink key="number" href={{ hash: 'worksheet-number-column-prop-table', query: { props: 'number-column' } }}>
+        NumberColumn
+      </NextLink>,
+      <NextLink
+        key="checkbox"
+        href={{ hash: 'worksheet-checkbox-column-prop-table', query: { props: 'checkbox-column' } }}
+      >
+        CheckboxColumn
+      </NextLink>,
+      <NextLink
+        key="selectable"
+        href={{ hash: 'worksheet-selectable-column-prop-table', query: { props: 'selectable-column' } }}
+      >
+        SelectableColumn
+      </NextLink>,
+      <NextLink key="modal" href={{ hash: 'worksheet-modal-column-prop-table', query: { props: 'modal-column' } }}>
+        ModalColumn
+      </NextLink>,
+    ],
     description: (
       <>
-        Columns will be of type <NextLink href="#worksheet-text-column-prop-table">TextColumn</NextLink> by default. See{' '}
-        <NextLink href="#worksheet-text-column-prop-table">below</NextLink> for usage.
+        Columns will be of type{' '}
+        <NextLink href={{ hash: 'worksheet-text-column-prop-table', query: { props: 'text-column' } }}>
+          TextColumn
+        </NextLink>{' '}
+        by default.
       </>
     ),
     required: true,
@@ -36,7 +61,9 @@ const worksheetProps: Prop[] = [
     types: '(items: WorksheetError[]) => void',
     description: (
       <>
-        Returns an array of <NextLink href="#worksheet-error-prop-table">Error</NextLink> when an error is present.
+        Returns an array of{' '}
+        <NextLink href={{ hash: 'worksheet-error-prop-table', query: { props: 'error' } }}>Error</NextLink> when an
+        error is present.
       </>
     ),
   },
@@ -175,10 +202,18 @@ const worksheetSelectableColumnProps: Prop[] = [
   },
   {
     name: 'config',
-    types: <NextLink href="#worksheet-selectable-config-prop-table">SelectableConfig</NextLink>,
+    types: (
+      <NextLink href={{ hash: 'worksheet-selectable-config-prop-table', query: { props: 'selectable-config' } }}>
+        SelectableConfig
+      </NextLink>
+    ),
     description: (
       <>
-        See <NextLink href="#worksheet-selectable-config-prop-table">below</NextLink> for usage.
+        See{' '}
+        <NextLink href={{ hash: 'worksheet-selectable-config-prop-table', query: { props: 'selectable-config' } }}>
+          SelectableConfig
+        </NextLink>{' '}
+        for usage.
       </>
     ),
   },
@@ -221,10 +256,18 @@ const worksheetModalColumnProps: Prop[] = [
   },
   {
     name: 'config',
-    types: <NextLink href="#worksheet-modal-config-prop-table">ModalConfig</NextLink>,
+    types: (
+      <NextLink href={{ hash: 'worksheet-modal-config-prop-table', query: { props: 'modal-config' } }}>
+        ModalConfig
+      </NextLink>
+    ),
     description: (
       <>
-        See <NextLink href="#worksheet-modal-config-prop-table">below</NextLink> for usage.
+        See{' '}
+        <NextLink href={{ hash: 'worksheet-modal-config-prop-table', query: { props: 'modal-config' } }}>
+          ModalConfig
+        </NextLink>{' '}
+        for usage.
       </>
     ),
   },
diff --git a/packages/docs/components/PropTable/PropTable.tsx b/packages/docs/components/PropTable/PropTable.tsx
index e9d749b46..a57ad83a1 100644
--- a/packages/docs/components/PropTable/PropTable.tsx
+++ b/packages/docs/components/PropTable/PropTable.tsx
@@ -125,7 +125,7 @@ const TypesData: React.FC<TypesDataProps> = (props): any => {
   if (Array.isArray(types)) {
     return types.map((type, index) => {
       return (
-        <React.Fragment key={type}>
+        <React.Fragment key={type.key ?? index}>
           {type.type === Link ? <Code highlight={false}>{type}</Code> : <Code>{type}</Code>}
           {index < types.length - 1 ? ' | ' : null}
         </React.Fragment>
diff --git a/packages/docs/pages/worksheet.tsx b/packages/docs/pages/worksheet.tsx
index 0bfbac804..2d7b1bc98 100644
--- a/packages/docs/pages/worksheet.tsx
+++ b/packages/docs/pages/worksheet.tsx
@@ -1,7 +1,7 @@
-import { H1, Panel, StatefulTree, Worksheet, WorksheetColumn } from '@bigcommerce/big-design';
+import { H1, Panel, StatefulTree, Text, Worksheet, WorksheetColumn } from '@bigcommerce/big-design';
 import React from 'react';
 
-import { CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
 import {
   WorksheetCheckboxColumnPropTable,
   WorksheetErrorPropTable,
@@ -81,480 +81,611 @@ const CategoryTree = (value, onChange) => {
 };
 
 const WorksheetPage = () => {
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <>
-          <Panel>
-            <CodePreview scope={{ CATEGORIES, CategoryTree, nodes }}>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const columns: WorksheetColumn<Product>[] = [
-                  { hash: 'productName', header: 'Product name', validation: (value) => !!value },
-                  { hash: 'isVisible', header: 'Visible', type: 'checkbox' },
-                  { hash: 'otherField', header: 'Other field' },
-                  {
-                    hash: 'otherField2',
-                    header: 'Other field',
-                    type: 'select',
-                    config: {
-                      options: [
-                        { value: 'option-1', content: 'Option 1' },
-                        { value: 'option-2', content: 'Option 2' },
-                        { value: 'option-3', content: 'Option 3' },
-                      ],
-                    },
-                    validation: (value) => !!value,
-                  },
-                  {
-                    hash: 'otherField3',
-                    header: 'Category',
-                    type: 'modal',
-                    config: {
-                      header: 'Choose categories',
-                      render: CategoryTree,
-                    },
-                    formatting: (value: number) => CATEGORIES[value],
-                  },
-                  {
-                    hash: 'numberField',
-                    header: 'Number field',
-                    type: 'number',
-                    formatting: (value: number) => `$${value}.00`,
-                    validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
-                  },
-                ];
+  return (
+    <>
+      <H1>Worksheet</H1>
 
-                const items: Product[] = [
-                  {
-                    id: 1,
-                    productName: 'Product 1',
-                    isVisible: true,
-                    otherField: 'Text',
-                    otherField2: 'option-1',
-                    otherField3: 2,
-                    numberField: 50,
-                  },
-                  {
-                    id: 2,
-                    productName: 'Product 2',
-                    isVisible: true,
-                    otherField: 'Text',
-                    otherField2: 'option-1',
-                    otherField3: 6,
-                    numberField: 50,
-                  },
-                  {
-                    id: 3,
-                    productName: 'Product 3',
-                    isVisible: false,
-                    otherField: 'Text',
-                    otherField2: 'option-2',
-                    otherField3: 8,
-                    numberField: 50,
-                  },
-                  {
-                    id: 4,
-                    productName: 'Variant 1',
-                    isVisible: true,
-                    otherField: 'Text',
-                    otherField2: 'option-2',
-                    otherField3: 9,
-                    numberField: 50,
-                  },
-                  {
-                    id: 5,
-                    productName: '',
-                    isVisible: true,
-                    otherField: 'Text',
-                    otherField2: '',
-                    otherField3: 4,
-                    numberField: 50,
-                  },
-                  {
-                    id: 6,
-                    productName: 'Variant 3',
-                    isVisible: true,
-                    otherField: 'Text',
-                    otherField2: '',
-                    otherField3: 3,
-                    numberField: 50,
-                  },
-                  {
-                    id: 7,
-                    productName: 'Variant 4',
-                    isVisible: false,
-                    otherField: 'Text',
-                    otherField2: 'option-2',
-                    otherField3: 4,
-                    numberField: 50,
-                  },
-                  {
-                    id: 8,
-                    productName: 'Product 4',
-                    isVisible: true,
-                    otherField: 'Text',
-                    otherField2: 'option-2',
-                    otherField3: 7,
-                    numberField: 50,
-                  },
-                  {
-                    id: 9,
-                    productName: 'Product 5',
-                    isVisible: true,
-                    otherField: 'Text',
-                    otherField2: 'option-2',
-                    otherField3: 3,
-                    numberField: 50,
-                  },
-                  {
-                    id: 10,
-                    productName: 'Product 6',
-                    isVisible: true,
-                    otherField: 'Text',
-                    otherField2: 'option-3',
-                    otherField3: 3,
-                    numberField: 50,
-                  },
-                ];
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          <Code primary>Worksheet</Code> displays information about a collection of objects and allow the merchant to
+          manage and edit object data.
+        </Text>
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>
+            To display and edit information across a large data set (e.x. products, customers, inventory, price lists).
+          </List.Item>
+          <List.Item>
+            To quickly scan and compare information in order to identify patterns, transform data, or augment with
+            additional details.
+          </List.Item>
+          <List.Item>
+            Unlike tables, a worksheet component is actionable and interactive and should be used in situations where
+            editing is the primary purpose.
+          </List.Item>
+        </List>
+      </Panel>
 
-                return (
-                  <Worksheet columns={columns} items={items} onChange={(items) => items} onErrors={(items) => items} />
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Text columns">
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const columns: WorksheetColumn<Partial<Product>>[] = [
-                  { hash: 'productName', header: 'Product name', validation: (value) => !!value },
-                  { hash: 'otherField', header: 'Other field' },
-                ];
+      <Panel header="Implementation" headerId="implementation">
+        <ContentRoutingTabs
+          id="implementation"
+          routes={[
+            {
+              id: 'basic',
+              title: 'Basic',
+              render: () => (
+                <CodePreview scope={{ CATEGORIES, CategoryTree, nodes }}>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const columns: WorksheetColumn<Product>[] = [
+                      { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+                      { hash: 'isVisible', header: 'Visible', type: 'checkbox' },
+                      { hash: 'otherField', header: 'Other field' },
+                      {
+                        hash: 'otherField2',
+                        header: 'Other field',
+                        type: 'select',
+                        config: {
+                          options: [
+                            { value: 'option-1', content: 'Option 1' },
+                            { value: 'option-2', content: 'Option 2' },
+                            { value: 'option-3', content: 'Option 3' },
+                          ],
+                        },
+                        validation: (value) => !!value,
+                      },
+                      {
+                        hash: 'otherField3',
+                        header: 'Category',
+                        type: 'modal',
+                        config: {
+                          header: 'Choose categories',
+                          render: CategoryTree,
+                        },
+                        formatting: (value: number) => CATEGORIES[value],
+                      },
+                      {
+                        hash: 'numberField',
+                        header: 'Number field',
+                        type: 'number',
+                        formatting: (value: number) => `$${value}.00`,
+                        validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
+                      },
+                    ];
 
-                const items: Partial<Product>[] = [
-                  {
-                    id: 1,
-                    productName: 'Product 1',
-                    otherField: 'Text',
-                  },
-                  {
-                    id: 2,
-                    productName: 'Product 2',
-                    otherField: 'Text',
-                  },
-                  {
-                    id: 3,
-                    productName: 'Product 3',
-                    otherField: 'Text',
-                  },
-                ];
+                    const items: Product[] = [
+                      {
+                        id: 1,
+                        productName: 'Product 1',
+                        isVisible: true,
+                        otherField: 'Text',
+                        otherField2: 'option-1',
+                        otherField3: 2,
+                        numberField: 50,
+                      },
+                      {
+                        id: 2,
+                        productName: 'Product 2',
+                        isVisible: true,
+                        otherField: 'Text',
+                        otherField2: 'option-1',
+                        otherField3: 6,
+                        numberField: 50,
+                      },
+                      {
+                        id: 3,
+                        productName: 'Product 3',
+                        isVisible: false,
+                        otherField: 'Text',
+                        otherField2: 'option-2',
+                        otherField3: 8,
+                        numberField: 50,
+                      },
+                      {
+                        id: 4,
+                        productName: 'Variant 1',
+                        isVisible: true,
+                        otherField: 'Text',
+                        otherField2: 'option-2',
+                        otherField3: 9,
+                        numberField: 50,
+                      },
+                      {
+                        id: 5,
+                        productName: '',
+                        isVisible: true,
+                        otherField: 'Text',
+                        otherField2: '',
+                        otherField3: 4,
+                        numberField: 50,
+                      },
+                      {
+                        id: 6,
+                        productName: 'Variant 3',
+                        isVisible: true,
+                        otherField: 'Text',
+                        otherField2: '',
+                        otherField3: 3,
+                        numberField: 50,
+                      },
+                      {
+                        id: 7,
+                        productName: 'Variant 4',
+                        isVisible: false,
+                        otherField: 'Text',
+                        otherField2: 'option-2',
+                        otherField3: 4,
+                        numberField: 50,
+                      },
+                      {
+                        id: 8,
+                        productName: 'Product 4',
+                        isVisible: true,
+                        otherField: 'Text',
+                        otherField2: 'option-2',
+                        otherField3: 7,
+                        numberField: 50,
+                      },
+                      {
+                        id: 9,
+                        productName: 'Product 5',
+                        isVisible: true,
+                        otherField: 'Text',
+                        otherField2: 'option-2',
+                        otherField3: 3,
+                        numberField: 50,
+                      },
+                      {
+                        id: 10,
+                        productName: 'Product 6',
+                        isVisible: true,
+                        otherField: 'Text',
+                        otherField2: 'option-3',
+                        otherField3: 3,
+                        numberField: 50,
+                      },
+                    ];
 
-                return (
-                  <Worksheet columns={columns} items={items} onChange={(items) => items} onErrors={(items) => items} />
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Number columns">
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const columns: WorksheetColumn<{ id: number; cost: number; stock: number }>[] = [
-                  {
-                    hash: 'cost',
-                    header: 'Cost',
-                    type: 'number',
-                    formatting: (value: number) => `$${value}.00`,
-                    validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
-                  },
-                  {
-                    hash: 'stock',
-                    header: 'Stock',
-                    type: 'number',
-                    validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
-                  },
-                ];
+                    return (
+                      <Worksheet
+                        columns={columns}
+                        items={items}
+                        onChange={(items) => items}
+                        onErrors={(items) => items}
+                      />
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+            {
+              id: 'text-columns',
+              title: 'Text columns',
+              render: () => (
+                <CodePreview>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const columns: WorksheetColumn<Partial<Product>>[] = [
+                      { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+                      { hash: 'otherField', header: 'Other field' },
+                    ];
 
-                const items: { id: number; cost: number; stock: number }[] = [
-                  {
-                    id: 1,
-                    cost: 100,
-                    stock: 3,
-                  },
-                  {
-                    id: 2,
-                    cost: 200,
-                    stock: 10,
-                  },
-                  {
-                    id: 3,
-                    cost: 300,
-                    stock: 5,
-                  },
-                ];
+                    const items: Partial<Product>[] = [
+                      {
+                        id: 1,
+                        productName: 'Product 1',
+                        otherField: 'Text',
+                      },
+                      {
+                        id: 2,
+                        productName: 'Product 2',
+                        otherField: 'Text',
+                      },
+                      {
+                        id: 3,
+                        productName: 'Product 3',
+                        otherField: 'Text',
+                      },
+                    ];
 
-                return (
-                  <Worksheet columns={columns} items={items} onChange={(items) => items} onErrors={(items) => items} />
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Checkbox columns">
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const columns: WorksheetColumn<Partial<Product>>[] = [
-                  { hash: 'productName', header: 'Product name', validation: (value) => !!value },
-                  { hash: 'isVisible', header: 'Visible', type: 'checkbox' },
-                ];
+                    return (
+                      <Worksheet
+                        columns={columns}
+                        items={items}
+                        onChange={(items) => items}
+                        onErrors={(items) => items}
+                      />
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+            {
+              id: 'number-columns',
+              title: 'Number columns',
+              render: () => (
+                <CodePreview scope={{ CATEGORIES, CategoryTree, nodes }}>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const columns: WorksheetColumn<{ id: number; cost: number; stock: number }>[] = [
+                      {
+                        hash: 'cost',
+                        header: 'Cost',
+                        type: 'number',
+                        formatting: (value: number) => `$${value}.00`,
+                        validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
+                      },
+                      {
+                        hash: 'stock',
+                        header: 'Stock',
+                        type: 'number',
+                        validation: (value: number) => typeof value === 'number' && !Number.isNaN(value),
+                      },
+                    ];
 
-                const items: Partial<Product>[] = [
-                  {
-                    id: 1,
-                    productName: 'Product 1',
-                    isVisible: true,
-                  },
-                  {
-                    id: 2,
-                    productName: 'Product 2',
-                    isVisible: false,
-                  },
-                  {
-                    id: 3,
-                    productName: 'Product 3',
-                    isVisible: false,
-                  },
-                ];
+                    const items: { id: number; cost: number; stock: number }[] = [
+                      {
+                        id: 1,
+                        cost: 100,
+                        stock: 3,
+                      },
+                      {
+                        id: 2,
+                        cost: 200,
+                        stock: 10,
+                      },
+                      {
+                        id: 3,
+                        cost: 300,
+                        stock: 5,
+                      },
+                    ];
 
-                return (
-                  <Worksheet columns={columns} items={items} onChange={(items) => items} onErrors={(items) => items} />
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Selectable columns">
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const columns: WorksheetColumn<Partial<Product>>[] = [
-                  { hash: 'productName', header: 'Product name', validation: (value) => !!value },
-                  {
-                    hash: 'otherField2',
-                    header: 'Other field',
-                    type: 'select',
-                    config: {
-                      options: [
-                        { value: 'option-1', content: 'Option 1' },
-                        { value: 'option-2', content: 'Option 2' },
-                        { value: 'option-3', content: 'Option 3' },
-                      ],
-                    },
-                    validation: (value) => !!value,
-                  },
-                ];
+                    return (
+                      <Worksheet
+                        columns={columns}
+                        items={items}
+                        onChange={(items) => items}
+                        onErrors={(items) => items}
+                      />
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+            {
+              id: 'checkbox-columns',
+              title: 'Checkbox columns',
+              render: () => (
+                <CodePreview>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const columns: WorksheetColumn<Partial<Product>>[] = [
+                      { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+                      { hash: 'isVisible', header: 'Visible', type: 'checkbox' },
+                    ];
 
-                const items: Partial<Product>[] = [
-                  {
-                    id: 1,
-                    productName: 'Product 1',
-                    otherField2: 'option-1',
-                  },
-                  {
-                    id: 2,
-                    productName: 'Product 2',
-                    otherField2: 'option-2',
-                  },
-                  {
-                    id: 3,
-                    productName: 'Product 3',
-                    otherField2: 'option-3',
-                  },
-                ];
+                    const items: Partial<Product>[] = [
+                      {
+                        id: 1,
+                        productName: 'Product 1',
+                        isVisible: true,
+                      },
+                      {
+                        id: 2,
+                        productName: 'Product 2',
+                        isVisible: false,
+                      },
+                      {
+                        id: 3,
+                        productName: 'Product 3',
+                        isVisible: false,
+                      },
+                    ];
 
-                return (
-                  <Worksheet columns={columns} items={items} onChange={(items) => items} onErrors={(items) => items} />
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Modal columns">
-            <CodePreview scope={{ CATEGORIES, CategoryTree, nodes }}>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const columns: WorksheetColumn<Partial<Product>>[] = [
-                  { hash: 'productName', header: 'Product name', validation: (value) => !!value },
-                  {
-                    hash: 'otherField3',
-                    header: 'Category',
-                    type: 'modal',
-                    config: {
-                      header: 'Choose categories',
-                      render: CategoryTree,
-                    },
-                    formatting: (value: number) => CATEGORIES[value],
-                  },
-                ];
+                    return (
+                      <Worksheet
+                        columns={columns}
+                        items={items}
+                        onChange={(items) => items}
+                        onErrors={(items) => items}
+                      />
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+            {
+              id: 'selectable-columns',
+              title: 'Selectable columns',
+              render: () => (
+                <CodePreview>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const columns: WorksheetColumn<Partial<Product>>[] = [
+                      { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+                      {
+                        hash: 'otherField2',
+                        header: 'Other field',
+                        type: 'select',
+                        config: {
+                          options: [
+                            { value: 'option-1', content: 'Option 1' },
+                            { value: 'option-2', content: 'Option 2' },
+                            { value: 'option-3', content: 'Option 3' },
+                          ],
+                        },
+                        validation: (value) => !!value,
+                      },
+                    ];
 
-                const items: Partial<Product>[] = [
-                  {
-                    id: 1,
-                    productName: 'Product 1',
-                    otherField3: 1,
-                  },
-                  {
-                    id: 2,
-                    productName: 'Product 2',
-                    otherField3: 2,
-                  },
-                  {
-                    id: 3,
-                    productName: 'Product 3',
-                    otherField3: 3,
-                  },
-                ];
+                    const items: Partial<Product>[] = [
+                      {
+                        id: 1,
+                        productName: 'Product 1',
+                        otherField2: 'option-1',
+                      },
+                      {
+                        id: 2,
+                        productName: 'Product 2',
+                        otherField2: 'option-2',
+                      },
+                      {
+                        id: 3,
+                        productName: 'Product 3',
+                        otherField2: 'option-3',
+                      },
+                    ];
 
-                return (
-                  <Worksheet columns={columns} items={items} onChange={(items) => items} onErrors={(items) => items} />
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Disabled columns">
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const columns: WorksheetColumn<Partial<Product>>[] = [
-                  { hash: 'productName', header: 'Product name', validation: (value) => !!value },
-                  { hash: 'otherField', header: 'Other field', disabled: true },
-                ];
+                    return (
+                      <Worksheet
+                        columns={columns}
+                        items={items}
+                        onChange={(items) => items}
+                        onErrors={(items) => items}
+                      />
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+            {
+              id: 'modal-columns',
+              title: 'Modal columns',
+              render: () => (
+                <CodePreview scope={{ CATEGORIES, CategoryTree, nodes }}>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const columns: WorksheetColumn<Partial<Product>>[] = [
+                      { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+                      {
+                        hash: 'otherField3',
+                        header: 'Category',
+                        type: 'modal',
+                        config: {
+                          header: 'Choose categories',
+                          render: CategoryTree,
+                        },
+                        formatting: (value: number) => CATEGORIES[value],
+                      },
+                    ];
 
-                const items: Partial<Product>[] = [
-                  {
-                    id: 1,
-                    productName: 'Product 1',
-                    otherField: 'Text',
-                  },
-                  {
-                    id: 2,
-                    productName: 'Product 2',
-                    otherField: 'Text',
-                  },
-                  {
-                    id: 3,
-                    productName: 'Product 3',
-                    otherField: 'Text',
-                  },
-                ];
+                    const items: Partial<Product>[] = [
+                      {
+                        id: 1,
+                        productName: 'Product 1',
+                        otherField3: 1,
+                      },
+                      {
+                        id: 2,
+                        productName: 'Product 2',
+                        otherField3: 2,
+                      },
+                      {
+                        id: 3,
+                        productName: 'Product 3',
+                        otherField3: 3,
+                      },
+                    ];
 
-                return (
-                  <Worksheet columns={columns} items={items} onChange={(items) => items} onErrors={(items) => items} />
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Expandable rows">
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const columns: WorksheetColumn<Partial<Product>>[] = [
-                  { hash: 'productName', header: 'Product name', validation: (value) => !!value },
-                  { hash: 'otherField', header: 'Other field' },
-                ];
+                    return (
+                      <Worksheet
+                        columns={columns}
+                        items={items}
+                        onChange={(items) => items}
+                        onErrors={(items) => items}
+                      />
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+            {
+              id: 'disabled-columns',
+              title: 'Disabled columns',
+              render: () => (
+                <CodePreview>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const columns: WorksheetColumn<Partial<Product>>[] = [
+                      { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+                      { hash: 'otherField', header: 'Other field', disabled: true },
+                    ];
 
-                const expandableRows = {
-                  2: [3],
-                  4: [5, 6],
-                };
+                    const items: Partial<Product>[] = [
+                      {
+                        id: 1,
+                        productName: 'Product 1',
+                        otherField: 'Text',
+                      },
+                      {
+                        id: 2,
+                        productName: 'Product 2',
+                        otherField: 'Text',
+                      },
+                      {
+                        id: 3,
+                        productName: 'Product 3',
+                        otherField: 'Text',
+                      },
+                    ];
 
-                const items: Partial<Product>[] = [
-                  {
-                    id: 1,
-                    productName: 'Product 1',
-                    otherField: 'Text',
-                  },
-                  {
-                    id: 2,
-                    productName: 'Product 2',
-                    otherField: 'Text',
-                  },
-                  {
-                    id: 3,
-                    productName: 'Product 3',
-                    otherField: 'Text',
-                  },
-                  {
-                    id: 4,
-                    productName: 'Product 4',
-                    otherField: 'Text',
-                  },
-                  {
-                    id: 5,
-                    productName: 'Product 5',
-                    otherField: 'Text',
-                  },
-                  {
-                    id: 6,
-                    productName: 'Product 6',
-                    otherField: 'Text',
-                  },
-                  {
-                    id: 7,
-                    productName: 'Product 7',
-                    otherField: 'Text',
-                  },
-                ];
+                    return (
+                      <Worksheet
+                        columns={columns}
+                        items={items}
+                        onChange={(items) => items}
+                        onErrors={(items) => items}
+                      />
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+            {
+              id: 'expandable-rows',
+              title: 'Expandable rows',
+              render: () => (
+                <CodePreview>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const columns: WorksheetColumn<Partial<Product>>[] = [
+                      { hash: 'productName', header: 'Product name', validation: (value) => !!value },
+                      { hash: 'otherField', header: 'Other field' },
+                    ];
 
-                return (
-                  <Worksheet
-                    columns={columns}
-                    expandableRows={expandableRows}
-                    items={items}
-                    onChange={(items) => items}
-                    onErrors={(items) => items}
-                  />
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-        </>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => (
-        <>
-          <WorksheetPropTable />
-          <WorksheetTextColumnPropTable id="worksheet-text-column-prop-table" />
-          <WorksheetNumberColumnPropTable id="worksheet-number-column-prop-table" />
-          <WorksheetCheckboxColumnPropTable id="worksheet-checkbox-column-prop-table" />
-          <WorksheetSelectableColumnPropTable id="worksheet-selectable-column-prop-table" />
-          <WorksheetModalColumnPropTable id="worksheet-modal-column-prop-table" />
-          <WorksheetSelectableConfigPropTable id="worksheet-selectable-config-prop-table" />
-          <WorksheetModalConfigPropTable id="worksheet-modal-config-prop-table" />
-          <WorksheetErrorPropTable id="worksheet-error-prop-table" />
-        </>
-      ),
-    },
-  ];
+                    const expandableRows = {
+                      2: [3],
+                      4: [5, 6],
+                    };
 
-  return (
-    <>
-      <H1>Worksheet</H1>
+                    const items: Partial<Product>[] = [
+                      {
+                        id: 1,
+                        productName: 'Product 1',
+                        otherField: 'Text',
+                      },
+                      {
+                        id: 2,
+                        productName: 'Product 2',
+                        otherField: 'Text',
+                      },
+                      {
+                        id: 3,
+                        productName: 'Product 3',
+                        otherField: 'Text',
+                      },
+                      {
+                        id: 4,
+                        productName: 'Product 4',
+                        otherField: 'Text',
+                      },
+                      {
+                        id: 5,
+                        productName: 'Product 5',
+                        otherField: 'Text',
+                      },
+                      {
+                        id: 6,
+                        productName: 'Product 6',
+                        otherField: 'Text',
+                      },
+                      {
+                        id: 7,
+                        productName: 'Product 7',
+                        otherField: 'Text',
+                      },
+                    ];
+
+                    return (
+                      <Worksheet
+                        columns={columns}
+                        expandableRows={expandableRows}
+                        items={items}
+                        onChange={(items) => items}
+                        onErrors={(items) => items}
+                      />
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+          ]}
+        />
+      </Panel>
 
-      <PageNavigation items={items} />
+      <Panel header="Props" headerId="props">
+        <ContentRoutingTabs
+          id="props"
+          routes={[
+            {
+              id: 'worksheet',
+              title: 'Worksheet',
+              render: () => <WorksheetPropTable renderPanel={false} />,
+            },
+            {
+              id: 'text-column',
+              title: 'TextColumn',
+              render: () => <WorksheetTextColumnPropTable id="worksheet-text-column-prop-table" renderPanel={false} />,
+            },
+            {
+              id: 'number-column',
+              title: 'NumberColumn',
+              render: () => (
+                <WorksheetNumberColumnPropTable id="worksheet-number-column-prop-table" renderPanel={false} />
+              ),
+            },
+            {
+              id: 'checkbox-column',
+              title: 'CheckboxColumn',
+              render: () => (
+                <WorksheetCheckboxColumnPropTable id="worksheet-checkbox-column-prop-table" renderPanel={false} />
+              ),
+            },
+            {
+              id: 'selectable-column',
+              title: 'SelectableColumn',
+              render: () => (
+                <WorksheetSelectableColumnPropTable id="worksheet-selectable-column-prop-table" renderPanel={false} />
+              ),
+            },
+            {
+              id: 'modal-column',
+              title: 'ModalColumn',
+              render: () => (
+                <WorksheetModalColumnPropTable id="worksheet-modal-column-prop-table" renderPanel={false} />
+              ),
+            },
+            {
+              id: 'selectable-config',
+              title: 'SelectableConfig',
+              render: () => (
+                <WorksheetSelectableConfigPropTable id="worksheet-selectable-config-prop-table" renderPanel={false} />
+              ),
+            },
+            {
+              id: 'modal-config',
+              title: 'ModalConfig',
+              render: () => (
+                <WorksheetModalConfigPropTable id="worksheet-modal-config-prop-table" renderPanel={false} />
+              ),
+            },
+            {
+              id: 'error',
+              title: 'Error',
+              render: () => <WorksheetErrorPropTable id="worksheet-error-prop-table" renderPanel={false} />,
+            },
+          ]}
+        />
+      </Panel>
     </>
   );
 };