From f1256e8331ba62c38903eb3c94a82bbaa7114e6b Mon Sep 17 00:00:00 2001
From: Thiyagaraj T <93907676+thiyagaraj-eightfold@users.noreply.github.com>
Date: Fri, 22 Jul 2022 00:41:16 +0530
Subject: [PATCH] chore: optimise snapshot for storyshots (#250)

---
 src/__snapshots__/storybook.test.js.snap      |     3 -
 .../__snapshots__/Accordion.stories.storyshot |   593 +
 .../__snapshots__/Avatar.stories.storyshot    |   165 +
 .../__snapshots__/Badge.stories.storyshot     |    28 +
 .../TwoStateButton.stories.storyshot          |    93 +
 .../__snapshots__/Button.stories.storyshot    |   485 +
 .../__snapshots__/CheckBox.stories.storyshot  |   127 +
 .../ConfigProvider.stories.storyshot          |  2994 +
 .../DatePicker.stories.storyshot              |  3000 +
 .../__snapshots__/Dialog.stories.storyshot    |    33 +
 .../__snapshots__/Dropdown.stories.storyshot  |   105 +
 .../__snapshots__/Empty.stories.storyshot     |   500 +
 .../Icon/__snapshots__/Icon.stories.storyshot |   120 +
 .../__snapshots__/InfoBar.stories.storyshot   |   357 +
 .../__snapshots__/SearchBox.stories.storyshot |   149 +
 .../__snapshots__/TextArea.stories.storyshot  |   110 +
 .../__snapshots__/TextInput.stories.storyshot |   146 +
 .../__snapshots__/Label.stories.storyshot     |    60 +
 .../Link/__snapshots__/Link.stories.storyshot |    88 +
 .../List/__snapshots__/List.stories.storyshot |   241 +
 .../MatchScore.stories.storyshot              |    54 +
 .../Menu/__snapshots__/Menu.stories.storyshot |    26 +
 .../__snapshots__/Modal.stories.storyshot     |   113 +
 .../__snapshots__/Navbar.stories.storyshot    |   113 +
 .../Pagination.stories.storyshot              |  1247 +
 .../__snapshots__/Panel.stories.storyshot     |   113 +
 .../PersistentBar.stories.storyshot           |   623 +
 .../__snapshots__/Pills.stories.storyshot     |  1289 +
 .../__snapshots__/Portal.stories.storyshot    |     3 +
 .../RadioButton.stories.storyshot             |   126 +
 .../__snapshots__/Select.stories.storyshot    |   674 +
 .../__snapshots__/Slider.stories.storyshot    |   169 +
 .../__snapshots__/Snackbar.stories.storyshot  |    49 +
 .../__snapshots__/Spinner.stories.storyshot   |    46 +
 .../__snapshots__/Stack.stories.storyshot     |   345 +
 .../__snapshots__/Table.stories.storyshot     | 49692 ++++++++++++++++
 .../Tabs/__snapshots__/Tabs.stories.storyshot |  1193 +
 .../__snapshots__/Tooltip.stories.storyshot   |    26 +
 src/storybook.test.js                         |     8 +-
 39 files changed, 65301 insertions(+), 5 deletions(-)
 delete mode 100644 src/__snapshots__/storybook.test.js.snap
 create mode 100644 src/src/components/Accordion/__snapshots__/Accordion.stories.storyshot
 create mode 100644 src/src/components/Avatar/__snapshots__/Avatar.stories.storyshot
 create mode 100644 src/src/components/Badge/__snapshots__/Badge.stories.storyshot
 create mode 100644 src/src/components/Button/TwoStateButton/__snapshots__/TwoStateButton.stories.storyshot
 create mode 100644 src/src/components/Button/__snapshots__/Button.stories.storyshot
 create mode 100644 src/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
 create mode 100644 src/src/components/ConfigProvider/__snapshots__/ConfigProvider.stories.storyshot
 create mode 100644 src/src/components/DateTimePicker/DatePicker/__snapshots__/DatePicker.stories.storyshot
 create mode 100644 src/src/components/Dialog/__snapshots__/Dialog.stories.storyshot
 create mode 100644 src/src/components/Dropdown/__snapshots__/Dropdown.stories.storyshot
 create mode 100644 src/src/components/Empty/__snapshots__/Empty.stories.storyshot
 create mode 100644 src/src/components/Icon/__snapshots__/Icon.stories.storyshot
 create mode 100644 src/src/components/InfoBar/__snapshots__/InfoBar.stories.storyshot
 create mode 100644 src/src/components/Inputs/SearchBox/__snapshots__/SearchBox.stories.storyshot
 create mode 100644 src/src/components/Inputs/TextArea/__snapshots__/TextArea.stories.storyshot
 create mode 100644 src/src/components/Inputs/TextInput/__snapshots__/TextInput.stories.storyshot
 create mode 100644 src/src/components/Label/__snapshots__/Label.stories.storyshot
 create mode 100644 src/src/components/Link/__snapshots__/Link.stories.storyshot
 create mode 100644 src/src/components/List/__snapshots__/List.stories.storyshot
 create mode 100644 src/src/components/MatchScore/__snapshots__/MatchScore.stories.storyshot
 create mode 100644 src/src/components/Menu/__snapshots__/Menu.stories.storyshot
 create mode 100644 src/src/components/Modal/__snapshots__/Modal.stories.storyshot
 create mode 100644 src/src/components/Navbar/__snapshots__/Navbar.stories.storyshot
 create mode 100644 src/src/components/Pagination/__snapshots__/Pagination.stories.storyshot
 create mode 100644 src/src/components/Panel/__snapshots__/Panel.stories.storyshot
 create mode 100644 src/src/components/PersistentBar/__snapshots__/PersistentBar.stories.storyshot
 create mode 100644 src/src/components/Pills/__snapshots__/Pills.stories.storyshot
 create mode 100644 src/src/components/Portal/__snapshots__/Portal.stories.storyshot
 create mode 100644 src/src/components/RadioButton/__snapshots__/RadioButton.stories.storyshot
 create mode 100644 src/src/components/Select/__snapshots__/Select.stories.storyshot
 create mode 100644 src/src/components/Slider/__snapshots__/Slider.stories.storyshot
 create mode 100644 src/src/components/Snackbar/__snapshots__/Snackbar.stories.storyshot
 create mode 100644 src/src/components/Spinner/__snapshots__/Spinner.stories.storyshot
 create mode 100644 src/src/components/Stack/__snapshots__/Stack.stories.storyshot
 create mode 100644 src/src/components/Table/__snapshots__/Table.stories.storyshot
 create mode 100644 src/src/components/Tabs/__snapshots__/Tabs.stories.storyshot
 create mode 100644 src/src/components/Tooltip/__snapshots__/Tooltip.stories.storyshot

diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
deleted file mode 100644
index 5d7f5e2a2..000000000
--- a/src/__snapshots__/storybook.test.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d662117bb256b687f2c795efbf0f3a198b853ebdbecf4f0b55ded275bd90698d
-size 1902477
diff --git a/src/src/components/Accordion/__snapshots__/Accordion.stories.storyshot b/src/src/components/Accordion/__snapshots__/Accordion.stories.storyshot
new file mode 100644
index 000000000..97d6f8814
--- /dev/null
+++ b/src/src/components/Accordion/__snapshots__/Accordion.stories.storyshot
@@ -0,0 +1,593 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Accordion List Horizontal 1`] = `
+<div
+  className="my-list-class"
+  style={Object {}}
+>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h2>
+      Header
+    </h2>
+  </div>
+  <ul
+    className="list-container"
+  >
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px",
+        }
+      }
+    >
+      <div
+        className="accordion-container"
+      >
+        <div
+          aria-controls="1-content"
+          aria-expanded={false}
+          className="accordion-summary"
+          id="1-header"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="button"
+          tabIndex={0}
+        >
+          <div
+            style={
+              Object {
+                "alignItems": "center",
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+                  style={
+                    Object {
+                      "fill": "green",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <div
+              style={
+                Object {
+                  "margin": "0 12px 0 5px",
+                }
+              }
+            >
+              Notification testing
+            </div>
+            <span
+              className="badge header6 active"
+            >
+              2
+            </span>
+          </div>
+          <span
+            aria-hidden={false}
+            className="accordion-icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+        <div
+          aria-labelledby="1-header"
+          className="accordion-body-container"
+          id="1-content"
+          role="region"
+        >
+          <div
+            className="accordion-body show-border-top"
+          >
+            Body 2 text used here. Bottom bars are sticky sections that
+        can be used to highlight a few actions that are out of the
+        view to be displayed inside the view. For example, if
+        there's a very long form with Save and Cancel buttons at the
+        bottom, we can use the bottom bar to show those two buttons
+        in the view. We are making these bars to be flexible in
+        height and also allowing any component to be
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px",
+        }
+      }
+    >
+      <div
+        className="accordion-container"
+      >
+        <div
+          aria-controls="2-content"
+          aria-expanded={false}
+          className="accordion-summary"
+          id="2-header"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="button"
+          tabIndex={0}
+        >
+          <div
+            style={
+              Object {
+                "alignItems": "center",
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+                  style={
+                    Object {
+                      "fill": "green",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <div
+              style={
+                Object {
+                  "margin": "0 12px 0 5px",
+                }
+              }
+            >
+              Notification testing
+            </div>
+            <span
+              className="badge header6 active"
+            >
+              12
+            </span>
+          </div>
+          <span
+            aria-hidden={false}
+            className="accordion-icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+        <div
+          aria-labelledby="2-header"
+          className="accordion-body-container"
+          id="2-content"
+          role="region"
+        >
+          <div
+            className="accordion-body show-border-top"
+          >
+            Body 2 text used here. Bottom bars are sticky sections that
+        can be used to highlight a few actions that are out of the
+        view to be displayed inside the view. For example, if
+        there's a very long form with Save and Cancel buttons at the
+        bottom, we can use the bottom bar to show those two buttons
+        in the view. We are making these bars to be flexible in
+        height and also allowing any component to be
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h3>
+      Footer
+    </h3>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Accordion List Vertical 1`] = `
+<div
+  className="my-list-class"
+  style={Object {}}
+>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h2>
+      Header
+    </h2>
+  </div>
+  <ul
+    className="list-container vertical"
+  >
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div
+        className="accordion-container"
+      >
+        <div
+          aria-controls="1-content"
+          aria-expanded={false}
+          className="accordion-summary"
+          id="1-header"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="button"
+          tabIndex={0}
+        >
+          <div
+            style={
+              Object {
+                "alignItems": "center",
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+                  style={
+                    Object {
+                      "fill": "green",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <div
+              style={
+                Object {
+                  "margin": "0 12px 0 5px",
+                }
+              }
+            >
+              Notification testing
+            </div>
+            <span
+              className="badge header6 active"
+            >
+              2
+            </span>
+          </div>
+          <span
+            aria-hidden={false}
+            className="accordion-icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+        <div
+          aria-labelledby="1-header"
+          className="accordion-body-container"
+          id="1-content"
+          role="region"
+        >
+          <div
+            className="accordion-body show-border-top"
+          >
+            Body 2 text used here. Bottom bars are sticky sections that
+        can be used to highlight a few actions that are out of the
+        view to be displayed inside the view. For example, if
+        there's a very long form with Save and Cancel buttons at the
+        bottom, we can use the bottom bar to show those two buttons
+        in the view. We are making these bars to be flexible in
+        height and also allowing any component to be
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div
+        className="accordion-container"
+      >
+        <div
+          aria-controls="2-content"
+          aria-expanded={false}
+          className="accordion-summary"
+          id="2-header"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="button"
+          tabIndex={0}
+        >
+          <div
+            style={
+              Object {
+                "alignItems": "center",
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+                  style={
+                    Object {
+                      "fill": "green",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <div
+              style={
+                Object {
+                  "margin": "0 12px 0 5px",
+                }
+              }
+            >
+              Notification testing
+            </div>
+            <span
+              className="badge header6 active"
+            >
+              12
+            </span>
+          </div>
+          <span
+            aria-hidden={false}
+            className="accordion-icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+        <div
+          aria-labelledby="2-header"
+          className="accordion-body-container"
+          id="2-content"
+          role="region"
+        >
+          <div
+            className="accordion-body show-border-top"
+          >
+            Body 2 text used here. Bottom bars are sticky sections that
+        can be used to highlight a few actions that are out of the
+        view to be displayed inside the view. For example, if
+        there's a very long form with Save and Cancel buttons at the
+        bottom, we can use the bottom bar to show those two buttons
+        in the view. We are making these bars to be flexible in
+        height and also allowing any component to be
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h3>
+      Footer
+    </h3>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Accordion Single 1`] = `
+<div
+  className="accordion-container"
+>
+  <div
+    aria-controls="myAccordionId-content"
+    aria-expanded={false}
+    className="accordion-summary"
+    id="myAccordionId-header"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex={0}
+  >
+    Accordion Header
+    <span
+      aria-hidden={false}
+      className="accordion-icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    aria-labelledby="myAccordionId-header"
+    className="accordion-body-container"
+    id="myAccordionId-content"
+    role="region"
+  >
+    <div
+      className="accordion-body show-border-top"
+    >
+      <div
+        style={
+          Object {
+            "height": "80px",
+          }
+        }
+      >
+        Body 2 text used here. Bottom bars are sticky sections that can be used to highlight a few actions that are out of the view to be displayed inside the view. For example, if there's a very long form with Save and Cancel buttons at the bottom, we can use the bottom bar to show those two buttons in the view. We are making these bars to be flexible in height and also allowing any component to be added inside for now, to understand use cases from the team.
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Avatar/__snapshots__/Avatar.stories.storyshot b/src/src/components/Avatar/__snapshots__/Avatar.stories.storyshot
new file mode 100644
index 000000000..52611f09f
--- /dev/null
+++ b/src/src/components/Avatar/__snapshots__/Avatar.stories.storyshot
@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Avatar Avatar Default 1`] = `
+<div
+  className="my-avatar-class"
+  style={
+    Object {
+      "fontSize": "18px",
+      "height": "40px",
+      "minHeight": "40px",
+      "minWidth": "40px",
+      "width": "40px",
+    }
+  }
+>
+  <img
+    alt="random profile image"
+    className="image-style"
+    height="40px"
+    src="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg"
+    width="40px"
+  />
+</div>
+`;
+
+exports[`Storyshots Avatar Avatar Fallback Hashing 1`] = `
+<div
+  className="wrapper-style my-avatar-class image-style round-image orange"
+  style={
+    Object {
+      "fontSize": "18px",
+      "height": "40px",
+      "minHeight": "40px",
+      "minWidth": "40px",
+      "width": "40px",
+    }
+  }
+>
+  HF
+</div>
+`;
+
+exports[`Storyshots Avatar Avatar Fallback Theme 1`] = `
+<div
+  className="wrapper-style my-avatar-class image-style round-image green"
+  style={
+    Object {
+      "fontSize": "18px",
+      "height": "40px",
+      "minHeight": "40px",
+      "minWidth": "40px",
+      "width": "40px",
+    }
+  }
+>
+  AB
+</div>
+`;
+
+exports[`Storyshots Avatar Avatar Icon 1`] = `
+<div
+  className="wrapper-style my-avatar-class image-style"
+  style={
+    Object {
+      "backgroundColor": "grey",
+      "fontSize": "18px",
+      "height": "40px",
+      "minHeight": "40px",
+      "minWidth": "40px",
+      "width": "40px",
+    }
+  }
+>
+  <span
+    aria-hidden={false}
+    className="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "18px",
+          "width": "18px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Avatar Avatar Round 1`] = `
+<div
+  className="my-avatar-class"
+  style={
+    Object {
+      "fontSize": "18px",
+      "height": "40px",
+      "minHeight": "40px",
+      "minWidth": "40px",
+      "width": "40px",
+    }
+  }
+>
+  <img
+    alt="random profile image"
+    className="image-style round-image"
+    height="40px"
+    src="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg"
+    width="40px"
+  />
+</div>
+`;
+
+exports[`Storyshots Avatar Avatar Round Icon 1`] = `
+<div
+  className="wrapper-style my-avatar-class image-style round-image"
+  style={
+    Object {
+      "backgroundColor": "grey",
+      "fontSize": "18px",
+      "height": "40px",
+      "minHeight": "40px",
+      "minWidth": "40px",
+      "width": "40px",
+    }
+  }
+>
+  <span
+    aria-hidden={false}
+    className="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "18px",
+          "width": "18px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+</div>
+`;
diff --git a/src/src/components/Badge/__snapshots__/Badge.stories.storyshot b/src/src/components/Badge/__snapshots__/Badge.stories.storyshot
new file mode 100644
index 000000000..1dca552b0
--- /dev/null
+++ b/src/src/components/Badge/__snapshots__/Badge.stories.storyshot
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Badge Badge Active 1`] = `
+<span
+  className="badge header6 my-badge-class active"
+  style={Object {}}
+>
+  8
+</span>
+`;
+
+exports[`Storyshots Badge Badge Default 1`] = `
+<span
+  className="badge header6 my-badge-class"
+  style={Object {}}
+>
+  8
+</span>
+`;
+
+exports[`Storyshots Badge Badge Disruptive 1`] = `
+<span
+  className="badge header6 disruptive my-badge-class active"
+  style={Object {}}
+>
+  8
+</span>
+`;
diff --git a/src/src/components/Button/TwoStateButton/__snapshots__/TwoStateButton.stories.storyshot b/src/src/components/Button/TwoStateButton/__snapshots__/TwoStateButton.stories.storyshot
new file mode 100644
index 000000000..609c2d2fe
--- /dev/null
+++ b/src/src/components/Button/TwoStateButton/__snapshots__/TwoStateButton.stories.storyshot
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button Two State Button 1`] = `
+<button
+  aria-checked={false}
+  aria-disabled={false}
+  aria-label="Two State Button"
+  aria-pressed={false}
+  className="my-two-state-btn-class button two-state-button"
+  defaultChecked={false}
+  disabled={false}
+  id="myTwoStateButton"
+  style={Object {}}
+  type="button"
+>
+  <span
+    className="two-state-button-content"
+  >
+    <span
+      className="column column-one"
+    >
+      <span
+        aria-hidden={true}
+        className="icon icon-wrapper"
+        data-test-id="myTwoStateButtonIconOneTestId"
+        id="myTwoStateButtonIconOne"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className=""
+      >
+        Two State Button
+      </span>
+      <span
+        className="badge header6 counter"
+      >
+        8
+      </span>
+    </span>
+    <span
+      className="column"
+    >
+      <span
+        aria-hidden={true}
+        className="icon icon-wrapper"
+        data-test-id="myTwoStateButtonIconTwoTestId"
+        id="myTwoStateButtonIconTwo"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </span>
+</button>
+`;
diff --git a/src/src/components/Button/__snapshots__/Button.stories.storyshot b/src/src/components/Button/__snapshots__/Button.stories.storyshot
new file mode 100644
index 000000000..add19abda
--- /dev/null
+++ b/src/src/components/Button/__snapshots__/Button.stories.storyshot
@@ -0,0 +1,485 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button Counter 1`] = `
+<button
+  aria-disabled={false}
+  aria-label="Primary Button"
+  className="my-btn-class button button-primary icon-left"
+  data-test-id="my-btn-test-id"
+  defaultChecked={false}
+  disabled={false}
+  id="myButton"
+  style={Object {}}
+  type="button"
+>
+  <span>
+    <span
+      aria-hidden={true}
+      className="icon my-btn-icon icon-wrapper"
+      data-test-id="myButtonIconTestId"
+      id="myButtonIcon"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className=""
+    >
+      Primary Button
+      <span
+        className="badge header6 counter"
+      >
+        8
+      </span>
+    </span>
+  </span>
+</button>
+`;
+
+exports[`Storyshots Button Default 1`] = `
+<button
+  aria-disabled={false}
+  aria-label="Default Button"
+  className="my-btn-class button button-default icon-left"
+  data-test-id="my-btn-test-id"
+  defaultChecked={false}
+  disabled={false}
+  id="myButton"
+  style={Object {}}
+  type="button"
+>
+  <span>
+    <span
+      aria-hidden={true}
+      className="icon my-btn-icon icon-wrapper"
+      data-test-id="myButtonIconTestId"
+      id="myButtonIcon"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className=""
+    >
+      Default Button
+    </span>
+  </span>
+</button>
+`;
+
+exports[`Storyshots Button Neutral 1`] = `
+<button
+  aria-disabled={false}
+  aria-label="Neutral Button"
+  className="my-btn-class button button-neutral icon-left"
+  data-test-id="my-btn-test-id"
+  defaultChecked={false}
+  disabled={false}
+  id="myButton"
+  style={Object {}}
+  type="button"
+>
+  <span>
+    <span
+      aria-hidden={true}
+      className="icon my-btn-icon icon-wrapper"
+      data-test-id="myButtonIconTestId"
+      id="myButtonIcon"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className=""
+    >
+      Neutral Button
+    </span>
+  </span>
+</button>
+`;
+
+exports[`Storyshots Button Primary 1`] = `
+<button
+  aria-disabled={false}
+  aria-label="Primary Button"
+  className="my-btn-class button button-primary icon-left"
+  data-test-id="my-btn-test-id"
+  defaultChecked={false}
+  disabled={false}
+  id="myButton"
+  style={Object {}}
+  type="button"
+>
+  <span>
+    <span
+      aria-hidden={true}
+      className="icon my-btn-icon icon-wrapper"
+      data-test-id="myButtonIconTestId"
+      id="myButtonIcon"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className=""
+    >
+      Primary Button
+    </span>
+  </span>
+</button>
+`;
+
+exports[`Storyshots Button Secondary 1`] = `
+<button
+  aria-disabled={false}
+  aria-label="Secondary Button"
+  className="my-btn-class button button-secondary icon-left"
+  data-test-id="my-btn-test-id"
+  defaultChecked={false}
+  disabled={false}
+  id="myButton"
+  style={Object {}}
+  type="button"
+>
+  <span>
+    <span
+      aria-hidden={true}
+      className="icon my-btn-icon icon-wrapper"
+      data-test-id="myButtonIconTestId"
+      id="myButtonIcon"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className=""
+    >
+      Secondary Button
+    </span>
+  </span>
+</button>
+`;
+
+exports[`Storyshots Button Split 1`] = `
+Array [
+  <button
+    aria-disabled={false}
+    aria-label="Split Button"
+    className="my-btn-class button button-primary split-left"
+    data-test-id="my-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myButton"
+    style={Object {}}
+    type="button"
+  >
+    <span
+      className=""
+    >
+      Split Button
+    </span>
+  </button>,
+  <button
+    aria-checked={false}
+    aria-disabled={false}
+    aria-pressed={false}
+    className="my-btn-class button button-primary undefined split-button split-right"
+    defaultChecked={false}
+    disabled={false}
+    type="button"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      aria-hidden="true"
+      className="split-divider split-divider-primary"
+    />
+  </button>,
+]
+`;
+
+exports[`Storyshots Button Split With Counter 1`] = `
+Array [
+  <button
+    aria-disabled={false}
+    aria-label="Split Button"
+    className="my-btn-class button button-primary split-left"
+    data-test-id="my-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myButton"
+    style={Object {}}
+    type="button"
+  >
+    <span
+      className=""
+    >
+      Split Button
+      <span
+        className="badge header6 counter"
+      >
+        8
+      </span>
+    </span>
+  </button>,
+  <button
+    aria-checked={false}
+    aria-disabled={false}
+    aria-pressed={false}
+    className="my-btn-class button button-primary undefined split-button split-right"
+    defaultChecked={false}
+    disabled={false}
+    type="button"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      aria-hidden="true"
+      className="split-divider split-divider-primary"
+    />
+  </button>,
+]
+`;
+
+exports[`Storyshots Button Toggle 1`] = `
+<button
+  aria-checked={false}
+  aria-disabled={false}
+  aria-label="Toggle Button"
+  aria-pressed={false}
+  className="my-btn-class button button-primary icon-right"
+  data-test-id="my-btn-test-id"
+  defaultChecked={false}
+  disabled={false}
+  id="myButton"
+  style={Object {}}
+  type="button"
+>
+  <span>
+    <span
+      aria-hidden={true}
+      className="icon my-btn-icon icon-wrapper"
+      data-test-id="myButtonIconTestId"
+      id="myButtonIcon"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className=""
+    >
+      Toggle Button
+    </span>
+  </span>
+</button>
+`;
+
+exports[`Storyshots Button Toggle With Counter 1`] = `
+<button
+  aria-checked={false}
+  aria-disabled={false}
+  aria-label="Toggle Button"
+  aria-pressed={false}
+  className="my-btn-class button button-primary icon-right"
+  data-test-id="my-btn-test-id"
+  defaultChecked={false}
+  disabled={false}
+  id="myButton"
+  style={Object {}}
+  type="button"
+>
+  <span>
+    <span
+      aria-hidden={true}
+      className="icon my-btn-icon icon-wrapper"
+      data-test-id="myButtonIconTestId"
+      id="myButtonIcon"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className=""
+    >
+      Toggle Button
+      <span
+        className="badge header6 counter"
+      >
+        8
+      </span>
+    </span>
+  </span>
+</button>
+`;
diff --git a/src/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot b/src/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
new file mode 100644
index 000000000..b3ceed525
--- /dev/null
+++ b/src/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Check Box Check Box 1`] = `
+<div
+  className="selector my-checkbox-class"
+>
+  <input
+    aria-label="Label"
+    checked={true}
+    disabled={false}
+    id="myCheckBoxId"
+    name="myCheckBoxName"
+    onChange={[Function]}
+    readOnly={true}
+    type="checkbox"
+    value="label"
+  />
+  <label
+    className=""
+    htmlFor="myCheckBoxId"
+  >
+    <span
+      className="checkmark"
+    />
+    <span
+      className="selector-label"
+    >
+      Label
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Storyshots Check Box Check Box Group 1`] = `
+<div
+  checked={true}
+  className="checkbox-group vertical"
+  defaultChecked={
+    Array [
+      "First",
+    ]
+  }
+  role="group"
+>
+  <div
+    className="selector"
+  >
+    <input
+      checked={false}
+      disabled={false}
+      id="test-1"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="checkbox"
+      value="First"
+    />
+    <label
+      className=""
+      htmlFor="test-1"
+    >
+      <span
+        className="checkmark"
+      />
+      <span
+        className="selector-label"
+      >
+        First
+      </span>
+    </label>
+  </div>
+  <div
+    className="selector"
+  >
+    <input
+      checked={false}
+      disabled={false}
+      id="test-2"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="checkbox"
+      value="Second"
+    />
+    <label
+      className=""
+      htmlFor="test-2"
+    >
+      <span
+        className="checkmark"
+      />
+      <span
+        className="selector-label"
+      >
+        Second
+      </span>
+    </label>
+  </div>
+  <div
+    className="selector"
+  >
+    <input
+      checked={false}
+      disabled={false}
+      id="test-3"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="checkbox"
+      value="Third"
+    />
+    <label
+      className=""
+      htmlFor="test-3"
+    >
+      <span
+        className="checkmark"
+      />
+      <span
+        className="selector-label"
+      >
+        Third
+      </span>
+    </label>
+  </div>
+</div>
+`;
diff --git a/src/src/components/ConfigProvider/__snapshots__/ConfigProvider.stories.storyshot b/src/src/components/ConfigProvider/__snapshots__/ConfigProvider.stories.storyshot
new file mode 100644
index 000000000..4702d8e66
--- /dev/null
+++ b/src/src/components/ConfigProvider/__snapshots__/ConfigProvider.stories.storyshot
@@ -0,0 +1,2994 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Config Provider Theming 1`] = `
+<div
+  className="stack vertical xxl"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <h1
+    style={
+      Object {
+        "marginBottom": 0,
+      }
+    }
+  >
+    Selected Theme:
+    <span
+      style={
+        Object {
+          "color": "var(--primary-color)",
+          "marginLeft": "4px",
+          "textTransform": "capitalize",
+        }
+      }
+    >
+      blue
+    </span>
+  </h1>
+  <div
+    className="stack horizontal m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+        "marginTop": 0,
+      }
+    }
+  >
+    <div>
+      <p>
+        Predefined
+      </p>
+      <select
+        onChange={[Function]}
+        style={
+          Object {
+            "fontSize": "1rem",
+          }
+        }
+        value="blue"
+      >
+        <option
+          value="red"
+        >
+          red
+        </option>
+        <option
+          value="orange"
+        >
+          orange
+        </option>
+        <option
+          value="yellow"
+        >
+          yellow
+        </option>
+        <option
+          value="green"
+        >
+          green
+        </option>
+        <option
+          value="bluegreen"
+        >
+          bluegreen
+        </option>
+        <option
+          value="blue"
+        >
+          blue
+        </option>
+        <option
+          value="violet"
+        >
+          violet
+        </option>
+        <option
+          value="grey"
+        >
+          grey
+        </option>
+      </select>
+    </div>
+    <div>
+      <p>
+        Custom
+      </p>
+      <div
+        style={
+          Object {
+            "display": "inline-block",
+            "position": "relative",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "MozBorderRadius": 2,
+              "MozBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
+              "OBorderRadius": 2,
+              "OBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
+              "WebkitBorderRadius": 2,
+              "WebkitBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
+              "background": "#fff",
+              "borderRadius": 2,
+              "bottom": "0px",
+              "boxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
+              "left": "0px",
+              "msBorderRadius": 2,
+              "msBoxShadow": "0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)",
+              "position": "absolute",
+              "right": "0px",
+              "top": "0px",
+            }
+          }
+        />
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            className="compact-picker "
+            style={
+              Object {
+                "boxSizing": "initial",
+                "paddingLeft": "5px",
+                "paddingTop": "5px",
+                "width": "240px",
+              }
+            }
+          >
+            <div>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#4D4D4D",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#4D4D4D"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#999999",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#999999"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "MozBoxShadow": "inset 0 0 0 1px #ddd",
+                      "OBoxShadow": "inset 0 0 0 1px #ddd",
+                      "WebkitBoxShadow": "inset 0 0 0 1px #ddd",
+                      "background": "#FFFFFF",
+                      "boxShadow": "inset 0 0 0 1px #ddd",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "msBoxShadow": "inset 0 0 0 1px #ddd",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FFFFFF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#F44E3B",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#F44E3B"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FE9200",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FE9200"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FCDC00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FCDC00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#DBDF00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#DBDF00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#A4DD00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#A4DD00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#68CCCA",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#68CCCA"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#73D8FF",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#73D8FF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#AEA1FF",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#AEA1FF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FDA1FF",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FDA1FF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#333333",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#333333"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#808080",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#808080"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#cccccc",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#cccccc"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#D33115",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#D33115"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#E27300",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#E27300"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FCC400",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FCC400"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#B0BC00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#B0BC00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#68BC00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#68BC00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#16A5A5",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#16A5A5"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#009CE0",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#009CE0"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#7B64FF",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#7B64FF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FA28FF",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FA28FF"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#000000",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#000000"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "1",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#666666",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#666666"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#B3B3B3",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#B3B3B3"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#9F0500",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#9F0500"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#C45100",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#C45100"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#FB9E00",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#FB9E00"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#000",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#808900",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#808900"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#194D33",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#194D33"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#0C797D",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#0C797D"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#0062B1",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#0062B1"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#653294",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#653294"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <span
+                onBlur={[Function]}
+                onFocus={[Function]}
+              >
+                <div
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "background": "#AB149E",
+                      "cursor": "pointer",
+                      "float": "left",
+                      "height": "15px",
+                      "marginBottom": "5px",
+                      "marginRight": "5px",
+                      "outline": "none",
+                      "position": "relative",
+                      "width": "15px",
+                    }
+                  }
+                  tabIndex={0}
+                  title="#AB149E"
+                >
+                  <div
+                    style={
+                      Object {
+                        "MozBorderRadius": "50%",
+                        "OBorderRadius": "50%",
+                        "WebkitBorderRadius": "50%",
+                        "background": "#fff",
+                        "borderRadius": "50%",
+                        "bottom": "5px",
+                        "left": "5px",
+                        "msBorderRadius": "50%",
+                        "opacity": "0",
+                        "position": "absolute",
+                        "right": "5px",
+                        "top": "5px",
+                      }
+                    }
+                  />
+                </div>
+              </span>
+              <div
+                style={
+                  Object {
+                    "clear": "both",
+                  }
+                }
+              />
+            </div>
+            <div
+              className="flexbox-fix"
+              style={
+                Object {
+                  "display": "flex",
+                  "paddingBottom": "6px",
+                  "paddingRight": "5px",
+                  "position": "relative",
+                }
+              }
+            >
+              <div
+                style={
+                  Object {
+                    "background": "#000000",
+                    "height": "9px",
+                    "left": "5px",
+                    "position": "absolute",
+                    "top": "6px",
+                    "width": "9px",
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "MozBoxFlex": "6",
+                    "WebkitBoxFlex": "6",
+                    "WebkitFlex": "6",
+                    "flex": "6",
+                    "msFlex": "6",
+                    "position": "relative",
+                  }
+                }
+              >
+                <input
+                  id="rc-editable-input-1"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onKeyDown={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": "none",
+                      "border": "none",
+                      "color": "#333",
+                      "fontSize": "12px",
+                      "height": "16px",
+                      "outline": "none",
+                      "padding": "0px",
+                      "paddingLeft": "20%",
+                      "width": "80%",
+                    }
+                  }
+                  value="#000000"
+                />
+                <label
+                  htmlFor="rc-editable-input-1"
+                  onMouseDown={[Function]}
+                  style={
+                    Object {
+                      "display": "none",
+                    }
+                  }
+                >
+                  hex
+                </label>
+              </div>
+              <div
+                style={
+                  Object {
+                    "MozBoxFlex": "3",
+                    "WebkitBoxFlex": "3",
+                    "WebkitFlex": "3",
+                    "flex": "3",
+                    "msFlex": "3",
+                    "position": "relative",
+                  }
+                }
+              >
+                <input
+                  id="rc-editable-input-2"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onKeyDown={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": "none",
+                      "border": "none",
+                      "color": "#333",
+                      "fontSize": "12px",
+                      "height": "16px",
+                      "outline": "none",
+                      "padding": "0px",
+                      "paddingLeft": "30%",
+                      "width": "70%",
+                    }
+                  }
+                  value="0"
+                />
+                <label
+                  htmlFor="rc-editable-input-2"
+                  onMouseDown={[Function]}
+                  style={
+                    Object {
+                      "color": "#999",
+                      "fontSize": "12px",
+                      "left": "0px",
+                      "lineHeight": "16px",
+                      "position": "absolute",
+                      "textTransform": "uppercase",
+                      "top": "3px",
+                    }
+                  }
+                >
+                  r
+                </label>
+              </div>
+              <div
+                style={
+                  Object {
+                    "MozBoxFlex": "3",
+                    "WebkitBoxFlex": "3",
+                    "WebkitFlex": "3",
+                    "flex": "3",
+                    "msFlex": "3",
+                    "position": "relative",
+                  }
+                }
+              >
+                <input
+                  id="rc-editable-input-3"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onKeyDown={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": "none",
+                      "border": "none",
+                      "color": "#333",
+                      "fontSize": "12px",
+                      "height": "16px",
+                      "outline": "none",
+                      "padding": "0px",
+                      "paddingLeft": "30%",
+                      "width": "70%",
+                    }
+                  }
+                  value="0"
+                />
+                <label
+                  htmlFor="rc-editable-input-3"
+                  onMouseDown={[Function]}
+                  style={
+                    Object {
+                      "color": "#999",
+                      "fontSize": "12px",
+                      "left": "0px",
+                      "lineHeight": "16px",
+                      "position": "absolute",
+                      "textTransform": "uppercase",
+                      "top": "3px",
+                    }
+                  }
+                >
+                  g
+                </label>
+              </div>
+              <div
+                style={
+                  Object {
+                    "MozBoxFlex": "3",
+                    "WebkitBoxFlex": "3",
+                    "WebkitFlex": "3",
+                    "flex": "3",
+                    "msFlex": "3",
+                    "position": "relative",
+                  }
+                }
+              >
+                <input
+                  id="rc-editable-input-4"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onKeyDown={[Function]}
+                  spellCheck="false"
+                  style={
+                    Object {
+                      "background": "none",
+                      "border": "none",
+                      "color": "#333",
+                      "fontSize": "12px",
+                      "height": "16px",
+                      "outline": "none",
+                      "padding": "0px",
+                      "paddingLeft": "30%",
+                      "width": "70%",
+                    }
+                  }
+                  value="0"
+                />
+                <label
+                  htmlFor="rc-editable-input-4"
+                  onMouseDown={[Function]}
+                  style={
+                    Object {
+                      "color": "#999",
+                      "fontSize": "12px",
+                      "left": "0px",
+                      "lineHeight": "16px",
+                      "position": "absolute",
+                      "textTransform": "uppercase",
+                      "top": "3px",
+                    }
+                  }
+                >
+                  b
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="stack horizontal m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <button
+      aria-disabled={false}
+      aria-label="Primary Button"
+      className="button button-primary button-size3"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        className="button-text3"
+      >
+        Primary Button
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Primary Button"
+      className="button button-primary button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Primary Button"
+      className="button button-primary button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text3"
+        >
+          Primary Button
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="stack horizontal m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <button
+      aria-disabled={false}
+      aria-label="Secondary Button"
+      className="button button-secondary button-size3"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        className="button-text3"
+      >
+        Secondary Button
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Secondary Button"
+      className="button button-secondary button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Secondary Button"
+      className="button button-secondary button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text3"
+        >
+          Secondary Button
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="stack horizontal m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <button
+      aria-disabled={false}
+      aria-label="Default Button"
+      className="button button-default button-size3"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        className="button-text3"
+      >
+        Default Button
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Default Button"
+      className="button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Default Button"
+      className="button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text3"
+        >
+          Default Button
+        </span>
+      </span>
+    </button>
+  </div>
+  <div>
+    <div
+      className="tab-wrap"
+      role="tablist"
+      value="tab1"
+    >
+      <button
+        aria-label="Tab 1"
+        aria-selected={true}
+        className="tab active"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 1
+        </span>
+        <div
+          className="tab-indicator"
+          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+          data-flip-id="tabIndicator"
+          data-portal-key="portal"
+        />
+      </button>
+      <button
+        aria-label="Tab 2"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 2
+        </span>
+      </button>
+      <button
+        aria-label="Tab 3"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 3
+        </span>
+      </button>
+      <button
+        aria-label="Tab 4"
+        aria-selected={false}
+        className="tab"
+        disabled={true}
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 4
+        </span>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div
+      className="tab-wrap"
+      role="tablist"
+      value="tab1"
+    >
+      <button
+        aria-label="Tab 1"
+        aria-selected={true}
+        className="tab active"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <div
+          className="tab-indicator"
+          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+          data-flip-id="tabIndicator"
+          data-portal-key="portal"
+        />
+      </button>
+      <button
+        aria-label="Tab 2"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        aria-label="Tab 3"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        aria-label="Tab 4"
+        aria-selected={false}
+        className="tab"
+        disabled={true}
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div
+      className="tab-wrap small"
+      role="tablist"
+      value="tab1"
+    >
+      <button
+        aria-label="Tab 1"
+        aria-selected={true}
+        className="tab active"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 1
+        </span>
+        <div
+          className="tab-indicator"
+          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+          data-flip-id="tabIndicator"
+          data-portal-key="portal"
+        />
+      </button>
+      <button
+        aria-label="Tab 2"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 2
+        </span>
+      </button>
+      <button
+        aria-label="Tab 3"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 3
+        </span>
+      </button>
+      <button
+        aria-label="Tab 4"
+        aria-selected={false}
+        className="tab"
+        disabled={true}
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 4
+        </span>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div
+      className="tab-wrap pill"
+      role="tablist"
+      value="tab1"
+    >
+      <button
+        aria-label="Tab 1"
+        aria-selected={true}
+        className="tab active"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 1
+        </span>
+        <div
+          className="tab-indicator"
+          data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+          data-flip-id="tabIndicator"
+          data-portal-key="portal"
+        />
+      </button>
+      <button
+        aria-label="Tab 2"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 2
+        </span>
+      </button>
+      <button
+        aria-label="Tab 3"
+        aria-selected={false}
+        className="tab"
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 3
+        </span>
+      </button>
+      <button
+        aria-label="Tab 4"
+        aria-selected={false}
+        className="tab"
+        disabled={true}
+        onClick={[Function]}
+        role="tab"
+      >
+        <span
+          className="label"
+        >
+          Tab 4
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    className="navbar-container"
+    style={
+      Object {
+        "position": "relative",
+      }
+    }
+  >
+    <div
+      className="navbar-content"
+    >
+      <a
+        className="link-style"
+        href="/"
+        style={
+          Object {
+            "color": "inherit",
+            "padding": "8px",
+          }
+        }
+        target="_self"
+      >
+        Home
+      </a>
+    </div>
+    <div
+      className="navbar-content"
+    >
+      <a
+        className="link-style"
+        href="https://www.twitter.com"
+        style={
+          Object {
+            "color": "inherit",
+            "padding": "8px",
+          }
+        }
+        target="_self"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </a>
+      <a
+        className="link-style"
+        href="https://www.facebook.com"
+        style={
+          Object {
+            "color": "inherit",
+            "padding": "8px",
+          }
+        }
+        target="_self"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 2.04c-5.5 0-10 4.49-10 10.02c0 5 3.66 9.15 8.44 9.9v-7H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.89 3.78-3.89c1.09 0 2.23.19 2.23.19v2.47h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.45 2.9h-2.33v7a10 10 0 0 0 8.44-9.9c0-5.53-4.5-10.02-10-10.02Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </a>
+      <a
+        className="link-style"
+        href="https://www.instagram.com"
+        style={
+          Object {
+            "color": "inherit",
+            "padding": "8px",
+          }
+        }
+        target="_self"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </a>
+    </div>
+  </div>
+  <div
+    aria-label="score"
+    className="match-score-container oct-component"
+  >
+    <div
+      className="match-score-circle full"
+    />
+    <div
+      className="match-score-circle full"
+    />
+    <div
+      className="match-score-circle full"
+    />
+    <div
+      className="match-score-circle"
+    />
+    <div
+      className="match-score-circle"
+    />
+    <p
+      className="label"
+    >
+      3
+      /
+      5
+    </p>
+  </div>
+  <span
+    aria-hidden={false}
+    className="spinner icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "48px",
+          "width": "48px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <style>
+        @keyframes spin { to { transform: rotate(360deg) } }
+      </style>
+      <g
+        style={
+          Object {
+            "animation": "spin linear 0.8s infinite",
+            "transformOrigin": "center",
+          }
+        }
+      >
+        <path
+          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+        <rect
+          fill="transparent"
+          height="24"
+          width="24"
+        />
+      </g>
+    </svg>
+  </span>
+  <div
+    className="checkbox-group vertical"
+    defaultChecked={
+      Array [
+        "First",
+      ]
+    }
+    role="group"
+  >
+    <div
+      className="selector"
+    >
+      <input
+        checked={true}
+        disabled={false}
+        id="test-1"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="checkbox"
+        value="First"
+      />
+      <label
+        className=""
+        htmlFor="test-1"
+      >
+        <span
+          className="checkmark"
+        />
+        <span
+          className="selector-label"
+        >
+          First
+        </span>
+      </label>
+    </div>
+    <div
+      className="selector"
+    >
+      <input
+        checked={false}
+        disabled={false}
+        id="test-2"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="checkbox"
+        value="Second"
+      />
+      <label
+        className=""
+        htmlFor="test-2"
+      >
+        <span
+          className="checkmark"
+        />
+        <span
+          className="selector-label"
+        >
+          Second
+        </span>
+      </label>
+    </div>
+    <div
+      className="selector"
+    >
+      <input
+        checked={false}
+        disabled={false}
+        id="test-3"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="checkbox"
+        value="Third"
+      />
+      <label
+        className=""
+        htmlFor="test-3"
+      >
+        <span
+          className="checkmark"
+        />
+        <span
+          className="selector-label"
+        >
+          Third
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    aria-label="Radio Group"
+    className="radio-group vertical"
+    role="group"
+  >
+    <div
+      className="selector"
+    >
+      <input
+        checked={true}
+        disabled={false}
+        id="oea2exk-1"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="radio"
+        value="Radio1"
+      />
+      <label
+        className=""
+        htmlFor="oea2exk-1"
+      >
+        <span
+          className="radio-button"
+          id="oea2exk-1-custom-radio"
+        />
+        <span
+          className="selector-label"
+        >
+          Radio1
+        </span>
+      </label>
+    </div>
+    <div
+      className="selector"
+    >
+      <input
+        checked={false}
+        disabled={false}
+        id="oea2exk-2"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="radio"
+        value="Radio2"
+      />
+      <label
+        className=""
+        htmlFor="oea2exk-2"
+      >
+        <span
+          className="radio-button"
+          id="oea2exk-2-custom-radio"
+        />
+        <span
+          className="selector-label"
+        >
+          Radio2
+        </span>
+      </label>
+    </div>
+    <div
+      className="selector"
+    >
+      <input
+        checked={false}
+        disabled={false}
+        id="oea2exk-3"
+        name="group"
+        onChange={[Function]}
+        readOnly={true}
+        type="radio"
+        value="Radio3"
+      />
+      <label
+        className=""
+        htmlFor="oea2exk-3"
+      >
+        <span
+          className="radio-button"
+          id="oea2exk-3-custom-radio"
+        />
+        <span
+          className="selector-label"
+        >
+          Radio3
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    className="main-wrapper"
+  >
+    <button
+      aria-controls="dropdown-1"
+      aria-disabled={false}
+      aria-expanded={false}
+      aria-haspopup={true}
+      className="button button-default"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      <span
+        className=""
+      >
+        Menu dropdown
+      </span>
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/src/components/DateTimePicker/DatePicker/__snapshots__/DatePicker.stories.storyshot b/src/src/components/DateTimePicker/DatePicker/__snapshots__/DatePicker.stories.storyshot
new file mode 100644
index 000000000..2547d357e
--- /dev/null
+++ b/src/src/components/DateTimePicker/DatePicker/__snapshots__/DatePicker.stories.storyshot
@@ -0,0 +1,3000 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Date Picker Customized Date Styling 1`] = `
+<div
+  className="picker picker-range picker-small my-picker-class"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+>
+  <div
+    className="picker-input picker-input-active"
+  >
+    <input
+      autoComplete="off"
+      disabled={false}
+      id="myPickerInputId"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      placeholder="Start date"
+      readOnly={true}
+      size={12}
+      value=""
+    />
+  </div>
+  <div
+    className="picker-range-separator"
+  >
+    <span
+      aria-label="to"
+      className="picker-separator"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker-input"
+  >
+    <input
+      autoComplete="off"
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      placeholder="End date"
+      readOnly={true}
+      size={12}
+      value=""
+    />
+  </div>
+  <div
+    className="picker-active-bar"
+    style={
+      Object {
+        "left": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+  />
+  <span
+    className="picker-suffix"
+  >
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "14px",
+            "width": "14px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+          style={
+            Object {
+              "fill": "#69717f",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Date Picker Date Format Basic 1`] = `
+<div
+  className="stack vertical m"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select date"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        className="picker-clear"
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="button"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select date"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        className="picker-clear"
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="button"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select month"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        className="picker-clear"
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="button"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select week"
+        readOnly={true}
+        size={26}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        className="picker-clear"
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="button"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select date"
+        readOnly={true}
+        size={27}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        className="picker-clear"
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="button"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Date Picker Date Format Range 1`] = `
+<div
+  className="picker picker-range picker-small my-picker-class"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+>
+  <div
+    className="picker-input picker-input-active"
+  >
+    <input
+      autoComplete="off"
+      disabled={false}
+      id="myPickerInputId"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      placeholder="Start date"
+      readOnly={true}
+      size={12}
+      value=""
+    />
+  </div>
+  <div
+    className="picker-range-separator"
+  >
+    <span
+      aria-label="to"
+      className="picker-separator"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker-input"
+  >
+    <input
+      autoComplete="off"
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      placeholder="End date"
+      readOnly={true}
+      size={12}
+      value=""
+    />
+  </div>
+  <div
+    className="picker-active-bar"
+    style={
+      Object {
+        "left": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+  />
+  <span
+    className="picker-suffix"
+  >
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "14px",
+            "width": "14px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+          style={
+            Object {
+              "fill": "#69717f",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </span>
+  <span
+    className="picker-clear"
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "14px",
+            "width": "14px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Date Picker Extra Footer 1`] = `
+<div
+  className="picker picker-small my-picker-class"
+  onMouseUp={[Function]}
+>
+  <div
+    className="picker-input"
+  >
+    <input
+      autoComplete="off"
+      disabled={false}
+      id="myPickerInputId"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      placeholder="Select date"
+      readOnly={true}
+      size={12}
+      title=""
+      value=""
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Date Picker Preset Ranges 1`] = `
+<div
+  className="stack vertical m"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="picker picker-range picker-small my-picker-class"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start date"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End date"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker picker-range picker-small my-picker-class"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start date"
+        readOnly={true}
+        size={21}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End date"
+        readOnly={true}
+        size={21}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Date Picker Range Picker 1`] = `
+<div
+  className="stack vertical m"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="picker picker-range picker-small my-picker-class"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start date"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End date"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker picker-range picker-small my-picker-class"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start week"
+        readOnly={true}
+        size={26}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End week"
+        readOnly={true}
+        size={26}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker picker-range picker-small my-picker-class"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start month"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End month"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker picker-range picker-small my-picker-class"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start quarter"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End quarter"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker picker-range picker-small my-picker-class"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start year"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End year"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Date Picker Range Picker Choose Time 1`] = `
+<div
+  className="picker picker-range picker-small my-picker-class"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+>
+  <div
+    className="picker-input picker-input-active"
+  >
+    <input
+      autoComplete="off"
+      disabled={false}
+      id="myPickerInputId"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      placeholder="Start date"
+      readOnly={true}
+      size={18}
+      value=""
+    />
+  </div>
+  <div
+    className="picker-range-separator"
+  >
+    <span
+      aria-label="to"
+      className="picker-separator"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker-input"
+  >
+    <input
+      autoComplete="off"
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      placeholder="End date"
+      readOnly={true}
+      size={18}
+      value=""
+    />
+  </div>
+  <div
+    className="picker-active-bar"
+    style={
+      Object {
+        "left": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+  />
+  <span
+    className="picker-suffix"
+  >
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "14px",
+            "width": "14px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+          style={
+            Object {
+              "fill": "#69717f",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Date Picker Range Picker Disabled 1`] = `
+<div
+  className="stack vertical m"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="picker picker-range picker-small my-picker-class picker-disabled"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={true}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start date"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={true}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End date"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker picker-range picker-small my-picker-class picker-disabled"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={true}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start date"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={true}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End date"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Date Picker Range Picker Disabled Date And Time 1`] = `
+<div
+  className="stack vertical m"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="picker picker-range picker-small my-picker-class"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start date"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End date"
+        readOnly={true}
+        size={12}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker picker-range picker-small my-picker-class"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+  >
+    <div
+      className="picker-input picker-input-active"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Start date"
+        readOnly={true}
+        size={21}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        className="picker-separator"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="End date"
+        readOnly={true}
+        size={21}
+        value=""
+      />
+    </div>
+    <div
+      className="picker-active-bar"
+      style={
+        Object {
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Date Picker Select Range By Day Limit 1`] = `
+<div
+  className="picker picker-range picker-small my-picker-class"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+>
+  <div
+    className="picker-input picker-input-active"
+  >
+    <input
+      autoComplete="off"
+      disabled={false}
+      id="myPickerInputId"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      placeholder="Start date"
+      readOnly={true}
+      size={12}
+      value=""
+    />
+  </div>
+  <div
+    className="picker-range-separator"
+  >
+    <span
+      aria-label="to"
+      className="picker-separator"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    className="picker-input"
+  >
+    <input
+      autoComplete="off"
+      disabled={false}
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      placeholder="End date"
+      readOnly={true}
+      size={12}
+      value=""
+    />
+  </div>
+  <div
+    className="picker-active-bar"
+    style={
+      Object {
+        "left": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+  />
+  <span
+    className="picker-suffix"
+  >
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "14px",
+            "width": "14px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+          style={
+            Object {
+              "fill": "#69717f",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Date Picker Single Picker 1`] = `
+<div
+  className="stack vertical m"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select date"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select week"
+        readOnly={true}
+        size={26}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select month"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select quarter"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select year"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Date Picker Single Picker Choose Time 1`] = `
+<div
+  className="picker picker-small my-picker-class"
+  onMouseUp={[Function]}
+>
+  <div
+    className="picker-input"
+  >
+    <input
+      autoComplete="off"
+      disabled={false}
+      id="myPickerInputId"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDown={[Function]}
+      placeholder="Select date"
+      readOnly={true}
+      size={21}
+      title=""
+      value=""
+    />
+    <span
+      className="picker-suffix"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "14px",
+              "width": "14px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+            style={
+              Object {
+                "fill": "#69717f",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Date Picker Single Picker Disabled 1`] = `
+<div
+  className="stack vertical m"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="picker picker-small my-picker-class picker-disabled"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={true}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select date"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small my-picker-class picker-disabled"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={true}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select date"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Date Picker Single Picker Disabled Date And Time 1`] = `
+<div
+  className="stack vertical m"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select date"
+        readOnly={true}
+        size={21}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select month"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#69717f",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Date Picker Status 1`] = `
+<div
+  className="stack vertical m"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="picker picker-small picker-status-error my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select date"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#993838",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="picker picker-small picker-status-warning my-picker-class"
+    onMouseUp={[Function]}
+  >
+    <div
+      className="picker-input"
+    >
+      <input
+        autoComplete="off"
+        disabled={false}
+        id="myPickerInputId"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        placeholder="Select date"
+        readOnly={true}
+        size={12}
+        title=""
+        value=""
+      />
+      <span
+        className="picker-suffix"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "14px",
+                "width": "14px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20M19,8H5V6H19V8Z"
+              style={
+                Object {
+                  "fill": "#9d6309",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Dialog/__snapshots__/Dialog.stories.storyshot b/src/src/components/Dialog/__snapshots__/Dialog.stories.storyshot
new file mode 100644
index 000000000..2893ec9f5
--- /dev/null
+++ b/src/src/components/Dialog/__snapshots__/Dialog.stories.storyshot
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Dialog Medium 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open dialog
+  </span>
+</button>
+`;
+
+exports[`Storyshots Dialog Small 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary button-primary-disruptive"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open dialog
+  </span>
+</button>
+`;
diff --git a/src/src/components/Dropdown/__snapshots__/Dropdown.stories.storyshot b/src/src/components/Dropdown/__snapshots__/Dropdown.stories.storyshot
new file mode 100644
index 000000000..6273dc128
--- /dev/null
+++ b/src/src/components/Dropdown/__snapshots__/Dropdown.stories.storyshot
@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Dropdown Dropdown Button 1`] = `
+<div
+  className="my-dropdown-class main-wrapper"
+  style={Object {}}
+>
+  <button
+    aria-controls="dropdown-4"
+    aria-disabled={false}
+    aria-expanded={false}
+    aria-haspopup={true}
+    className="button button-default icon-right"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    <span>
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className=""
+      >
+        Click button start
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Dropdown Dropdown Div 1`] = `
+<div
+  className="my-dropdown-class main-wrapper"
+  style={Object {}}
+>
+  <div
+    aria-controls="dropdown-5"
+    aria-expanded={false}
+    aria-haspopup={true}
+    className="reference-wrapper"
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+    tabIndex="0"
+  >
+    <code>
+      HTMLDivElement
+    </code>
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Empty/__snapshots__/Empty.stories.storyshot b/src/src/components/Empty/__snapshots__/Empty.stories.storyshot
new file mode 100644
index 000000000..aabc28c43
--- /dev/null
+++ b/src/src/components/Empty/__snapshots__/Empty.stories.storyshot
@@ -0,0 +1,500 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Empty Custom Image 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+    style={Object {}}
+  >
+    <span
+      aria-hidden={false}
+      className="icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "200px",
+            "width": "200px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M22.61,19L13.53,9.91C14.46,7.57 14,4.81 12.09,2.91C9.79,0.61 6.21,0.4 3.66,2.26L7.5,6.11L6.08,7.5L2.25,3.69C0.39,6.23 0.6,9.82 2.9,12.11C4.76,13.97 7.47,14.46 9.79,13.59L18.9,22.7C19.29,23.09 19.92,23.09 20.31,22.7L22.61,20.4C23,20 23,19.39 22.61,19M19.61,20.59L10.15,11.13C9.54,11.58 8.86,11.85 8.15,11.95C6.79,12.15 5.36,11.74 4.32,10.7C3.37,9.76 2.93,8.5 3,7.26L6.09,10.35L10.33,6.11L7.24,3C8.5,2.95 9.73,3.39 10.68,4.33C11.76,5.41 12.17,6.9 11.92,8.29C11.8,9 11.5,9.66 11.04,10.25L20.5,19.7L19.61,20.59Z"
+          style={
+            Object {
+              "fill": "#8ED0FA",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty Empty Messages 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="empty-messages-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M131.098 145.069C125.349 140.58 119.665 136.448 116.52 133.384C116.016 132.893 115.288 132.671 114.598 132.81C35.5718 148.779 -9.97428 65.6821 65.669 27.1035C65.7558 27.0592 65.8525 27.0185 65.9449 26.9875C142.983 1.22162 204.241 81.5443 135.362 124.844C134.772 125.214 134.381 125.876 134.381 126.572L134.381 143.483C134.381 145.166 132.424 146.105 131.098 145.069Z"
+        fill="white"
+        stroke="#8ED0FA"
+        strokeWidth="6"
+      />
+      <path
+        d="M66.3926 86.6624C70.9586 86.6624 74.3926 82.703 74.3926 78.1624C74.3926 73.6217 70.9586 69.6624 66.3926 69.6624C61.8266 69.6624 58.3926 73.6217 58.3926 78.1624C58.3926 82.703 61.8266 86.6624 66.3926 86.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        strokeWidth="4"
+      />
+      <path
+        d="M94.3926 86.6624C98.9586 86.6624 102.393 82.703 102.393 78.1624C102.393 73.6217 98.9586 69.6624 94.3926 69.6624C89.8266 69.6624 86.3926 73.6217 86.3926 78.1624C86.3926 82.703 89.8266 86.6624 94.3926 86.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        strokeWidth="4"
+      />
+      <path
+        d="M122.393 86.6624C126.959 86.6624 130.393 82.703 130.393 78.1624C130.393 73.6217 126.959 69.6624 122.393 69.6624C117.827 69.6624 114.393 73.6217 114.393 78.1624C114.393 82.703 117.827 86.6624 122.393 86.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        strokeWidth="4"
+      />
+    </svg>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty Error State 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="server-error-image-default"
+      fill="none"
+      height="185"
+      viewBox="0 0 200 185"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.0718 178.839C21.8078 172.861 3.66074 163.325 0.510726 151.175C-2.63929 139.025 9.18787 124.359 24.8068 116.637C40.5358 109.029 59.9069 108.449 71.9662 103.257C83.9156 97.9498 88.5731 87.9309 99.9189 78.9985C111.265 70.066 129.299 62.2199 140.372 65.9517C151.555 69.798 155.648 85.2069 164.716 97.6426C173.785 110.078 187.68 119.625 194.904 132.657C202.237 145.804 202.768 162.422 189.061 167.219C175.355 172.016 147.3 164.877 128.36 166.625C109.569 168.288 99.7624 178.823 86.4541 182.955C73.2954 187.004 56.4854 184.734 39.0718 178.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M49.2784 101.405C39.3247 57.4604 105.676 18.8428 136.863 78.7671C196.578 76.1036 191.934 156.002 145.489 158L107.668 158L46.6243 158C12.7837 158 0.841885 104.068 49.2784 101.405Z"
+        fill="white"
+        stroke="#8ED0FA"
+        strokeWidth="6"
+      />
+      <path
+        d="M76.0193 103.097L82.4167 109.495L86.6594 105.252L80.2619 98.8548L76.0193 103.097ZM82.4167 108.081L76.38 114.117L80.6226 118.36L86.6594 112.323L82.4167 108.081ZM82.4167 109.495C82.0262 109.104 82.0262 108.471 82.4167 108.081L86.6594 112.323C88.612 110.371 88.612 107.205 86.6594 105.252L82.4167 109.495Z"
+        fill="#8ED0FA"
+      />
+      <path
+        d="M128.572 114.117L122.175 107.72L117.932 111.963L124.33 118.36L128.572 114.117ZM122.175 109.134L128.212 103.097L123.969 98.8548L117.932 104.892L122.175 109.134ZM122.175 107.72C122.566 108.111 122.566 108.744 122.175 109.134L117.932 104.892C115.98 106.844 115.98 110.01 117.932 111.963L122.175 107.72Z"
+        fill="#8ED0FA"
+      />
+      <path
+        d="M102 142C107.192 142 111 137.516 111 132.5C111 127.484 107.192 123 102 123C96.8079 123 93 127.484 93 132.5C93 137.516 96.8079 142 102 142Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        strokeWidth="6"
+      />
+      <path
+        d="M161 68C166.192 68 170 63.5161 170 58.5C170 53.4839 166.192 49 161 49C155.808 49 152 53.4839 152 58.5C152 63.5161 155.808 68 161 68Z"
+        stroke="#B0F3FE"
+        strokeWidth="6"
+      />
+      <path
+        d="M55 22C60.1921 22 64 17.5161 64 12.5C64 7.48391 60.1921 3 55 3C49.8079 3 46 7.48391 46 12.5C46 17.5161 49.8079 22 55 22Z"
+        stroke="#B0F3FE"
+        strokeWidth="6"
+      />
+      <ellipse
+        cx="108"
+        cy="29.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <ellipse
+        cx="28"
+        cy="89.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <line
+        stroke="#B0F3FE"
+        strokeLinecap="round"
+        strokeWidth="6"
+        x1="161.334"
+        x2="148.606"
+        y1="11.6067"
+        y2="24.3346"
+      />
+      <line
+        stroke="#B0F3FE"
+        strokeLinecap="round"
+        strokeWidth="6"
+        x1="161.335"
+        x2="148.608"
+        y1="24.3345"
+        y2="11.6065"
+      />
+      <line
+        stroke="#B0F3FE"
+        strokeLinecap="round"
+        strokeWidth="6"
+        x1="31.334"
+        x2="18.6061"
+        y1="38.6067"
+        y2="51.3346"
+      />
+      <line
+        stroke="#B0F3FE"
+        strokeLinecap="round"
+        strokeWidth="6"
+        x1="31.3355"
+        x2="18.6076"
+        y1="51.3345"
+        y2="38.6065"
+      />
+    </svg>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty No Data 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="empty-data-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M26 108L38.5 59H160.5L174 108V154H26V108Z"
+        fill="white"
+      />
+      <path
+        clipRule="evenodd"
+        d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
+        fill="#B0F3FE"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
+        fill="#8ED0FA"
+        fillRule="evenodd"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="40"
+        rx="6.66667"
+        width="13.3333"
+        x="93.334"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="40"
+        rx="6.66667"
+        transform="rotate(-30 46.666 6.66675)"
+        width="13.3333"
+        x="46.666"
+        y="6.66675"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="40"
+        rx="6.66667"
+        transform="rotate(30 141.666 0)"
+        width="13.3333"
+        x="141.666"
+      />
+    </svg>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty No Search Results 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="empty-search-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M183 91C188.192 91 192 86.5161 192 81.5C192 76.4839 188.192 72 183 72C177.808 72 174 76.4839 174 81.5C174 86.5161 177.808 91 183 91Z"
+        stroke="#B0F3FE"
+        strokeWidth="6"
+      />
+      <circle
+        cx="139"
+        cy="47"
+        fill="#B0F3FE"
+        r="5"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="10"
+        rx="5"
+        width="20"
+        x="148"
+        y="42"
+      />
+      <rect
+        fill="#B0F3FE"
+        height="10"
+        rx="5"
+        width="30"
+        x="10"
+        y="83"
+      />
+      <path
+        d="M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412Z"
+        fill="white"
+      />
+      <path
+        d="M127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693Z"
+        fill="white"
+      />
+      <path
+        d="M125.26 118.259L118.189 111.187M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412ZM155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664Z"
+        stroke="#8ED0FA"
+        strokeLinecap="round"
+        strokeWidth="6"
+      />
+      <path
+        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        strokeWidth="4"
+      />
+    </svg>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
+
+exports[`Storyshots Empty Tasks Complete 1`] = `
+<div
+  className="empty"
+  style={Object {}}
+>
+  <div
+    className="empty-image"
+  >
+    <svg
+      className="tasks-complete-image-default"
+      fill="none"
+      height="184"
+      viewBox="0 0 200 184"
+      width="200"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+        fill="#EBF7FF"
+      />
+      <path
+        d="M180 98C185.192 98 189 93.5161 189 88.5C189 83.4839 185.192 79 180 79C174.808 79 171 83.4839 171 88.5C171 93.5161 174.808 98 180 98Z"
+        stroke="#B0F3FE"
+        strokeWidth="6"
+      />
+      <circle
+        cx="139"
+        cy="47"
+        fill="#B0F3FE"
+        r="5"
+      />
+      <path
+        d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
+        fill="#B0F3FE"
+        stroke="#B0F3FE"
+        strokeWidth="4"
+      />
+      <circle
+        cx="98"
+        cy="79"
+        fill="white"
+        r="60"
+        stroke="#8ED0FA"
+        strokeLinecap="round"
+        strokeWidth="6"
+      />
+      <path
+        d="M80.9802 73.3685C79.5239 72.0567 77.2649 72.1574 75.9346 73.5935C74.6043 75.0295 74.7064 77.2571 76.1627 78.569L92.971 93.7098C95.0099 95.5463 98.1725 95.4053 100.035 93.3948C100.113 93.3094 100.113 93.3094 100.188 93.2217L124.175 64.7735C125.436 63.2779 125.228 61.0574 123.712 59.8139C122.195 58.5703 119.943 58.7747 118.682 60.2703L96.1309 87.0162L80.9802 73.3685Z"
+        fill="#B0F3FE"
+      />
+      <path
+        d="M16 26C21.1921 26 25 21.5161 25 16.5C25 11.4839 21.1921 7 16 7C10.8079 7 7 11.4839 7 16.5C7 21.5161 10.8079 26 16 26Z"
+        stroke="#B0F3FE"
+        strokeWidth="6"
+      />
+      <ellipse
+        cx="38"
+        cy="35.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <ellipse
+        cx="171"
+        cy="35.5"
+        fill="#B0F3FE"
+        rx="6"
+        ry="6.5"
+      />
+      <line
+        stroke="#B0F3FE"
+        strokeLinecap="round"
+        strokeWidth="6"
+        x1="160"
+        x2="142"
+        y1="13"
+        y2="13"
+      />
+      <line
+        stroke="#B0F3FE"
+        strokeLinecap="round"
+        strokeWidth="6"
+        x1="151"
+        x2="151"
+        y1="22"
+        y2="4"
+      />
+      <line
+        stroke="#B0F3FE"
+        strokeLinecap="round"
+        strokeWidth="6"
+        x1="31"
+        x2="13"
+        y1="87"
+        y2="87"
+      />
+      <line
+        stroke="#B0F3FE"
+        strokeLinecap="round"
+        strokeWidth="6"
+        x1="22"
+        x2="22"
+        y1="96"
+        y2="78"
+      />
+    </svg>
+  </div>
+  <div
+    className="empty-title"
+  >
+    Short Message Here
+  </div>
+  <div
+    className="empty-description"
+  >
+    More detail on how might the user be able to get around this
+  </div>
+</div>
+`;
diff --git a/src/src/components/Icon/__snapshots__/Icon.stories.storyshot b/src/src/components/Icon/__snapshots__/Icon.stories.storyshot
new file mode 100644
index 000000000..69c0e25c7
--- /dev/null
+++ b/src/src/components/Icon/__snapshots__/Icon.stories.storyshot
@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Icon Basic 1`] = `
+<span
+  aria-hidden={false}
+  className="my-icon-class icon-wrapper"
+  data-test-id="myIconTestId"
+  id="myIconId"
+  role="presentation"
+>
+  <svg
+    aria-labelledby="icon_labelledby_94 icon_describedby_94"
+    style={
+      Object {
+        "height": "20px",
+        "width": "20px",
+      }
+    }
+    viewBox="0 0 24 24"
+  >
+    <title
+      id="icon_labelledby_94"
+    >
+      My icon title.
+    </title>
+    <desc
+      id="icon_describedby_94"
+    >
+      My icon description.
+    </desc>
+    <path
+      d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+      style={
+        Object {
+          "fill": "#000000",
+        }
+      }
+    />
+  </svg>
+</span>
+`;
+
+exports[`Storyshots Icon Icomoon 1`] = `
+<span
+  aria-hidden={false}
+  className="my-icon-class icon-wrapper"
+  data-test-id="myIconTestId"
+  id="myIconId"
+  role="presentation"
+>
+  <svg
+    className=""
+    height="20px"
+    role="presentation"
+    style={
+      Object {
+        "display": "inline-block",
+        "verticalAlign": "middle",
+      }
+    }
+    viewBox="0 0 1024 1024"
+    width="20px"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"
+      style={
+        Object {
+          "fill": "#000000",
+        }
+      }
+    />
+  </svg>
+</span>
+`;
+
+exports[`Storyshots Icon Icomoon Multicolor 1`] = `
+<span
+  aria-hidden={false}
+  className="my-icon-class icon-wrapper"
+  data-test-id="myIconTestId"
+  id="myIconId"
+  role="presentation"
+>
+  <svg
+    className=""
+    height="24px"
+    role="presentation"
+    style={
+      Object {
+        "display": "inline-block",
+        "verticalAlign": "middle",
+      }
+    }
+    viewBox="0 0 1024 1024"
+    width="24px"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M102.4 153.6v716.8h241.912v-139.999h79.375v139.999h241.912v-716.8h-563.2zM181.777 233.867h81.268v78.399h-81.268v-78.399zM344.312 233.867h79.375v78.399h-79.375v-78.399zM504.955 233.867h81.267v78.399h-81.267v-78.399zM181.777 392.532h81.268v80.269h-81.268v-80.269zM344.312 392.532h79.375v80.269h-79.375v-80.269zM504.955 392.532h81.267v80.269h-81.267v-80.269zM181.777 551.201h81.268v80.266h-81.268v-80.266zM344.312 551.201h79.375v80.266h-79.375v-80.266zM504.955 551.201h81.267v80.266h-81.267v-80.266zM181.777 711.734h81.268v78.4h-81.268v-78.4zM504.955 711.734h81.267v78.4h-81.267v-78.4z"
+      fill="rgb(80, 206, 225)"
+      style={
+        Object {
+          "fill": undefined,
+        }
+      }
+    />
+    <path
+      d="M598.536 358.4h108.529c14.303 0 26.501 5.478 36.598 16.435 10.936 10.112 16.404 22.333 16.404 36.662v54.359h108.531c14.303 0 26.501 5.478 36.598 16.435 10.936 10.115 16.404 22.756 16.404 37.926v295.821c0 15.171-5.468 28.234-16.404 39.191-10.097 10.115-22.295 15.171-36.598 15.171h-431.596c-14.303 0-26.921-5.056-37.86-15.171-10.094-10.957-15.142-24.020-15.142-39.191v-295.821c0-15.171 5.048-27.812 15.142-37.926 10.939-10.957 23.557-16.435 37.86-16.435h108.531v-54.359c0-14.328 5.046-26.55 15.142-36.662 10.936-10.957 23.557-16.435 37.86-16.435zM707.064 465.856v-54.359h-108.529v54.359h108.529z"
+      fill="rgb(20, 109, 166)"
+      opacity={0.6}
+      style={
+        Object {
+          "fill": undefined,
+        }
+      }
+    />
+  </svg>
+</span>
+`;
diff --git a/src/src/components/InfoBar/__snapshots__/InfoBar.stories.storyshot b/src/src/components/InfoBar/__snapshots__/InfoBar.stories.storyshot
new file mode 100644
index 000000000..58830578f
--- /dev/null
+++ b/src/src/components/InfoBar/__snapshots__/InfoBar.stories.storyshot
@@ -0,0 +1,357 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Info Bar Disruptive 1`] = `
+<div
+  className="info-bar my-info-bar-class disruptive"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
+    <span
+      className=""
+    >
+      Action
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Info Bar Neutral 1`] = `
+<div
+  className="info-bar my-info-bar-class neutral"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
+    <span
+      className=""
+    >
+      Action
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Info Bar Positive 1`] = `
+<div
+  className="info-bar my-info-bar-class positive"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
+    <span
+      className=""
+    >
+      Action
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Info Bar Warning 1`] = `
+<div
+  className="info-bar my-info-bar-class warning"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div
+    className="message body2"
+  >
+    Body2 is used inside here.
+  </div>
+  <button
+    aria-disabled={false}
+    aria-label="Action"
+    className="my-action-btn-class button button-neutral"
+    data-test-id="my-action-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myActionButton"
+  >
+    <span
+      className=""
+    >
+      Action
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Close"
+    className="my-close-btn-class button button-neutral icon-left"
+    data-test-id="my-close-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myCloseButton"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
diff --git a/src/src/components/Inputs/SearchBox/__snapshots__/SearchBox.stories.storyshot b/src/src/components/Inputs/SearchBox/__snapshots__/SearchBox.stories.storyshot
new file mode 100644
index 000000000..c2ca1e741
--- /dev/null
+++ b/src/src/components/Inputs/SearchBox/__snapshots__/SearchBox.stories.storyshot
@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Input Search Box 1`] = `
+<form
+  role="search"
+>
+  <div
+    className="input-wrapper left-icon"
+  >
+    <div
+      className="field-label medium"
+    >
+      <label
+        className="text-style medium"
+      >
+        Label
+      </label>
+      <span
+        className="field-label-icon-button medium"
+      >
+        <div
+          className="reference-wrapper"
+          id="4fzzzxj"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <button
+            aria-disabled={false}
+            className="label-icon-button button button-default button-size3 icon-left"
+            defaultChecked={false}
+            disabled={false}
+          >
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </span>
+    </div>
+    <div
+      className="input-group left-icon"
+    >
+      <input
+        aria-label="Search"
+        autoFocus={false}
+        className="my-searchbox-class with-icon with-icon-button with-icon-and-icon-button left-icon clear-not-visible"
+        disabled={false}
+        id="mySearchBoxId6"
+        maxLength={100}
+        minLength={0}
+        name="mySearchBox"
+        onChange={[Function]}
+        placeholder="Search"
+        readOnly={false}
+        required={false}
+        role="textbox"
+        style={Object {}}
+        tabIndex={0}
+        type="search"
+      />
+      <div
+        className="icon-wrapper left-icon"
+      >
+        <span
+          aria-hidden={false}
+          className="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+              style={
+                Object {
+                  "fill": "red",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </div>
+      <button
+        aria-disabled={false}
+        className="icon-button left-icon button button-default icon-left"
+        defaultChecked={false}
+        disabled={false}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</form>
+`;
diff --git a/src/src/components/Inputs/TextArea/__snapshots__/TextArea.stories.storyshot b/src/src/components/Inputs/TextArea/__snapshots__/TextArea.stories.storyshot
new file mode 100644
index 000000000..8dba18b55
--- /dev/null
+++ b/src/src/components/Inputs/TextArea/__snapshots__/TextArea.stories.storyshot
@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Input Text Area 1`] = `
+<div
+  className="input-wrapper"
+>
+  <div
+    className="field-label medium"
+  >
+    <label
+      className="text-style medium"
+    >
+      Label
+    </label>
+    <span
+      className="field-label-icon-button medium"
+    >
+      <div
+        className="reference-wrapper"
+        id="4fzzzxj"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <button
+          aria-disabled={false}
+          className="label-icon-button button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+        >
+          <span
+            aria-hidden={false}
+            className="icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "16px",
+                  "width": "16px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </span>
+  </div>
+  <div
+    className="text-area-group"
+  >
+    <textarea
+      aria-disabled={false}
+      aria-label="Sample text"
+      autoFocus={false}
+      className="my-textarea-class text-area"
+      cols={50}
+      disabled={false}
+      htmltype="text"
+      id="myTextAreaId7"
+      maxLength={300}
+      minLength={0}
+      name="myTextArea"
+      onChange={[Function]}
+      placeholder="Placeholder text"
+      required={false}
+      rows={5}
+      style={Object {}}
+      tabIndex={0}
+    />
+    <span
+      aria-hidden={false}
+      className="text-area-resize-icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Inputs/TextInput/__snapshots__/TextInput.stories.storyshot b/src/src/components/Inputs/TextInput/__snapshots__/TextInput.stories.storyshot
new file mode 100644
index 000000000..c7dbc93cf
--- /dev/null
+++ b/src/src/components/Inputs/TextInput/__snapshots__/TextInput.stories.storyshot
@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Input Text Input 1`] = `
+<div
+  className="input-wrapper left-icon"
+>
+  <div
+    className="field-label medium"
+  >
+    <label
+      className="text-style medium"
+    >
+      Label
+    </label>
+    <span
+      className="field-label-icon-button medium"
+    >
+      <div
+        className="reference-wrapper"
+        id="4fzzzxj"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <button
+          aria-disabled={false}
+          className="label-icon-button button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+        >
+          <span
+            aria-hidden={false}
+            className="icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "16px",
+                  "width": "16px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </span>
+  </div>
+  <div
+    className="input-group left-icon"
+  >
+    <input
+      aria-label="Sample text"
+      autoFocus={false}
+      className="my-textinput-class with-icon with-icon-button with-icon-and-icon-button left-icon clear-not-visible"
+      disabled={false}
+      htmltype="text"
+      id="myTextInputId8"
+      maxLength={100}
+      minLength={0}
+      name="myTextInput"
+      onChange={[Function]}
+      placeholder="Placeholder text"
+      readOnly={false}
+      required={false}
+      role="textbox"
+      style={Object {}}
+      tabIndex={0}
+      type="text"
+    />
+    <div
+      className="icon-wrapper left-icon"
+    >
+      <span
+        aria-hidden={false}
+        className="icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "red",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </div>
+    <button
+      aria-disabled={false}
+      className="icon-button left-icon button button-default icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Label/__snapshots__/Label.stories.storyshot b/src/src/components/Label/__snapshots__/Label.stories.storyshot
new file mode 100644
index 000000000..041e7233e
--- /dev/null
+++ b/src/src/components/Label/__snapshots__/Label.stories.storyshot
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Label Labels 1`] = `
+<div
+  className="field-label medium my-label-class"
+>
+  <label
+    className="text-style medium"
+    htmlFor=""
+  >
+    This is a label
+  </label>
+  <span
+    className="field-label-icon-button medium"
+  >
+    <div
+      className="reference-wrapper"
+      id="4fzzzxj"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        aria-disabled={false}
+        className="label-icon-button button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </span>
+</div>
+`;
diff --git a/src/src/components/Link/__snapshots__/Link.stories.storyshot b/src/src/components/Link/__snapshots__/Link.stories.storyshot
new file mode 100644
index 000000000..2ec6bbe2d
--- /dev/null
+++ b/src/src/components/Link/__snapshots__/Link.stories.storyshot
@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Link Default 1`] = `
+<a
+  className="link-style my-link-class"
+  href="https://www.twitter.com"
+  style={Object {}}
+  target="_self"
+>
+  Twitter
+</a>
+`;
+
+exports[`Storyshots Link Default Disabled 1`] = `
+<a
+  className="link-style my-link-class"
+  href="https://www.facebook.com"
+  style={Object {}}
+  target="_self"
+>
+  <span
+    aria-hidden={false}
+    className="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  User Profile
+</a>
+`;
+
+exports[`Storyshots Link Primary 1`] = `
+<a
+  className="link-style my-link-class primary"
+  href="https://www.facebook.com"
+  style={
+    Object {
+      "maxWidth": "100px",
+    }
+  }
+  target="_self"
+>
+  <span
+    aria-hidden={false}
+    className="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  User Profile
+</a>
+`;
diff --git a/src/src/components/List/__snapshots__/List.stories.storyshot b/src/src/components/List/__snapshots__/List.stories.storyshot
new file mode 100644
index 000000000..5bc2aa5c5
--- /dev/null
+++ b/src/src/components/List/__snapshots__/List.stories.storyshot
@@ -0,0 +1,241 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots List Horizontal 1`] = `
+<div
+  className="my-list-class"
+  style={Object {}}
+>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h2>
+      Header
+    </h2>
+  </div>
+  <ul
+    className="list-container"
+    role=""
+  >
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 1
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 2
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 3
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 4
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 5
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+  </ul>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h3>
+      Footer
+    </h3>
+  </div>
+</div>
+`;
+
+exports[`Storyshots List Vertical 1`] = `
+<div
+  className="my-list-class"
+  style={Object {}}
+>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h2>
+      Header
+    </h2>
+  </div>
+  <ul
+    className="list-container vertical"
+    role=""
+  >
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 1
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 2
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 3
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 4
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+    <li
+      className="list-item my-list-item-class"
+      style={
+        Object {
+          "padding": "8px 16px",
+        }
+      }
+    >
+      <div>
+        <p>
+          User 5
+        </p>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        </div>
+      </div>
+    </li>
+  </ul>
+  <div
+    style={
+      Object {
+        "paddingLeft": "16px",
+      }
+    }
+  >
+    <h3>
+      Footer
+    </h3>
+  </div>
+</div>
+`;
diff --git a/src/src/components/MatchScore/__snapshots__/MatchScore.stories.storyshot b/src/src/components/MatchScore/__snapshots__/MatchScore.stories.storyshot
new file mode 100644
index 000000000..bfd3814e4
--- /dev/null
+++ b/src/src/components/MatchScore/__snapshots__/MatchScore.stories.storyshot
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Match Score Default 1`] = `
+<div
+  aria-label="score"
+  className="my-match-score-class match-score-container oct-component"
+>
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle"
+  />
+  <div
+    className="match-score-circle"
+  />
+  <p
+    className="label"
+  >
+    3
+    /
+    5
+  </p>
+</div>
+`;
+
+exports[`Storyshots Match Score Without Label 1`] = `
+<div
+  aria-label="score"
+  className="my-match-score-class match-score-container oct-component"
+>
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle full"
+  />
+  <div
+    className="match-score-circle"
+  />
+  <div
+    className="match-score-circle"
+  />
+</div>
+`;
diff --git a/src/src/components/Menu/__snapshots__/Menu.stories.storyshot b/src/src/components/Menu/__snapshots__/Menu.stories.storyshot
new file mode 100644
index 000000000..8690e1b6f
--- /dev/null
+++ b/src/src/components/Menu/__snapshots__/Menu.stories.storyshot
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Menu Menus 1`] = `
+<div
+  className="main-wrapper"
+>
+  <button
+    aria-controls="dropdown-9"
+    aria-disabled={false}
+    aria-expanded={false}
+    aria-haspopup={true}
+    className="button button-default"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    <span
+      className=""
+    >
+      Menu dropdown
+    </span>
+  </button>
+</div>
+`;
diff --git a/src/src/components/Modal/__snapshots__/Modal.stories.storyshot b/src/src/components/Modal/__snapshots__/Modal.stories.storyshot
new file mode 100644
index 000000000..fd66d9747
--- /dev/null
+++ b/src/src/components/Modal/__snapshots__/Modal.stories.storyshot
@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Modal Fullscreen 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Header Actions 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Large 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Medium 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Scrollable 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal Small 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
+
+exports[`Storyshots Modal X Large 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open modal
+  </span>
+</button>
+`;
diff --git a/src/src/components/Navbar/__snapshots__/Navbar.stories.storyshot b/src/src/components/Navbar/__snapshots__/Navbar.stories.storyshot
new file mode 100644
index 000000000..e697f7f35
--- /dev/null
+++ b/src/src/components/Navbar/__snapshots__/Navbar.stories.storyshot
@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Navbar Navbar Div 1`] = `
+<div
+  style={
+    Object {
+      "height": "250px",
+    }
+  }
+>
+  <div
+    className="navbar-container"
+  >
+    <div
+      className="navbar-content"
+    >
+      <a
+        className="link-style"
+        href="https://www.twitter.com"
+        style={
+          Object {
+            "color": "inherit",
+            "padding": "8px 20px",
+          }
+        }
+        target="_self"
+      >
+        Twitter
+      </a>
+      <a
+        className="link-style"
+        href="https://www.facebook.com"
+        style={
+          Object {
+            "color": "inherit",
+            "padding": "8px 20px",
+          }
+        }
+        target="_self"
+      >
+        Facebook
+      </a>
+    </div>
+    <div
+      className="navbar-content"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <div
+          aria-controls="dropdown-17"
+          aria-expanded={false}
+          aria-haspopup={true}
+          className="reference-wrapper"
+          onClick={[Function]}
+          role="button"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+          tabIndex="0"
+        >
+          <div
+            style={
+              Object {
+                "fontSize": "18px",
+                "height": "32px",
+                "minHeight": "32px",
+                "minWidth": "32px",
+                "width": "32px",
+              }
+            }
+          >
+            <img
+              alt="random profile image"
+              className="image-style round-image"
+              height="32px"
+              src="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg"
+              width="32px"
+            />
+          </div>
+          <span
+            aria-hidden={false}
+            className="icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "20px",
+                  "width": "20px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Pagination/__snapshots__/Pagination.stories.storyshot b/src/src/components/Pagination/__snapshots__/Pagination.stories.storyshot
new file mode 100644
index 000000000..95c2cb0ab
--- /dev/null
+++ b/src/src/components/Pagination/__snapshots__/Pagination.stories.storyshot
@@ -0,0 +1,1247 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Pagination All Combined 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span
+    className="sizes"
+  >
+    <div
+      className="main-wrapper"
+    >
+      <button
+        aria-controls="dropdown-18"
+        aria-disabled={false}
+        aria-expanded={false}
+        aria-haspopup={true}
+        aria-label="Selected page size"
+        className="button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+        role="button"
+        tabIndex="0"
+      >
+        <span>
+          <span
+            aria-hidden={false}
+            className="icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "16px",
+                  "width": "16px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+          <span
+            className="button-text3"
+          >
+            page / 100
+          </span>
+        </span>
+      </button>
+    </div>
+  </span>
+  <span
+    className="total"
+  >
+    400 Total
+  </span>
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          4
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <span
+    className="jump"
+  >
+    <div
+      className="input-wrapper left-icon"
+    >
+      <div
+        className="input-group left-icon"
+      >
+        <input
+          autoFocus={false}
+          className="editor left-icon clear-not-visible"
+          defaultValue={4}
+          disabled={false}
+          id="input-19"
+          minLength={1}
+          onChange={[Function]}
+          readOnly={false}
+          required={false}
+          role="textbox"
+          tabIndex={0}
+          type="number"
+        />
+      </div>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Pagination Basic Few 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          5
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Pagination Basic Many 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-disabled={false}
+        aria-label="Next 5"
+        className="pagination-button quicknext button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          100
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Pagination Change Page Size 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span
+    className="sizes"
+  >
+    <div
+      className="main-wrapper"
+    >
+      <button
+        aria-controls="dropdown-20"
+        aria-disabled={false}
+        aria-expanded={false}
+        aria-haspopup={true}
+        aria-label="Selected page size"
+        className="button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+        role="button"
+        tabIndex="0"
+      >
+        <span>
+          <span
+            aria-hidden={false}
+            className="icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "16px",
+                  "width": "16px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+          <span
+            className="button-text3"
+          >
+            page / 1000
+          </span>
+        </span>
+      </button>
+    </div>
+  </span>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Pagination Dots 1`] = `
+<div
+  className="my-pagination-class pagination dots"
+  data-test-id="myPaginationTestId"
+>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          5
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Pagination Jump To 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          10
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <span
+    className="jump"
+  >
+    <div
+      className="input-wrapper left-icon"
+    >
+      <div
+        className="input-group left-icon"
+      >
+        <input
+          autoFocus={false}
+          className="editor left-icon clear-not-visible"
+          defaultValue={5}
+          disabled={false}
+          id="input-21"
+          minLength={1}
+          onChange={[Function]}
+          readOnly={false}
+          required={false}
+          role="textbox"
+          tabIndex={0}
+          type="number"
+        />
+      </div>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`Storyshots Pagination Simplified 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span />
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager page-tracker"
+  >
+    <li>
+      <span>
+        1 of
+      </span>
+    </li>
+    <li>
+      <span>
+        5
+      </span>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Pagination Total Item Count 1`] = `
+<div
+  className="my-pagination-class pagination"
+  data-test-id="myPaginationTestId"
+>
+  <span
+    className="total"
+  >
+    1000 Total
+  </span>
+  <button
+    aria-disabled={false}
+    aria-label="Previous"
+    className="pagination-button button button-default button-size3 icon-left disabled"
+    defaultChecked={false}
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <ul
+    className="pager"
+  >
+    <li>
+      <button
+        aria-checked={true}
+        aria-disabled={false}
+        aria-pressed={true}
+        className="pagination-button active button button-default button-size3"
+        defaultChecked={true}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          1
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          0
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-disabled={false}
+        aria-label="Next 5"
+        className="pagination-button quicknext button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li>
+      <button
+        aria-checked={false}
+        aria-disabled={false}
+        aria-pressed={false}
+        className="pagination-button button button-default button-size3"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          className="button-text3"
+        >
+          100
+        </span>
+      </button>
+    </li>
+  </ul>
+  <button
+    aria-disabled={false}
+    aria-label="Next"
+    className="pagination-button button button-default button-size3 icon-left"
+    defaultChecked={false}
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "16px",
+            "width": "16px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
diff --git a/src/src/components/Panel/__snapshots__/Panel.stories.storyshot b/src/src/components/Panel/__snapshots__/Panel.stories.storyshot
new file mode 100644
index 000000000..f27717eb5
--- /dev/null
+++ b/src/src/components/Panel/__snapshots__/Panel.stories.storyshot
@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Panel Bottom 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Large 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Left 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Medium 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Small 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Stacked 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
+
+exports[`Storyshots Panel Top 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-primary"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className=""
+  >
+    Open panel
+  </span>
+</button>
+`;
diff --git a/src/src/components/PersistentBar/__snapshots__/PersistentBar.stories.storyshot b/src/src/components/PersistentBar/__snapshots__/PersistentBar.stories.storyshot
new file mode 100644
index 000000000..65bc5df46
--- /dev/null
+++ b/src/src/components/PersistentBar/__snapshots__/PersistentBar.stories.storyshot
@@ -0,0 +1,623 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Persistent Bar Bottom Bar Buttons On Left 1`] = `
+<div
+  className="persistent-bar my-persistent-bar-class bottom-left-align"
+  role="presentation"
+  style={Object {}}
+>
+  <button
+    aria-disabled={false}
+    aria-label="Default"
+    className="my-default-btn-class button button-default"
+    data-test-id="my-default-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myDefaultButton"
+  >
+    <span
+      className=""
+    >
+      Default
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Default"
+    className="my-default-btn-class button button-default"
+    data-test-id="my-default-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myDefaultButton"
+  >
+    <span
+      className=""
+    >
+      Default
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Primary"
+    className="my-primary-btn-class button button-primary"
+    data-test-id="my-primary-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myPrimaryButton"
+  >
+    <span
+      className=""
+    >
+      Primary
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Persistent Bar Bottom Bar Secondary Buttons 1`] = `
+<div
+  className="persistent-bar my-persistent-bar-class bottom-secondary-buttons"
+  role="presentation"
+  style={Object {}}
+>
+  <button
+    aria-disabled={false}
+    aria-label="Default"
+    className="my-default-btn-class button button-secondary"
+    data-test-id="my-default-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myDefaultButton"
+  >
+    <span
+      className=""
+    >
+      Default
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Default"
+    className="my-default-btn-class button button-secondary"
+    data-test-id="my-default-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myDefaultButton"
+  >
+    <span
+      className=""
+    >
+      Default
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Default"
+    className="my-default-btn-class button button-secondary"
+    data-test-id="my-default-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myDefaultButton"
+  >
+    <span
+      className=""
+    >
+      Default
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Persistent Bar Bottom Bar With Text 1`] = `
+<div
+  className="persistent-bar my-persistent-bar-class bottom-with-text"
+  role="presentation"
+  style={Object {}}
+>
+  <div>
+    <h4>
+      Header 4 as Title:
+    </h4>
+    <span
+      className="content"
+    >
+      Body2 is used for supporting text.
+    </span>
+  </div>
+  <div>
+    <button
+      aria-disabled={false}
+      aria-label="Default"
+      className="-default-button button button-default"
+      data-test-id="my-default-btn-test-id"
+      defaultChecked={false}
+      disabled={false}
+      id="myDefaultButton"
+    >
+      <span
+        className=""
+      >
+        Default
+      </span>
+    </button>
+    <button
+      aria-disabled={false}
+      aria-label="Primary"
+      className="my-primary-btn-class button button-primary"
+      data-test-id="my-primary-btn-test-id"
+      defaultChecked={false}
+      disabled={false}
+      id="myPrimaryButton"
+    >
+      <span
+        className=""
+      >
+        Primary
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Persistent Bar Top Bar Buttons 1`] = `
+<div
+  className="persistent-bar my-persistent-bar-class top-button-menu"
+  role="presentation"
+  style={Object {}}
+>
+  <button
+    aria-disabled={false}
+    aria-label="Save Icon Button"
+    className="button button-secondary icon-left"
+    defaultChecked={false}
+    disabled={false}
+    id="myBookmarkButton"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Secondary"
+    className="my-primary-btn-class button button-secondary"
+    data-test-id="my-primary-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myPrimaryButton"
+  >
+    <span
+      className=""
+    >
+      Secondary
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Secondary"
+    className="my-primary-btn-class button button-secondary"
+    data-test-id="my-primary-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myPrimaryButton"
+  >
+    <span
+      className=""
+    >
+      Secondary
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Secondary"
+    className="my-primary-btn-class button button-secondary"
+    data-test-id="my-primary-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myPrimaryButton"
+  >
+    <span
+      className=""
+    >
+      Secondary
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Secondary"
+    className="my-primary-btn-class button button-secondary"
+    data-test-id="my-primary-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myPrimaryButton"
+  >
+    <span
+      className=""
+    >
+      Secondary
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Secondary"
+    className="my-primary-btn-class button button-secondary"
+    data-test-id="my-primary-btn-test-id"
+    defaultChecked={false}
+    disabled={false}
+    id="myPrimaryButton"
+  >
+    <span
+      className=""
+    >
+      Secondary
+    </span>
+  </button>
+  <button
+    aria-disabled={false}
+    aria-label="Save Icon Button"
+    className="button button-secondary icon-left"
+    defaultChecked={false}
+    disabled={false}
+    id="myMenuButton"
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Persistent Bar Top Bar Pagination 1`] = `
+<div
+  className="persistent-bar my-persistent-bar-class top-pagination"
+  role="presentation"
+  style={Object {}}
+>
+  <div
+    className="my-pagination-class pagination"
+    data-test-id="myPaginationTestId"
+  >
+    <span />
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-disabled={false}
+          aria-label="Next 5"
+          className="pagination-button quicknext button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            aria-hidden={false}
+            className="icon icon-wrapper"
+            role="presentation"
+          >
+            <svg
+              role="presentation"
+              style={
+                Object {
+                  "height": "16px",
+                  "width": "16px",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
+                style={
+                  Object {
+                    "fill": "currentColor",
+                  }
+                }
+              />
+            </svg>
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            15
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Persistent Bar Top Bar With Text 1`] = `
+<div
+  className="persistent-bar my-persistent-bar-class top-with-text"
+  role="presentation"
+  style={Object {}}
+>
+  <span
+    aria-hidden={false}
+    className="icon icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "20px",
+          "width": "20px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+    </svg>
+  </span>
+  <div>
+    <div>
+      <h4>
+        Header 4 as Title:
+      </h4>
+      <span
+        className="content"
+      >
+        Body2 is used for supporting text.
+      </span>
+    </div>
+  </div>
+  <div
+    className="pagination"
+  >
+    <span />
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager page-tracker"
+    >
+      <li>
+        <span>
+          1 of
+        </span>
+      </li>
+      <li>
+        <span>
+          15
+        </span>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Pills/__snapshots__/Pills.stories.storyshot b/src/src/components/Pills/__snapshots__/Pills.stories.storyshot
new file mode 100644
index 000000000..cd1cb39a6
--- /dev/null
+++ b/src/src/components/Pills/__snapshots__/Pills.stories.storyshot
@@ -0,0 +1,1289 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Pill Closable 1`] = `
+<div
+  className="stack vertical l"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="tag-pills red"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      red
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills orange"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      orange
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills yellow"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      yellow
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills green"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      green
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills bluegreen"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      bluegreen
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills blue"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      blue
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills violet"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      violet
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills grey"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      grey
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Close"
+      className="close-button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Pill Default 1`] = `
+<div
+  className="stack vertical l"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="tag-pills red"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      red
+    </span>
+  </div>
+  <div
+    className="tag-pills orange"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      orange
+    </span>
+  </div>
+  <div
+    className="tag-pills yellow"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      yellow
+    </span>
+  </div>
+  <div
+    className="tag-pills green"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      green
+    </span>
+  </div>
+  <div
+    className="tag-pills bluegreen"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      bluegreen
+    </span>
+  </div>
+  <div
+    className="tag-pills blue"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      blue
+    </span>
+  </div>
+  <div
+    className="tag-pills violet"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      violet
+    </span>
+  </div>
+  <div
+    className="tag-pills grey"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      grey
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Pill With Button 1`] = `
+<div
+  className="stack vertical l"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="tag-pills red"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      red
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills orange"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      orange
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills yellow"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      yellow
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills green"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      green
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills bluegreen"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      bluegreen
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills blue"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      blue
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills violet"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      violet
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    className="tag-pills grey"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      className="label"
+    >
+      grey
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Thumbs up"
+      className="button button button-default button-size2 icon-left"
+      defaultChecked={false}
+      disabled={false}
+    >
+      <span>
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "20px",
+                "width": "20px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21C22.11,8 23,8.9 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+        <span
+          className="button-text2"
+        >
+          2
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Pill With Icon 1`] = `
+<div
+  className="stack vertical l"
+  style={
+    Object {
+      "alignItems": undefined,
+      "flexWrap": undefined,
+      "justifyContent": undefined,
+    }
+  }
+>
+  <div
+    className="tag-pills red"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      red
+    </span>
+  </div>
+  <div
+    className="tag-pills orange"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      orange
+    </span>
+  </div>
+  <div
+    className="tag-pills yellow"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      yellow
+    </span>
+  </div>
+  <div
+    className="tag-pills green"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      green
+    </span>
+  </div>
+  <div
+    className="tag-pills bluegreen"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      bluegreen
+    </span>
+  </div>
+  <div
+    className="tag-pills blue"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      blue
+    </span>
+  </div>
+  <div
+    className="tag-pills violet"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      violet
+    </span>
+  </div>
+  <div
+    className="tag-pills grey"
+    style={
+      Object {
+        "color": undefined,
+      }
+    }
+  >
+    <span
+      aria-hidden={false}
+      className="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style={
+          Object {
+            "height": "20px",
+            "width": "20px",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+      </svg>
+    </span>
+    <span
+      className="label"
+    >
+      grey
+    </span>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Portal/__snapshots__/Portal.stories.storyshot b/src/src/components/Portal/__snapshots__/Portal.stories.storyshot
new file mode 100644
index 000000000..d362335e5
--- /dev/null
+++ b/src/src/components/Portal/__snapshots__/Portal.stories.storyshot
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Portal Default 1`] = `<div />`;
diff --git a/src/src/components/RadioButton/__snapshots__/RadioButton.stories.storyshot b/src/src/components/RadioButton/__snapshots__/RadioButton.stories.storyshot
new file mode 100644
index 000000000..6843370f2
--- /dev/null
+++ b/src/src/components/RadioButton/__snapshots__/RadioButton.stories.storyshot
@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Radio Button Radio Button 1`] = `
+<div
+  className="selector my-radiobutton-class"
+>
+  <input
+    aria-label="Label"
+    checked={false}
+    disabled={false}
+    id="myRadioButtonId"
+    name="myRadioButtonName"
+    onChange={[Function]}
+    readOnly={true}
+    type="radio"
+    value="Label"
+  />
+  <label
+    className=""
+    htmlFor="myRadioButtonId"
+  >
+    <span
+      className="radio-button"
+      id="myRadioButtonId-custom-radio"
+    />
+    <span
+      className="selector-label"
+    >
+      Label
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Storyshots Radio Button Radio Group 1`] = `
+<div
+  aria-label="Radio Group"
+  className="radio-group vertical"
+  role="group"
+>
+  <div
+    className="selector"
+  >
+    <input
+      checked={true}
+      disabled={false}
+      id="oea2exk-1"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="Radio1"
+    />
+    <label
+      className=""
+      htmlFor="oea2exk-1"
+    >
+      <span
+        className="radio-button"
+        id="oea2exk-1-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Radio1
+      </span>
+    </label>
+  </div>
+  <div
+    className="selector"
+  >
+    <input
+      checked={false}
+      disabled={false}
+      id="oea2exk-2"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="Radio2"
+    />
+    <label
+      className=""
+      htmlFor="oea2exk-2"
+    >
+      <span
+        className="radio-button"
+        id="oea2exk-2-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Radio2
+      </span>
+    </label>
+  </div>
+  <div
+    className="selector"
+  >
+    <input
+      checked={false}
+      disabled={false}
+      id="oea2exk-3"
+      name="group"
+      onChange={[Function]}
+      readOnly={true}
+      type="radio"
+      value="Radio3"
+    />
+    <label
+      className=""
+      htmlFor="oea2exk-3"
+    >
+      <span
+        className="radio-button"
+        id="oea2exk-3-custom-radio"
+      />
+      <span
+        className="selector-label"
+      >
+        Radio3
+      </span>
+    </label>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Select/__snapshots__/Select.stories.storyshot b/src/src/components/Select/__snapshots__/Select.stories.storyshot
new file mode 100644
index 000000000..a8e41c498
--- /dev/null
+++ b/src/src/components/Select/__snapshots__/Select.stories.storyshot
@@ -0,0 +1,674 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Select Basic 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
+  >
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch right-icon"
+      >
+        <div
+          className="input-group right-icon"
+        >
+          <input
+            aria-controls="dropdown-22"
+            aria-expanded={false}
+            aria-haspopup={true}
+            autoFocus={false}
+            className="select-input with-icon input-stretch right-icon clear-disabled clear-not-visible"
+            disabled={false}
+            id="input-23"
+            onChange={[Function]}
+            onClick={[Function]}
+            placeholder="Select"
+            readOnly={true}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="text"
+          />
+          <div
+            className="icon-wrapper right-icon"
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Select Disabled 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
+  >
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch right-icon disabled"
+      >
+        <div
+          className="input-group right-icon"
+        >
+          <input
+            aria-controls="dropdown-24"
+            aria-expanded={false}
+            aria-haspopup={true}
+            autoFocus={false}
+            className="select-input with-icon input-stretch right-icon clear-disabled clear-not-visible"
+            disabled={true}
+            id="input-25"
+            onChange={[Function]}
+            onClick={[Function]}
+            placeholder="Select"
+            readOnly={true}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="text"
+          />
+          <div
+            className="icon-wrapper right-icon"
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Select Dynamic 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="select-wrapper"
+  >
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch right-icon"
+      >
+        <div
+          className="input-group right-icon"
+        >
+          <input
+            aria-controls="dropdown-26"
+            aria-expanded={false}
+            aria-haspopup={true}
+            autoFocus={false}
+            className="with-icon input-stretch right-icon clear-disabled clear-not-visible"
+            disabled={false}
+            id="input-27"
+            onChange={[Function]}
+            onClick={[Function]}
+            placeholder="Select"
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="text"
+          />
+          <div
+            className="icon-wrapper right-icon"
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Select Filterable 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
+  >
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch right-icon"
+      >
+        <div
+          className="input-group right-icon"
+        >
+          <input
+            aria-controls="dropdown-28"
+            aria-expanded={false}
+            aria-haspopup={true}
+            autoFocus={false}
+            className="with-icon input-stretch right-icon clear-not-visible"
+            disabled={false}
+            id="input-29"
+            onChange={[Function]}
+            onClick={[Function]}
+            placeholder="Select"
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="text"
+          />
+          <div
+            className="icon-wrapper right-icon"
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Select Multiple 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
+  >
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch right-icon"
+      >
+        <div
+          className="input-group right-icon"
+        >
+          <input
+            aria-controls="dropdown-30"
+            aria-expanded={false}
+            aria-haspopup={true}
+            autoFocus={false}
+            className="with-icon input-stretch right-icon clear-not-visible"
+            disabled={false}
+            id="input-31"
+            onChange={[Function]}
+            onClick={[Function]}
+            placeholder="Select"
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="text"
+          />
+          <div
+            className="icon-wrapper right-icon"
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Select Multiple With No Filter 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
+  >
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch right-icon"
+      >
+        <div
+          className="input-group right-icon"
+        >
+          <input
+            aria-controls="dropdown-32"
+            aria-expanded={false}
+            aria-haspopup={true}
+            autoFocus={false}
+            className="select-input with-icon input-stretch right-icon clear-not-visible"
+            disabled={false}
+            id="input-33"
+            onChange={[Function]}
+            onClick={[Function]}
+            placeholder="Select"
+            readOnly={true}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="text"
+          />
+          <div
+            className="icon-wrapper right-icon"
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Select Options Disabled 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
+  >
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch right-icon"
+      >
+        <div
+          className="input-group right-icon"
+        >
+          <input
+            aria-controls="dropdown-34"
+            aria-expanded={false}
+            aria-haspopup={true}
+            autoFocus={false}
+            className="select-input with-icon input-stretch right-icon clear-disabled clear-not-visible"
+            disabled={false}
+            id="input-35"
+            onChange={[Function]}
+            onClick={[Function]}
+            placeholder="Select"
+            readOnly={true}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="text"
+          />
+          <div
+            className="icon-wrapper right-icon"
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Select With Clear 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
+  >
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch right-icon"
+      >
+        <div
+          className="input-group right-icon"
+        >
+          <input
+            aria-controls="dropdown-36"
+            aria-expanded={false}
+            aria-haspopup={true}
+            autoFocus={false}
+            className="select-input with-icon input-stretch right-icon clear-not-visible"
+            disabled={false}
+            id="input-37"
+            onChange={[Function]}
+            onClick={[Function]}
+            placeholder="Select"
+            readOnly={true}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="text"
+          />
+          <div
+            className="icon-wrapper right-icon"
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Select With Default Value 1`] = `
+<div
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="select-wrapper octuple-select-class"
+    data-test-id="octuple-select-test-id"
+    style={Object {}}
+  >
+    <div
+      className="select-dropdown-main-wrapper main-wrapper"
+    >
+      <div
+        className="input-wrapper input-stretch right-icon"
+      >
+        <div
+          className="input-group right-icon"
+        >
+          <input
+            aria-controls="dropdown-38"
+            aria-expanded={false}
+            aria-haspopup={true}
+            autoFocus={false}
+            className="select-input with-icon input-stretch right-icon clear-disabled clear-not-visible"
+            disabled={false}
+            id="input-39"
+            onChange={[Function]}
+            onClick={[Function]}
+            placeholder="Select"
+            readOnly={true}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="text"
+          />
+          <div
+            className="icon-wrapper right-icon"
+          >
+            <span
+              aria-hidden={false}
+              className="icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "20px",
+                    "width": "20px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Slider/__snapshots__/Slider.stories.storyshot b/src/src/components/Slider/__snapshots__/Slider.stories.storyshot
new file mode 100644
index 000000000..676f90285
--- /dev/null
+++ b/src/src/components/Slider/__snapshots__/Slider.stories.storyshot
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Slider Range Slider 1`] = `
+<div
+  className="slider-container"
+>
+  <div
+    className="slider my-slider"
+  >
+    <div
+      className="slider-rail"
+    />
+    <div
+      className="slider-track"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker active"
+    />
+    <div
+      className="rail-marker active"
+    />
+    <div
+      className="rail-marker active"
+    />
+    <div
+      className="rail-marker active"
+    />
+    <div
+      className="rail-marker active"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <div
+      className="rail-marker"
+    />
+    <input
+      aria-label="Slider"
+      autoFocus={false}
+      className="thumb"
+      disabled={false}
+      id="mySliderId-0"
+      max={200}
+      min={0}
+      name="mySlider-0"
+      onChange={[Function]}
+      step={10}
+      type="range"
+      value={110}
+    />
+    <input
+      aria-label="Slider"
+      autoFocus={false}
+      className="thumb"
+      disabled={false}
+      id="mySliderId-1"
+      max={200}
+      min={0}
+      name="mySlider-1"
+      onChange={[Function]}
+      step={10}
+      type="range"
+      value={150}
+    />
+  </div>
+  <div
+    className="slider-value label-visible"
+  >
+    110
+  </div>
+  <div
+    className="slider-value label-visible"
+  >
+    150
+  </div>
+  <div
+    className="extremity-label min-label"
+  >
+    0
+  </div>
+  <div
+    className="extremity-label max-label"
+  >
+    200
+  </div>
+</div>
+`;
+
+exports[`Storyshots Slider Standard Slider 1`] = `
+<div
+  className="slider-container"
+>
+  <div
+    className="slider my-slider"
+  >
+    <div
+      className="slider-rail"
+    />
+    <div
+      className="slider-track"
+    />
+    <input
+      aria-label="Slider"
+      autoFocus={true}
+      className="thumb"
+      disabled={false}
+      id="mySliderId"
+      max={5}
+      min={1}
+      name="mySlider"
+      onChange={[Function]}
+      step={1}
+      type="range"
+      value={2}
+    />
+  </div>
+  <div
+    className="slider-value"
+  >
+    2
+  </div>
+  <div
+    className="extremity-label min-label"
+  >
+    1
+  </div>
+  <div
+    className="extremity-label max-label"
+  >
+    5
+  </div>
+</div>
+`;
diff --git a/src/src/components/Snackbar/__snapshots__/Snackbar.stories.storyshot b/src/src/components/Snackbar/__snapshots__/Snackbar.stories.storyshot
new file mode 100644
index 000000000..0ab644545
--- /dev/null
+++ b/src/src/components/Snackbar/__snapshots__/Snackbar.stories.storyshot
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Snack Bar Closable 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-default button-size3"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className="button-text3"
+  >
+    Serve closable snack
+  </span>
+</button>
+`;
+
+exports[`Storyshots Snack Bar Default 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-default button-size3"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className="button-text3"
+  >
+    Serve snack
+  </span>
+</button>
+`;
+
+exports[`Storyshots Snack Bar With Action 1`] = `
+<button
+  aria-disabled={false}
+  className="button button-default button-size3"
+  defaultChecked={false}
+  disabled={false}
+  onClick={[Function]}
+>
+  <span
+    className="button-text3"
+  >
+    Serve snack with action
+  </span>
+</button>
+`;
diff --git a/src/src/components/Spinner/__snapshots__/Spinner.stories.storyshot b/src/src/components/Spinner/__snapshots__/Spinner.stories.storyshot
new file mode 100644
index 000000000..d69321b56
--- /dev/null
+++ b/src/src/components/Spinner/__snapshots__/Spinner.stories.storyshot
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Spinner Default 1`] = `
+<span
+  aria-hidden={false}
+  className="spinner my-spinner-class icon-wrapper"
+  role="presentation"
+>
+  <svg
+    role="presentation"
+    style={
+      Object {
+        "height": "48px",
+        "width": "48px",
+      }
+    }
+    viewBox="0 0 24 24"
+  >
+    <style>
+      @keyframes spin { to { transform: rotate(360deg) } }
+    </style>
+    <g
+      style={
+        Object {
+          "animation": "spin linear 0.8s infinite",
+          "transformOrigin": "center",
+        }
+      }
+    >
+      <path
+        d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+        style={
+          Object {
+            "fill": "currentColor",
+          }
+        }
+      />
+      <rect
+        fill="transparent"
+        height="24"
+        width="24"
+      />
+    </g>
+  </svg>
+</span>
+`;
diff --git a/src/src/components/Stack/__snapshots__/Stack.stories.storyshot b/src/src/components/Stack/__snapshots__/Stack.stories.storyshot
new file mode 100644
index 000000000..4216e1828
--- /dev/null
+++ b/src/src/components/Stack/__snapshots__/Stack.stories.storyshot
@@ -0,0 +1,345 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Stack Horizontal 1`] = `
+<div
+  className="stack my-stack-class horizontal m"
+  style={
+    Object {
+      "alignItems": "",
+      "backgroundColor": "aquamarine",
+      "flexWrap": "",
+      "justifyContent": "",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Storyshots Stack Responsive 1`] = `
+<div
+  className="stack my-stack-class vertical l"
+  style={
+    Object {
+      "alignItems": "",
+      "backgroundColor": "aquamarine",
+      "flexWrap": "",
+      "justifyContent": "",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Storyshots Stack Sample Nav List 1`] = `
+<div
+  className="stack nav-list-container horizontal"
+  style={
+    Object {
+      "alignItems": "",
+      "flexWrap": "wrap",
+      "justifyContent": "",
+    }
+  }
+>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+  <div
+    className="stack group vertical m"
+    style={
+      Object {
+        "alignItems": undefined,
+        "flexWrap": undefined,
+        "justifyContent": undefined,
+      }
+    }
+  >
+    <h3>
+      Title
+    </h3>
+    <div
+      className="stack vertical xs"
+      style={
+        Object {
+          "alignItems": undefined,
+          "flexWrap": undefined,
+          "justifyContent": undefined,
+        }
+      }
+    >
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+      <p>
+        subheading
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Stack Vertical 1`] = `
+<div
+  className="stack my-stack-class vertical l"
+  style={
+    Object {
+      "alignItems": "",
+      "backgroundColor": "aquamarine",
+      "flexWrap": "",
+      "justifyContent": "",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "backgroundColor": "mediumpurple",
+        "height": "200px",
+        "width": "200px",
+      }
+    }
+  />
+</div>
+`;
diff --git a/src/src/components/Table/__snapshots__/Table.stories.storyshot b/src/src/components/Table/__snapshots__/Table.stories.storyshot
new file mode 100644
index 000000000..054571964
--- /dev/null
+++ b/src/src/components/Table/__snapshots__/Table.stories.storyshot
@@ -0,0 +1,49692 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Table Basic 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-40"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-41"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Bordered 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-42"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-43"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Cell Bordered 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-cell-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-44"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-45"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Colspan Rows 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={2}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Home phone
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Location
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                123456
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                123456
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Beacon, NY
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                123456
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                123456
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Delhi, Delhi
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={2}
+                style={Object {}}
+              >
+                123456
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                123456
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                New York, NA
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                123456
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Atlanta, GA
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={5}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Ellipsis 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "fixed",
+            }
+          }
+        >
+          <colgroup>
+            <col
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+          </colgroup>
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 3"
+              >
+                Column 3
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 4"
+              >
+                Column 4
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 5"
+              >
+                Column 5
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 6"
+              >
+                Column 6
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 7"
+              >
+                Column 7
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 8"
+              >
+                Column 8
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Beacon, NY"
+              >
+                Beacon, NY
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Beacon, NY"
+              >
+                Beacon, NY
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Beacon, NY"
+              >
+                Beacon, NY
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Beacon, NY"
+              >
+                Beacon, NY
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Beacon, NY"
+              >
+                Beacon, NY
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Beacon, NY"
+              >
+                Beacon, NY
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="New York, NA"
+              >
+                New York, NA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="New York, NA"
+              >
+                New York, NA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="New York, NA"
+              >
+                New York, NA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="New York, NA"
+              >
+                New York, NA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="New York, NA"
+              >
+                New York, NA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="New York, NA"
+              >
+                New York, NA
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Atlanta, GA"
+              >
+                Atlanta, GA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Atlanta, GA"
+              >
+                Atlanta, GA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Atlanta, GA"
+              >
+                Atlanta, GA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Atlanta, GA"
+              >
+                Atlanta, GA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Atlanta, GA"
+              >
+                Atlanta, GA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Atlanta, GA"
+              >
+                Atlanta, GA
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Mumbai, Maharashtra"
+              >
+                Mumbai, Maharashtra
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Mumbai, Maharashtra"
+              >
+                Mumbai, Maharashtra
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Mumbai, Maharashtra"
+              >
+                Mumbai, Maharashtra
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Mumbai, Maharashtra"
+              >
+                Mumbai, Maharashtra
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Mumbai, Maharashtra"
+              >
+                Mumbai, Maharashtra
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Mumbai, Maharashtra"
+              >
+                Mumbai, Maharashtra
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Houston, Texas Area"
+              >
+                Houston, Texas Area
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Houston, Texas Area"
+              >
+                Houston, Texas Area
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Houston, Texas Area"
+              >
+                Houston, Texas Area
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Houston, Texas Area"
+              >
+                Houston, Texas Area
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Houston, Texas Area"
+              >
+                Houston, Texas Area
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Houston, Texas Area"
+              >
+                Houston, Texas Area
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Irvine, CA"
+              >
+                Irvine, CA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Irvine, CA"
+              >
+                Irvine, CA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Irvine, CA"
+              >
+                Irvine, CA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Irvine, CA"
+              >
+                Irvine, CA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Irvine, CA"
+              >
+                Irvine, CA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Irvine, CA"
+              >
+                Irvine, CA
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Bangalore, Karnataka"
+              >
+                Bangalore, Karnataka
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Bangalore, Karnataka"
+              >
+                Bangalore, Karnataka
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Bangalore, Karnataka"
+              >
+                Bangalore, Karnataka
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Bangalore, Karnataka"
+              >
+                Bangalore, Karnataka
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Bangalore, Karnataka"
+              >
+                Bangalore, Karnataka
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Bangalore, Karnataka"
+              >
+                Bangalore, Karnataka
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Delhi, Delhi"
+              >
+                Delhi, Delhi
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Francisco Bay Area"
+              >
+                San Francisco Bay Area
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Francisco Bay Area"
+              >
+                San Francisco Bay Area
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Francisco Bay Area"
+              >
+                San Francisco Bay Area
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Francisco Bay Area"
+              >
+                San Francisco Bay Area
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Francisco Bay Area"
+              >
+                San Francisco Bay Area
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Francisco Bay Area"
+              >
+                San Francisco Bay Area
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Salt Lake City, UT"
+              >
+                Salt Lake City, UT
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Salt Lake City, UT"
+              >
+                Salt Lake City, UT
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Salt Lake City, UT"
+              >
+                Salt Lake City, UT
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Salt Lake City, UT"
+              >
+                Salt Lake City, UT
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Salt Lake City, UT"
+              >
+                Salt Lake City, UT
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Salt Lake City, UT"
+              >
+                Salt Lake City, UT
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="St Louis, MO"
+              >
+                St Louis, MO
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="St Louis, MO"
+              >
+                St Louis, MO
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="St Louis, MO"
+              >
+                St Louis, MO
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="St Louis, MO"
+              >
+                St Louis, MO
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="St Louis, MO"
+              >
+                St Louis, MO
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="St Louis, MO"
+              >
+                St Louis, MO
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Chicago, IL"
+              >
+                Chicago, IL
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Chicago, IL"
+              >
+                Chicago, IL
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Chicago, IL"
+              >
+                Chicago, IL
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Chicago, IL"
+              >
+                Chicago, IL
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Chicago, IL"
+              >
+                Chicago, IL
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Chicago, IL"
+              >
+                Chicago, IL
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="San Diego, USA"
+              >
+                San Diego, USA
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-46"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-47"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Ellipsis With Tooltip 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "fixed",
+            }
+          }
+        >
+          <colgroup>
+            <col
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+          </colgroup>
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 3"
+              >
+                Column 3
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 4"
+              >
+                Column 4
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 5"
+              >
+                Column 5
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 6"
+              >
+                Column 6
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 7"
+              >
+                Column 7
+              </th>
+              <th
+                className="table-cell my-header table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                title="Column 8"
+              >
+                Column 8
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Beacon, NY
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Beacon, NY
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Beacon, NY
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Beacon, NY
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Beacon, NY
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Beacon, NY
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Delhi, Delhi
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Delhi, Delhi
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Delhi, Delhi
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Delhi, Delhi
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Delhi, Delhi
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Delhi, Delhi
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  New York, NA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  New York, NA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  New York, NA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  New York, NA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  New York, NA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  New York, NA
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Atlanta, GA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Atlanta, GA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Atlanta, GA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Atlanta, GA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Atlanta, GA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Atlanta, GA
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  San Diego, USA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  San Diego, USA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  San Diego, USA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  San Diego, USA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  San Diego, USA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  San Diego, USA
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Mumbai, Maharashtra
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Mumbai, Maharashtra
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Mumbai, Maharashtra
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Mumbai, Maharashtra
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Mumbai, Maharashtra
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Mumbai, Maharashtra
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Houston, Texas Area
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Houston, Texas Area
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Houston, Texas Area
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Houston, Texas Area
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Houston, Texas Area
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Houston, Texas Area
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Irvine, CA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Irvine, CA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Irvine, CA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Irvine, CA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Irvine, CA
+                </div>
+              </td>
+              <td
+                className="table-cell table-cell-ellipsis"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="4fzzzxj"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  Irvine, CA
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-48"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-right"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              8 / page
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      Total 16
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      Go to
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-49"
+            maxLength={2}
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Empty 1`] = `
+<div
+  className="table-wrapper"
+>
+  <div
+    className="table table table-alternate table-bordered table-empty"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-placeholder"
+              style={
+                Object {
+                  "display": null,
+                }
+              }
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="empty"
+                >
+                  <div
+                    className="empty-image"
+                  >
+                    <svg
+                      className="empty-data-image-default"
+                      fill="none"
+                      height="184"
+                      viewBox="0 0 200 184"
+                      width="200"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
+                        fill="#EBF7FF"
+                      />
+                      <path
+                        d="M26 108L38.5 59H160.5L174 108V154H26V108Z"
+                        fill="white"
+                      />
+                      <path
+                        clipRule="evenodd"
+                        d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
+                        fill="#B0F3FE"
+                        fillRule="evenodd"
+                      />
+                      <path
+                        clipRule="evenodd"
+                        d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
+                        fill="#8ED0FA"
+                        fillRule="evenodd"
+                      />
+                      <rect
+                        fill="#B0F3FE"
+                        height="40"
+                        rx="6.66667"
+                        width="13.3333"
+                        x="93.334"
+                      />
+                      <rect
+                        fill="#B0F3FE"
+                        height="40"
+                        rx="6.66667"
+                        transform="rotate(-30 46.666 6.66675)"
+                        width="13.3333"
+                        x="46.666"
+                        y="6.66675"
+                      />
+                      <rect
+                        fill="#B0F3FE"
+                        height="40"
+                        rx="6.66667"
+                        transform="rotate(30 141.666 0)"
+                        width="13.3333"
+                        x="141.666"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    className="empty-title"
+                  >
+                    Short Message Here
+                  </div>
+                  <div
+                    className="empty-description"
+                  >
+                    More detail on how might the user be able to get around this
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Expandable Row 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup>
+            <col
+              className="table-expand-icon-col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+          </colgroup>
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-spaced"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-52"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-53"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Filter 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="table-filter-column"
+                >
+                  <span
+                    className="table-column-title"
+                  >
+                    Profile
+                  </span>
+                  <div
+                    className="main-wrapper"
+                  >
+                    <button
+                      aria-controls="dropdown-54"
+                      aria-disabled={false}
+                      aria-expanded={false}
+                      aria-haspopup={true}
+                      className="button button-neutral button-size3 icon-left"
+                      defaultChecked={false}
+                      disabled={false}
+                      onClick={[Function]}
+                      role="button"
+                      tabIndex="0"
+                    >
+                      <span
+                        aria-hidden={false}
+                        className="icon icon-wrapper"
+                        role="presentation"
+                      >
+                        <svg
+                          role="presentation"
+                          style={
+                            Object {
+                              "height": "16px",
+                              "width": "16px",
+                            }
+                          }
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
+                            style={
+                              Object {
+                                "fill": "currentColor",
+                              }
+                            }
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-55"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-56"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Fixed Columns 1`] = `
+<div
+  style={
+    Object {
+      "height": 2000,
+      "width": 900,
+    }
+  }
+>
+  <div
+    className="table-wrapper my-table-class"
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      className="table table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right table table-alternate table-bordered"
+      id="myTableId"
+    >
+      <div
+        className="table-container"
+      >
+        <div
+          className="table-content"
+          onScroll={[Function]}
+          style={
+            Object {
+              "overflow": "overlay",
+              "overflowY": "hidden",
+            }
+          }
+        >
+          <table
+            style={
+              Object {
+                "minWidth": "100%",
+                "tableLayout": "fixed",
+                "width": 900,
+              }
+            }
+          >
+            <colgroup>
+              <col
+                style={
+                  Object {
+                    "width": 144,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 320,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 72,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 88,
+                  }
+                }
+              />
+            </colgroup>
+            <thead
+              className="table-thead"
+            >
+              <tr>
+                <th
+                  className="table-cell my-header table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Role
+                </th>
+                <th
+                  className="table-cell my-header table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Profile
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Level
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 3
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 4
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 5
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 6
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 7
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 8
+                </th>
+                <th
+                  className="table-cell my-header table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  Action
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              className="table-tbody"
+            >
+              <tr
+                aria-hidden="true"
+                className="table-measure-row"
+                style={
+                  Object {
+                    "fontSize": 0,
+                    "height": 0,
+                  }
+                }
+              >
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="1"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Senior Sales Engineer
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      AM
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Anamika Musafir
+                      </a>
+                      Beacon, NY
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  78
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="2"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      CG
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Chandra Garg
+                      </a>
+                      Delhi, Delhi
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  86
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="3"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Regional Sales VP
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      CF
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Clarey Fike
+                      </a>
+                      New York, NA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  95
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="4"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Director
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      CD
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Cobbey Deevey
+                      </a>
+                      Atlanta, GA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  66
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="5"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Engineer Manager
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      DS
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Dave Shaw
+                      </a>
+                      San Diego, USA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  72
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="6"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      FA
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Farida Ashfaq
+                      </a>
+                      Mumbai, Maharashtra
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  97
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="7"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Engineer
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      FB
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Frank Baptist
+                      </a>
+                      Houston, Texas Area
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  87
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="8"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Engineer
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      JF
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Jerome Feng
+                      </a>
+                      Irvine, CA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  88
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="9"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      JT
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Julie Tharoor
+                      </a>
+                      Bangalore, Karnataka
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  52
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="10"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      NG
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Nikita Gagan
+                      </a>
+                      Delhi, Delhi
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  97
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="11"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Representative
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      PR
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Peter Rege
+                      </a>
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  97
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="12"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Senior Sales Engineer
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      RR
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Revathi Roy
+                      </a>
+                      San Francisco Bay Area
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  74
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="13"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Account Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      UL
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Urbanus Laurens
+                      </a>
+                      Salt Lake City, UT
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  76
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="14"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Senior Account Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      VR
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Vance Renner
+                      </a>
+                      St Louis, MO
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  90
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="15"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Manager
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      ZG
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Zarla Greener
+                      </a>
+                      Chicago, IL
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  79
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="16"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Engineer Manager
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      DS
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Dave Doe
+                      </a>
+                      San Diego, USA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  72
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div
+      className="table-pagination table-pagination-right pagination"
+      position={
+        Array [
+          "none",
+          "bottomRight",
+        ]
+      }
+    >
+      <span
+        className="sizes"
+      >
+        <div
+          className="main-wrapper"
+        >
+          <button
+            aria-controls="dropdown-57"
+            aria-disabled={false}
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Selected page size"
+            className="button button-default button-size3 icon-left"
+            defaultChecked={false}
+            disabled={false}
+            onClick={[Function]}
+            role="button"
+            tabIndex="0"
+          >
+            <span>
+              <span
+                aria-hidden={false}
+                className="icon icon-wrapper"
+                role="presentation"
+              >
+                <svg
+                  role="presentation"
+                  style={
+                    Object {
+                      "height": "16px",
+                      "width": "16px",
+                    }
+                  }
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                    style={
+                      Object {
+                        "fill": "currentColor",
+                      }
+                    }
+                  />
+                </svg>
+              </span>
+              <span
+                className="button-text3"
+              >
+                page / 10
+              </span>
+            </span>
+          </button>
+        </div>
+      </span>
+      <span
+        className="total"
+      >
+        16 Total
+      </span>
+      <button
+        aria-disabled={false}
+        aria-label="Previous"
+        className="pagination-button button button-default button-size3 icon-left disabled"
+        defaultChecked={false}
+        disabled={true}
+        onClick={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+      <ul
+        className="pager"
+      >
+        <li>
+          <button
+            aria-checked={true}
+            aria-disabled={false}
+            aria-pressed={true}
+            className="pagination-button active button button-default button-size3"
+            defaultChecked={true}
+            disabled={false}
+            onClick={[Function]}
+          >
+            <span
+              className="button-text3"
+            >
+              1
+            </span>
+          </button>
+        </li>
+        <li>
+          <button
+            aria-checked={false}
+            aria-disabled={false}
+            aria-pressed={false}
+            className="pagination-button button button-default button-size3"
+            defaultChecked={false}
+            disabled={false}
+            onClick={[Function]}
+          >
+            <span
+              className="button-text3"
+            >
+              0
+            </span>
+          </button>
+        </li>
+        <li>
+          <button
+            aria-checked={false}
+            aria-disabled={false}
+            aria-pressed={false}
+            className="pagination-button button button-default button-size3"
+            defaultChecked={false}
+            disabled={false}
+            onClick={[Function]}
+          >
+            <span
+              className="button-text3"
+            >
+              2
+            </span>
+          </button>
+        </li>
+      </ul>
+      <button
+        aria-disabled={false}
+        aria-label="Next"
+        className="pagination-button button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+      <span
+        className="jump"
+      >
+        <div
+          className="input-wrapper left-icon"
+        >
+          <div
+            className="input-group left-icon"
+          >
+            <input
+              autoFocus={false}
+              className="editor left-icon clear-not-visible"
+              defaultValue={1}
+              disabled={false}
+              id="input-58"
+              minLength={1}
+              onChange={[Function]}
+              readOnly={false}
+              required={false}
+              role="textbox"
+              tabIndex={0}
+              type="number"
+            />
+          </div>
+        </div>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Fixed Columns And Header 1`] = `
+<div
+  style={
+    Object {
+      "height": 2000,
+      "width": 900,
+    }
+  }
+>
+  <div
+    className="table-wrapper my-table-class"
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      className="table table-fixed-header table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right table table-alternate table-bordered"
+      id="myTableId"
+    >
+      <div
+        className="table-container"
+      >
+        <div
+          className="table-header table-sticky-holder"
+          style={
+            Object {
+              "bottom": undefined,
+              "overflow": "hidden",
+              "top": 0,
+            }
+          }
+        >
+          <table
+            style={
+              Object {
+                "tableLayout": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <colgroup />
+            <thead
+              className="table-thead"
+            >
+              <tr>
+                <th
+                  className="table-cell my-header table-cell-fix-left table-cell-fix-sticky"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Role
+                </th>
+                <th
+                  className="table-cell my-header table-cell-fix-left table-cell-fix-left-last table-cell-fix-sticky"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Profile
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Level
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 3
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 4
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 5
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 6
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 7
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Column 8
+                </th>
+                <th
+                  className="table-cell my-header table-cell-fix-right table-cell-fix-right-first table-cell-fix-sticky"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  Action
+                </th>
+              </tr>
+            </thead>
+          </table>
+        </div>
+        <div
+          className="table-body"
+          onScroll={[Function]}
+          style={
+            Object {
+              "maxHeight": 320,
+              "overflow": "overlay",
+            }
+          }
+        >
+          <table
+            style={
+              Object {
+                "minWidth": "100%",
+                "tableLayout": "fixed",
+                "width": 900,
+              }
+            }
+          >
+            <colgroup>
+              <col
+                style={
+                  Object {
+                    "width": 144,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 320,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 72,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 124,
+                  }
+                }
+              />
+              <col
+                style={
+                  Object {
+                    "width": 88,
+                  }
+                }
+              />
+            </colgroup>
+            <tbody
+              className="table-tbody"
+            >
+              <tr
+                aria-hidden="true"
+                className="table-measure-row"
+                style={
+                  Object {
+                    "fontSize": 0,
+                    "height": 0,
+                  }
+                }
+              >
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="1"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Senior Sales Engineer
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      AM
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Anamika Musafir
+                      </a>
+                      Beacon, NY
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  78
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Beacon, NY
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="2"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      CG
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Chandra Garg
+                      </a>
+                      Delhi, Delhi
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  86
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="3"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Regional Sales VP
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      CF
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Clarey Fike
+                      </a>
+                      New York, NA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  95
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  New York, NA
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="4"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Director
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      CD
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Cobbey Deevey
+                      </a>
+                      Atlanta, GA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  66
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Atlanta, GA
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="5"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Engineer Manager
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      DS
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Dave Shaw
+                      </a>
+                      San Diego, USA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  72
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="6"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      FA
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Farida Ashfaq
+                      </a>
+                      Mumbai, Maharashtra
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  97
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Mumbai, Maharashtra
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="7"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Engineer
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      FB
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Frank Baptist
+                      </a>
+                      Houston, Texas Area
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  87
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Houston, Texas Area
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="8"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Engineer
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      JF
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Jerome Feng
+                      </a>
+                      Irvine, CA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  88
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Irvine, CA
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="9"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      JT
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Julie Tharoor
+                      </a>
+                      Bangalore, Karnataka
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  52
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Bangalore, Karnataka
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="10"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      NG
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Nikita Gagan
+                      </a>
+                      Delhi, Delhi
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  97
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Delhi, Delhi
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="11"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Representative
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      PR
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Peter Rege
+                      </a>
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  97
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                />
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="12"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Senior Sales Engineer
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      RR
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Revathi Roy
+                      </a>
+                      San Francisco Bay Area
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  74
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Francisco Bay Area
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="13"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Account Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      UL
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Urbanus Laurens
+                      </a>
+                      Salt Lake City, UT
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  76
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Salt Lake City, UT
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="14"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Senior Account Executive
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      VR
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Vance Renner
+                      </a>
+                      St Louis, MO
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  90
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  St Louis, MO
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="15"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Manager
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      ZG
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Zarla Greener
+                      </a>
+                      Chicago, IL
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  79
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Chicago, IL
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="16"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell table-cell-fix-left"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  Sales Engineer Manager
+                </td>
+                <td
+                  className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "left": 0,
+                      "position": "sticky",
+                    }
+                  }
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      DS
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Dave Doe
+                      </a>
+                      San Diego, USA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  72
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  San Diego, USA
+                </td>
+                <td
+                  className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={
+                    Object {
+                      "position": "sticky",
+                      "right": 0,
+                    }
+                  }
+                >
+                  <a
+                    className="link-style primary"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div
+      className="table-pagination table-pagination-right pagination"
+      position={
+        Array [
+          "none",
+          "bottomRight",
+        ]
+      }
+    >
+      <span
+        className="sizes"
+      >
+        <div
+          className="main-wrapper"
+        >
+          <button
+            aria-controls="dropdown-59"
+            aria-disabled={false}
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Selected page size"
+            className="button button-default button-size3 icon-left"
+            defaultChecked={false}
+            disabled={false}
+            onClick={[Function]}
+            role="button"
+            tabIndex="0"
+          >
+            <span>
+              <span
+                aria-hidden={false}
+                className="icon icon-wrapper"
+                role="presentation"
+              >
+                <svg
+                  role="presentation"
+                  style={
+                    Object {
+                      "height": "16px",
+                      "width": "16px",
+                    }
+                  }
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                    style={
+                      Object {
+                        "fill": "currentColor",
+                      }
+                    }
+                  />
+                </svg>
+              </span>
+              <span
+                className="button-text3"
+              >
+                page / 10
+              </span>
+            </span>
+          </button>
+        </div>
+      </span>
+      <span
+        className="total"
+      >
+        16 Total
+      </span>
+      <button
+        aria-disabled={false}
+        aria-label="Previous"
+        className="pagination-button button button-default button-size3 icon-left disabled"
+        defaultChecked={false}
+        disabled={true}
+        onClick={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+      <ul
+        className="pager"
+      >
+        <li>
+          <button
+            aria-checked={true}
+            aria-disabled={false}
+            aria-pressed={true}
+            className="pagination-button active button button-default button-size3"
+            defaultChecked={true}
+            disabled={false}
+            onClick={[Function]}
+          >
+            <span
+              className="button-text3"
+            >
+              1
+            </span>
+          </button>
+        </li>
+        <li>
+          <button
+            aria-checked={false}
+            aria-disabled={false}
+            aria-pressed={false}
+            className="pagination-button button button-default button-size3"
+            defaultChecked={false}
+            disabled={false}
+            onClick={[Function]}
+          >
+            <span
+              className="button-text3"
+            >
+              0
+            </span>
+          </button>
+        </li>
+        <li>
+          <button
+            aria-checked={false}
+            aria-disabled={false}
+            aria-pressed={false}
+            className="pagination-button button button-default button-size3"
+            defaultChecked={false}
+            disabled={false}
+            onClick={[Function]}
+          >
+            <span
+              className="button-text3"
+            >
+              2
+            </span>
+          </button>
+        </li>
+      </ul>
+      <button
+        aria-disabled={false}
+        aria-label="Next"
+        className="pagination-button button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+      <span
+        className="jump"
+      >
+        <div
+          className="input-wrapper left-icon"
+        >
+          <div
+            className="input-group left-icon"
+          >
+            <input
+              autoFocus={false}
+              className="editor left-icon clear-not-visible"
+              defaultValue={1}
+              disabled={false}
+              id="input-60"
+              minLength={1}
+              onChange={[Function]}
+              readOnly={false}
+              required={false}
+              role="textbox"
+              tabIndex={0}
+              type="number"
+            />
+          </div>
+        </div>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Fixed Header 1`] = `
+<div
+  style={
+    Object {
+      "height": 2000,
+      "width": 900,
+    }
+  }
+>
+  <div
+    className="table-wrapper my-table-class"
+  >
+    <div
+      className="table table-fixed-header table table-alternate table-bordered"
+      id="myTableId"
+    >
+      <div
+        className="table-container"
+      >
+        <div
+          className="table-header table-sticky-holder"
+          style={
+            Object {
+              "bottom": undefined,
+              "overflow": "hidden",
+              "top": 0,
+            }
+          }
+        >
+          <table
+            style={
+              Object {
+                "tableLayout": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <colgroup />
+            <thead
+              className="table-thead"
+            >
+              <tr>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Role
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Profile
+                </th>
+                <th
+                  className="table-cell my-header"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Level
+                </th>
+              </tr>
+            </thead>
+          </table>
+        </div>
+        <div
+          className="table-body"
+          onScroll={[Function]}
+          style={
+            Object {
+              "maxHeight": 320,
+              "overflow": "overlay",
+            }
+          }
+        >
+          <table
+            style={
+              Object {
+                "tableLayout": "fixed",
+              }
+            }
+          >
+            <colgroup />
+            <tbody
+              className="table-tbody"
+            >
+              <tr
+                aria-hidden="true"
+                className="table-measure-row"
+                style={
+                  Object {
+                    "fontSize": 0,
+                    "height": 0,
+                  }
+                }
+              >
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+                <td
+                  style={
+                    Object {
+                      "border": 0,
+                      "height": 0,
+                      "padding": 0,
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "height": 0,
+                        "overflow": "hidden",
+                      }
+                    }
+                  >
+                     
+                  </div>
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="1"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Senior Sales Engineer
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      AM
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Anamika Musafir
+                      </a>
+                      Beacon, NY
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  78
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="2"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      CG
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Chandra Garg
+                      </a>
+                      Delhi, Delhi
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  86
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="3"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Regional Sales VP
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      CF
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Clarey Fike
+                      </a>
+                      New York, NA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  95
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="4"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Director
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      CD
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Cobbey Deevey
+                      </a>
+                      Atlanta, GA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  66
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="5"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Engineer Manager
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      DS
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Dave Shaw
+                      </a>
+                      San Diego, USA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  72
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="6"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      FA
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Farida Ashfaq
+                      </a>
+                      Mumbai, Maharashtra
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  97
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="7"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Engineer
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      FB
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Frank Baptist
+                      </a>
+                      Houston, Texas Area
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  87
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="8"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Engineer
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      JF
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Jerome Feng
+                      </a>
+                      Irvine, CA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  88
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="9"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      JT
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Julie Tharoor
+                      </a>
+                      Bangalore, Karnataka
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  52
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="10"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Executive
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      NG
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Nikita Gagan
+                      </a>
+                      Delhi, Delhi
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  97
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="11"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Representative
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      PR
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Peter Rege
+                      </a>
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  97
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="12"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Senior Sales Engineer
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      RR
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Revathi Roy
+                      </a>
+                      San Francisco Bay Area
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  74
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="13"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Account Executive
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      UL
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Urbanus Laurens
+                      </a>
+                      Salt Lake City, UT
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  76
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="14"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Senior Account Executive
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      VR
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Vance Renner
+                      </a>
+                      St Louis, MO
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  90
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="15"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Manager
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      ZG
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Zarla Greener
+                      </a>
+                      Chicago, IL
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  79
+                </td>
+              </tr>
+              <tr
+                className="table-row table-row-level-0"
+                data-row-key="16"
+                onClick={[Function]}
+                style={Object {}}
+              >
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  Sales Engineer Manager
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  <div
+                    className="stack horizontal s"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <div
+                      className="wrapper-style image-style round-image green"
+                      style={
+                        Object {
+                          "fontSize": "18px",
+                          "height": "32px",
+                          "minHeight": "32px",
+                          "minWidth": "32px",
+                          "width": "32px",
+                        }
+                      }
+                    >
+                      DS
+                    </div>
+                    <div
+                      className="stack vertical xxs"
+                      style={
+                        Object {
+                          "alignItems": undefined,
+                          "flexWrap": undefined,
+                          "justifyContent": undefined,
+                        }
+                      }
+                    >
+                      <a
+                        className="link-style primary"
+                        target="_self"
+                      >
+                        Dave Doe
+                      </a>
+                      San Diego, USA
+                    </div>
+                  </div>
+                </td>
+                <td
+                  className="table-cell"
+                  colSpan={null}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  rowSpan={null}
+                  style={Object {}}
+                >
+                  72
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div
+      className="table-pagination table-pagination-right pagination"
+      position={
+        Array [
+          "none",
+          "bottomRight",
+        ]
+      }
+    >
+      <span
+        className="sizes"
+      >
+        <div
+          className="main-wrapper"
+        >
+          <button
+            aria-controls="dropdown-61"
+            aria-disabled={false}
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Selected page size"
+            className="button button-default button-size3 icon-left"
+            defaultChecked={false}
+            disabled={false}
+            onClick={[Function]}
+            role="button"
+            tabIndex="0"
+          >
+            <span>
+              <span
+                aria-hidden={false}
+                className="icon icon-wrapper"
+                role="presentation"
+              >
+                <svg
+                  role="presentation"
+                  style={
+                    Object {
+                      "height": "16px",
+                      "width": "16px",
+                    }
+                  }
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                    style={
+                      Object {
+                        "fill": "currentColor",
+                      }
+                    }
+                  />
+                </svg>
+              </span>
+              <span
+                className="button-text3"
+              >
+                page / 10
+              </span>
+            </span>
+          </button>
+        </div>
+      </span>
+      <span
+        className="total"
+      >
+        16 Total
+      </span>
+      <button
+        aria-disabled={false}
+        aria-label="Previous"
+        className="pagination-button button button-default button-size3 icon-left disabled"
+        defaultChecked={false}
+        disabled={true}
+        onClick={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+      <ul
+        className="pager"
+      >
+        <li>
+          <button
+            aria-checked={true}
+            aria-disabled={false}
+            aria-pressed={true}
+            className="pagination-button active button button-default button-size3"
+            defaultChecked={true}
+            disabled={false}
+            onClick={[Function]}
+          >
+            <span
+              className="button-text3"
+            >
+              1
+            </span>
+          </button>
+        </li>
+        <li>
+          <button
+            aria-checked={false}
+            aria-disabled={false}
+            aria-pressed={false}
+            className="pagination-button button button-default button-size3"
+            defaultChecked={false}
+            disabled={false}
+            onClick={[Function]}
+          >
+            <span
+              className="button-text3"
+            >
+              0
+            </span>
+          </button>
+        </li>
+        <li>
+          <button
+            aria-checked={false}
+            aria-disabled={false}
+            aria-pressed={false}
+            className="pagination-button button button-default button-size3"
+            defaultChecked={false}
+            disabled={false}
+            onClick={[Function]}
+          >
+            <span
+              className="button-text3"
+            >
+              2
+            </span>
+          </button>
+        </li>
+      </ul>
+      <button
+        aria-disabled={false}
+        aria-label="Next"
+        className="pagination-button button button-default button-size3 icon-left"
+        defaultChecked={false}
+        disabled={false}
+        onClick={[Function]}
+      >
+        <span
+          aria-hidden={false}
+          className="icon icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style={
+              Object {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+              style={
+                Object {
+                  "fill": "currentColor",
+                }
+              }
+            />
+          </svg>
+        </span>
+      </button>
+      <span
+        className="jump"
+      >
+        <div
+          className="input-wrapper left-icon"
+        >
+          <div
+            className="input-group left-icon"
+          >
+            <input
+              autoFocus={false}
+              className="editor left-icon clear-not-visible"
+              defaultValue={1}
+              disabled={false}
+              id="input-62"
+              minLength={1}
+              onChange={[Function]}
+              readOnly={false}
+              required={false}
+              role="textbox"
+              tabIndex={0}
+              type="number"
+            />
+          </div>
+        </div>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Header And Footer 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-title"
+    >
+      Header
+    </div>
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div
+      className="table-footer"
+    >
+      Footer
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-63"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-64"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Header Bordered 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-header-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-65"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-66"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Header Grouping 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={
+          Object {
+            "overflow": "overlay",
+            "overflowY": "hidden",
+          }
+        }
+      >
+        <table
+          style={
+            Object {
+              "minWidth": "100%",
+              "tableLayout": "fixed",
+              "width": 900,
+            }
+          }
+        >
+          <colgroup>
+            <col
+              style={
+                Object {
+                  "width": 144,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 320,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 72,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 128,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 128,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 128,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 128,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 128,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 128,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 88,
+                }
+              }
+            />
+          </colgroup>
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={2}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={2}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={2}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                Level
+              </th>
+              <th
+                className="table-cell grouped-th my-header"
+                colSpan={2}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Pipeline
+              </th>
+              <th
+                className="table-cell grouped-th my-header"
+                colSpan={4}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Plan
+              </th>
+              <th
+                className="table-cell my-header table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={2}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                Action
+              </th>
+            </tr>
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Grouped 1
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Grouped 2
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Grouped 5
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Grouped 6
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Grouped 7
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Grouped 8
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              aria-hidden="true"
+              className="table-measure-row"
+              style={
+                Object {
+                  "fontSize": 0,
+                  "height": 0,
+                }
+              }
+            >
+              <td
+                style={
+                  Object {
+                    "border": 0,
+                    "height": 0,
+                    "padding": 0,
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "overflow": "hidden",
+                    }
+                  }
+                >
+                   
+                </div>
+              </td>
+              <td
+                style={
+                  Object {
+                    "border": 0,
+                    "height": 0,
+                    "padding": 0,
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "overflow": "hidden",
+                    }
+                  }
+                >
+                   
+                </div>
+              </td>
+              <td
+                style={
+                  Object {
+                    "border": 0,
+                    "height": 0,
+                    "padding": 0,
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "overflow": "hidden",
+                    }
+                  }
+                >
+                   
+                </div>
+              </td>
+              <td
+                style={
+                  Object {
+                    "border": 0,
+                    "height": 0,
+                    "padding": 0,
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "overflow": "hidden",
+                    }
+                  }
+                >
+                   
+                </div>
+              </td>
+              <td
+                style={
+                  Object {
+                    "border": 0,
+                    "height": 0,
+                    "padding": 0,
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "overflow": "hidden",
+                    }
+                  }
+                >
+                   
+                </div>
+              </td>
+              <td
+                style={
+                  Object {
+                    "border": 0,
+                    "height": 0,
+                    "padding": 0,
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "overflow": "hidden",
+                    }
+                  }
+                >
+                   
+                </div>
+              </td>
+              <td
+                style={
+                  Object {
+                    "border": 0,
+                    "height": 0,
+                    "padding": 0,
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "overflow": "hidden",
+                    }
+                  }
+                >
+                   
+                </div>
+              </td>
+              <td
+                style={
+                  Object {
+                    "border": 0,
+                    "height": 0,
+                    "padding": 0,
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "overflow": "hidden",
+                    }
+                  }
+                >
+                   
+                </div>
+              </td>
+              <td
+                style={
+                  Object {
+                    "border": 0,
+                    "height": 0,
+                    "padding": 0,
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "overflow": "hidden",
+                    }
+                  }
+                >
+                   
+                </div>
+              </td>
+              <td
+                style={
+                  Object {
+                    "border": 0,
+                    "height": 0,
+                    "padding": 0,
+                  }
+                }
+              >
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "overflow": "hidden",
+                    }
+                  }
+                >
+                   
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                78
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                86
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                95
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                66
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                72
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                97
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                87
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                88
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                52
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                97
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                97
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                74
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                76
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                90
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                79
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-fix-left"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell table-cell-fix-left table-cell-fix-left-last"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "left": 0,
+                    "position": "sticky",
+                  }
+                }
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "textAlign": "center",
+                  }
+                }
+              >
+                72
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              />
+              <td
+                className="table-cell table-cell-fix-right table-cell-fix-right-first"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={
+                  Object {
+                    "position": "sticky",
+                    "right": 0,
+                  }
+                }
+              >
+                <a
+                  className="link-style primary"
+                  target="_self"
+                >
+                  Action
+                </a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-67"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-68"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Inner Bordered 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-inner-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-69"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-70"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Large 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-71"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-72"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Medium 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-medium table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-73"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-74"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Nested 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup>
+            <col
+              className="table-expand-icon-col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+          </colgroup>
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-75"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-76"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Order Select And Expand Column 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup>
+            <col
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+            <col
+              className="table-expand-icon-col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+            <col
+              className="table-selection-col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+          </colgroup>
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="table-selection-column"
+                >
+                  <div
+                    className="selector selection-checkbox"
+                  >
+                    <input
+                      checked={false}
+                      disabled={false}
+                      id="selectCheckBox"
+                      onChange={[Function]}
+                      readOnly={true}
+                      type="checkbox"
+                    />
+                    <label
+                      className=""
+                      htmlFor="selectCheckBox"
+                    >
+                      <span
+                        className="checkmark"
+                      />
+                      <span
+                        className="selector-label"
+                      />
+                    </label>
+                  </div>
+                </div>
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={true}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-spaced"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-77"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-78"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Outer Bordered 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-outer-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-79"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-80"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Responsive 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role (Show always)
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-81"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-82"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Row Bordered 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-row-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-83"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-84"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Selection 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup>
+            <col
+              className="table-selection-col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+          </colgroup>
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="table-selection-column"
+                >
+                  <div
+                    className="selector selection-checkbox"
+                  >
+                    <input
+                      checked={false}
+                      disabled={false}
+                      id="selectCheckBox"
+                      onChange={[Function]}
+                      readOnly={true}
+                      type="checkbox"
+                    />
+                    <label
+                      className=""
+                      htmlFor="selectCheckBox"
+                    >
+                      <span
+                        className="checkmark"
+                      />
+                      <span
+                        className="selector-label"
+                      />
+                    </label>
+                  </div>
+                </div>
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={true}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="selector selection-checkbox"
+                >
+                  <input
+                    checked={false}
+                    disabled={false}
+                    id="selectCheckBox"
+                    onChange={[Function]}
+                    readOnly={true}
+                    type="checkbox"
+                  />
+                  <label
+                    className=""
+                    htmlFor="selectCheckBox"
+                  >
+                    <span
+                      className="checkmark"
+                    />
+                    <span
+                      className="selector-label"
+                    />
+                  </label>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-85"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-86"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Small 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-small table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-87"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-88"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Sort 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header table-column-has-sorters"
+                colSpan={null}
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                tabIndex={0}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="sortTip"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  <div
+                    className="table-column-sorters"
+                  >
+                    <span
+                      className="table-column-title"
+                    >
+                      Level
+                    </span>
+                    <span
+                      className="table-column-sorter table-column-sorter-full"
+                    >
+                      <span
+                        className="table-column-sorter-inner"
+                      >
+                        <span
+                          aria-hidden={false}
+                          className="table-column-sorter-up icon-wrapper"
+                          role="presentation"
+                        >
+                          <svg
+                            role="presentation"
+                            style={
+                              Object {
+                                "height": "16px",
+                                "width": "16px",
+                              }
+                            }
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                              style={
+                                Object {
+                                  "fill": "currentColor",
+                                }
+                              }
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          aria-hidden={false}
+                          className="table-column-sorter-down icon-wrapper"
+                          role="presentation"
+                        >
+                          <svg
+                            role="presentation"
+                            style={
+                              Object {
+                                "height": "16px",
+                                "width": "16px",
+                              }
+                            }
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                              style={
+                                Object {
+                                  "fill": "currentColor",
+                                }
+                              }
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-89"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-90"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Sort Multiple 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header table-column-has-sorters"
+                colSpan={null}
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                tabIndex={0}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="sortTip"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  <div
+                    className="table-column-sorters"
+                  >
+                    <span
+                      className="table-column-title"
+                    >
+                      Role
+                    </span>
+                    <span
+                      className="table-column-sorter table-column-sorter-full"
+                    >
+                      <span
+                        className="table-column-sorter-inner"
+                      >
+                        <span
+                          aria-hidden={false}
+                          className="table-column-sorter-up icon-wrapper"
+                          role="presentation"
+                        >
+                          <svg
+                            role="presentation"
+                            style={
+                              Object {
+                                "height": "16px",
+                                "width": "16px",
+                              }
+                            }
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                              style={
+                                Object {
+                                  "fill": "currentColor",
+                                }
+                              }
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          aria-hidden={false}
+                          className="table-column-sorter-down icon-wrapper"
+                          role="presentation"
+                        >
+                          <svg
+                            role="presentation"
+                            style={
+                              Object {
+                                "height": "16px",
+                                "width": "16px",
+                              }
+                            }
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                              style={
+                                Object {
+                                  "fill": "currentColor",
+                                }
+                              }
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </th>
+              <th
+                className="table-cell my-header table-column-has-sorters"
+                colSpan={null}
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                tabIndex={0}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="sortTip"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  <div
+                    className="table-column-sorters"
+                  >
+                    <span
+                      className="table-column-title"
+                    >
+                      Profile
+                    </span>
+                    <span
+                      className="table-column-sorter table-column-sorter-full"
+                    >
+                      <span
+                        className="table-column-sorter-inner"
+                      >
+                        <span
+                          aria-hidden={false}
+                          className="table-column-sorter-up icon-wrapper"
+                          role="presentation"
+                        >
+                          <svg
+                            role="presentation"
+                            style={
+                              Object {
+                                "height": "16px",
+                                "width": "16px",
+                              }
+                            }
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                              style={
+                                Object {
+                                  "fill": "currentColor",
+                                }
+                              }
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          aria-hidden={false}
+                          className="table-column-sorter-down icon-wrapper"
+                          role="presentation"
+                        >
+                          <svg
+                            role="presentation"
+                            style={
+                              Object {
+                                "height": "16px",
+                                "width": "16px",
+                              }
+                            }
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                              style={
+                                Object {
+                                  "fill": "currentColor",
+                                }
+                              }
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </th>
+              <th
+                className="table-cell my-header table-column-has-sorters"
+                colSpan={null}
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+                tabIndex={0}
+              >
+                <div
+                  className="reference-wrapper"
+                  id="sortTip"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                >
+                  <div
+                    className="table-column-sorters"
+                  >
+                    <span
+                      className="table-column-title"
+                    >
+                      Level
+                    </span>
+                    <span
+                      className="table-column-sorter table-column-sorter-full"
+                    >
+                      <span
+                        className="table-column-sorter-inner"
+                      >
+                        <span
+                          aria-hidden={false}
+                          className="table-column-sorter-up icon-wrapper"
+                          role="presentation"
+                        >
+                          <svg
+                            role="presentation"
+                            style={
+                              Object {
+                                "height": "16px",
+                                "width": "16px",
+                              }
+                            }
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                              style={
+                                Object {
+                                  "fill": "currentColor",
+                                }
+                              }
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          aria-hidden={false}
+                          className="table-column-sorter-down icon-wrapper"
+                          role="presentation"
+                        >
+                          <svg
+                            role="presentation"
+                            style={
+                              Object {
+                                "height": "16px",
+                                "width": "16px",
+                              }
+                            }
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+                              style={
+                                Object {
+                                  "fill": "currentColor",
+                                }
+                              }
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-91"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-92"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Summary 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup />
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Profile
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="1"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    AM
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Anamika Musafir
+                    </a>
+                    Beacon, NY
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="2"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Chandra Garg
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                86
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="3"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Regional Sales VP
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Clarey Fike
+                    </a>
+                    New York, NA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                95
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="4"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Director
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    CD
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Cobbey Deevey
+                    </a>
+                    Atlanta, GA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                66
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="5"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Shaw
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="6"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FA
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Farida Ashfaq
+                    </a>
+                    Mumbai, Maharashtra
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="7"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    FB
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Frank Baptist
+                    </a>
+                    Houston, Texas Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                87
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="8"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JF
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Jerome Feng
+                    </a>
+                    Irvine, CA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                88
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="9"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    JT
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Julie Tharoor
+                    </a>
+                    Bangalore, Karnataka
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                52
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="10"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    NG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Nikita Gagan
+                    </a>
+                    Delhi, Delhi
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="11"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Representative
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    PR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Peter Rege
+                    </a>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                97
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="12"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    RR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Revathi Roy
+                    </a>
+                    San Francisco Bay Area
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                74
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="13"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    UL
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Urbanus Laurens
+                    </a>
+                    Salt Lake City, UT
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                76
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="14"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Senior Account Executive
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    VR
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Vance Renner
+                    </a>
+                    St Louis, MO
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                90
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="15"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    ZG
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Zarla Greener
+                    </a>
+                    Chicago, IL
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                79
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key="16"
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <div
+                  className="stack horizontal s"
+                  style={
+                    Object {
+                      "alignItems": undefined,
+                      "flexWrap": undefined,
+                      "justifyContent": undefined,
+                    }
+                  }
+                >
+                  <div
+                    className="wrapper-style image-style round-image green"
+                    style={
+                      Object {
+                        "fontSize": "18px",
+                        "height": "32px",
+                        "minHeight": "32px",
+                        "minWidth": "32px",
+                        "width": "32px",
+                      }
+                    }
+                  >
+                    DS
+                  </div>
+                  <div
+                    className="stack vertical xxs"
+                    style={
+                      Object {
+                        "alignItems": undefined,
+                        "flexWrap": undefined,
+                        "justifyContent": undefined,
+                      }
+                    }
+                  >
+                    <a
+                      className="link-style primary"
+                      target="_self"
+                    >
+                      Dave Doe
+                    </a>
+                    San Diego, USA
+                  </div>
+                </div>
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+            </tr>
+          </tbody>
+          <tfoot
+            className="table-summary"
+          >
+            <tr>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Summary
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                This is a summary content
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div
+    className="table-pagination table-pagination-right pagination"
+    position={
+      Array [
+        "none",
+        "bottomRight",
+      ]
+    }
+  >
+    <span
+      className="sizes"
+    >
+      <div
+        className="main-wrapper"
+      >
+        <button
+          aria-controls="dropdown-93"
+          aria-disabled={false}
+          aria-expanded={false}
+          aria-haspopup={true}
+          aria-label="Selected page size"
+          className="button button-default button-size3 icon-left"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <span>
+            <span
+              aria-hidden={false}
+              className="icon icon-wrapper"
+              role="presentation"
+            >
+              <svg
+                role="presentation"
+                style={
+                  Object {
+                    "height": "16px",
+                    "width": "16px",
+                  }
+                }
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
+                  style={
+                    Object {
+                      "fill": "currentColor",
+                    }
+                  }
+                />
+              </svg>
+            </span>
+            <span
+              className="button-text3"
+            >
+              page / 10
+            </span>
+          </span>
+        </button>
+      </div>
+    </span>
+    <span
+      className="total"
+    >
+      16 Total
+    </span>
+    <button
+      aria-disabled={false}
+      aria-label="Previous"
+      className="pagination-button button button-default button-size3 icon-left disabled"
+      defaultChecked={false}
+      disabled={true}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      className="pager"
+    >
+      <li>
+        <button
+          aria-checked={true}
+          aria-disabled={false}
+          aria-pressed={true}
+          className="pagination-button active button button-default button-size3"
+          defaultChecked={true}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            1
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            0
+          </span>
+        </button>
+      </li>
+      <li>
+        <button
+          aria-checked={false}
+          aria-disabled={false}
+          aria-pressed={false}
+          className="pagination-button button button-default button-size3"
+          defaultChecked={false}
+          disabled={false}
+          onClick={[Function]}
+        >
+          <span
+            className="button-text3"
+          >
+            2
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button
+      aria-disabled={false}
+      aria-label="Next"
+      className="pagination-button button button-default button-size3 icon-left"
+      defaultChecked={false}
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      className="jump"
+    >
+      <div
+        className="input-wrapper left-icon"
+      >
+        <div
+          className="input-group left-icon"
+        >
+          <input
+            autoFocus={false}
+            className="editor left-icon clear-not-visible"
+            defaultValue={1}
+            disabled={false}
+            id="input-94"
+            minLength={1}
+            onChange={[Function]}
+            readOnly={false}
+            required={false}
+            role="textbox"
+            tabIndex={0}
+            type="number"
+          />
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Tree 1`] = `
+<div
+  className="table-wrapper my-table-class"
+>
+  <div
+    className="table table table-alternate table-bordered"
+    id="myTableId"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-content"
+        onScroll={[Function]}
+        style={Object {}}
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "auto",
+            }
+          }
+        >
+          <colgroup>
+            <col
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": "12%",
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": "30%",
+                }
+              }
+            />
+          </colgroup>
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Role
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Level
+              </th>
+              <th
+                className="table-cell my-header"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Location
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            className="table-tbody"
+          >
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key={1}
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-with-append"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <span
+                  className="table-row-indent indent-level-0"
+                  style={
+                    Object {
+                      "paddingLeft": "0px",
+                    }
+                  }
+                />
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-collapsed"
+                  onClick={[Function]}
+                  type="button"
+                />
+                Senior Sales Engineer
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                78
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                Beacon, NY
+              </td>
+            </tr>
+            <tr
+              className="table-row table-row-level-0"
+              data-row-key={2}
+              onClick={[Function]}
+              style={Object {}}
+            >
+              <td
+                className="table-cell table-cell-with-append"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                <span
+                  className="table-row-indent indent-level-0"
+                  style={
+                    Object {
+                      "paddingLeft": "0px",
+                    }
+                  }
+                />
+                <button
+                  aria-label="Collapse row"
+                  className="table-row-expand-icon table-row-expand-icon-spaced"
+                  onClick={[Function]}
+                  type="button"
+                />
+                Sales Engineer Manager
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                72
+              </td>
+              <td
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                San Diego, USA
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Table Virtual List 1`] = `
+<div
+  className="table-wrapper virtual-table"
+>
+  <div
+    className="table table-fixed-header table-scroll-horizontal table table-alternate"
+  >
+    <div
+      className="table-container"
+    >
+      <div
+        className="table-header"
+        style={
+          Object {
+            "overflow": "hidden",
+          }
+        }
+      >
+        <table
+          style={
+            Object {
+              "tableLayout": "fixed",
+              "visibility": null,
+            }
+          }
+        >
+          <colgroup>
+            <col
+              style={
+                Object {
+                  "width": 150,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 0,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 0,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 0,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 200,
+                }
+              }
+            />
+            <col
+              style={
+                Object {
+                  "width": 100,
+                }
+              }
+            />
+          </colgroup>
+          <thead
+            className="table-thead"
+          >
+            <tr>
+              <th
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                A
+              </th>
+              <th
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                B
+              </th>
+              <th
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                C
+              </th>
+              <th
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                D
+              </th>
+              <th
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                E
+              </th>
+              <th
+                className="table-cell"
+                colSpan={null}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                rowSpan={null}
+                style={Object {}}
+              >
+                F
+              </th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+      <div
+        className="virtual-grid"
+        onScroll={[Function]}
+        style={
+          Object {
+            "WebkitOverflowScrolling": "touch",
+            "direction": "ltr",
+            "height": 320,
+            "overflow": "auto",
+            "position": "relative",
+            "width": 0,
+            "willChange": "transform",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "height": 5000028,
+              "pointerEvents": undefined,
+              "width": 350,
+            }
+          }
+        >
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 0,
+                "position": "absolute",
+                "top": 0,
+                "width": 150,
+              }
+            }
+          >
+            0
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 150,
+                "position": "absolute",
+                "top": 0,
+                "width": 0,
+              }
+            }
+          >
+            0
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 0,
+                "position": "absolute",
+                "top": 54,
+                "width": 150,
+              }
+            }
+          >
+            1
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 150,
+                "position": "absolute",
+                "top": 54,
+                "width": 0,
+              }
+            }
+          >
+            1
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 0,
+                "position": "absolute",
+                "top": 108,
+                "width": 150,
+              }
+            }
+          >
+            2
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 150,
+                "position": "absolute",
+                "top": 108,
+                "width": 0,
+              }
+            }
+          >
+            2
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 0,
+                "position": "absolute",
+                "top": 162,
+                "width": 150,
+              }
+            }
+          >
+            3
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 150,
+                "position": "absolute",
+                "top": 162,
+                "width": 0,
+              }
+            }
+          >
+            3
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 0,
+                "position": "absolute",
+                "top": 216,
+                "width": 150,
+              }
+            }
+          >
+            4
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 150,
+                "position": "absolute",
+                "top": 216,
+                "width": 0,
+              }
+            }
+          >
+            4
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 0,
+                "position": "absolute",
+                "top": 270,
+                "width": 150,
+              }
+            }
+          >
+            5
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 150,
+                "position": "absolute",
+                "top": 270,
+                "width": 0,
+              }
+            }
+          >
+            5
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 0,
+                "position": "absolute",
+                "top": 324,
+                "width": 150,
+              }
+            }
+          >
+            6
+          </div>
+          <div
+            className="virtual-table-cell"
+            style={
+              Object {
+                "height": 54,
+                "left": 150,
+                "position": "absolute",
+                "top": 324,
+                "width": 0,
+              }
+            }
+          >
+            6
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Tabs/__snapshots__/Tabs.stories.storyshot b/src/src/components/Tabs/__snapshots__/Tabs.stories.storyshot
new file mode 100644
index 000000000..79a773330
--- /dev/null
+++ b/src/src/components/Tabs/__snapshots__/Tabs.stories.storyshot
@@ -0,0 +1,1193 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Tabs Default 1`] = `
+<div>
+  <div
+    className="tab-wrap"
+    role="tablist"
+    style={Object {}}
+    value="tab1"
+  >
+    <button
+      aria-label="Tab 1"
+      aria-selected={true}
+      className="tab active"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 1
+      </span>
+      <div
+        className="tab-indicator"
+        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+        data-flip-id="tabIndicator"
+        data-portal-key="portal"
+      />
+    </button>
+    <button
+      aria-label="Tab 2"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 2
+      </span>
+    </button>
+    <button
+      aria-label="Tab 3"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 3
+      </span>
+    </button>
+    <button
+      aria-label="Tab 4"
+      aria-selected={false}
+      className="tab"
+      disabled={true}
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 4
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tabs Icon 1`] = `
+<div>
+  <div
+    className="tab-wrap"
+    role="tablist"
+    style={Object {}}
+    value="tab1"
+  >
+    <button
+      aria-label="Tab 1"
+      aria-selected={true}
+      className="tab active"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <div
+        className="tab-indicator"
+        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+        data-flip-id="tabIndicator"
+        data-portal-key="portal"
+      />
+    </button>
+    <button
+      aria-label="Tab 2"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      aria-label="Tab 3"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      aria-label="Tab 4"
+      aria-selected={false}
+      className="tab"
+      disabled={true}
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tabs Icon Label 1`] = `
+<div>
+  <div
+    className="tab-wrap"
+    role="tablist"
+    style={Object {}}
+    value="tab1"
+  >
+    <button
+      aria-label="Tab 1"
+      aria-selected={true}
+      className="tab active"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className="label"
+      >
+        Tab 1
+      </span>
+      <div
+        className="tab-indicator"
+        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+        data-flip-id="tabIndicator"
+        data-portal-key="portal"
+      />
+    </button>
+    <button
+      aria-label="Tab 2"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className="label"
+      >
+        Tab 2
+      </span>
+    </button>
+    <button
+      aria-label="Tab 3"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className="label"
+      >
+        Tab 3
+      </span>
+    </button>
+    <button
+      aria-label="Tab 4"
+      aria-selected={false}
+      className="tab"
+      disabled={true}
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className="label"
+      >
+        Tab 4
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tabs Pill Default 1`] = `
+<div>
+  <div
+    className="tab-wrap pill"
+    role="tablist"
+    style={Object {}}
+    value="tab1"
+  >
+    <button
+      aria-label="Tab 1"
+      aria-selected={true}
+      className="tab active"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 1
+      </span>
+      <div
+        className="tab-indicator"
+        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+        data-flip-id="tabIndicator"
+        data-portal-key="portal"
+      />
+    </button>
+    <button
+      aria-label="Tab 2"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 2
+      </span>
+    </button>
+    <button
+      aria-label="Tab 3"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 3
+      </span>
+    </button>
+    <button
+      aria-label="Tab 4"
+      aria-selected={false}
+      className="tab"
+      disabled={true}
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 4
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tabs Pill Icon 1`] = `
+<div>
+  <div
+    className="tab-wrap pill"
+    role="tablist"
+    style={Object {}}
+    value="tab1"
+  >
+    <button
+      aria-label="Tab 1"
+      aria-selected={true}
+      className="tab active"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <div
+        className="tab-indicator"
+        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+        data-flip-id="tabIndicator"
+        data-portal-key="portal"
+      />
+    </button>
+    <button
+      aria-label="Tab 2"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      aria-label="Tab 3"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      aria-label="Tab 4"
+      aria-selected={false}
+      className="tab"
+      disabled={true}
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tabs Pill Icon Label 1`] = `
+<div>
+  <div
+    className="tab-wrap pill"
+    role="tablist"
+    style={Object {}}
+    value="tab1"
+  >
+    <button
+      aria-label="Tab 1"
+      aria-selected={true}
+      className="tab active"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className="label"
+      >
+        Tab 1
+      </span>
+      <div
+        className="tab-indicator"
+        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+        data-flip-id="tabIndicator"
+        data-portal-key="portal"
+      />
+    </button>
+    <button
+      aria-label="Tab 2"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className="label"
+      >
+        Tab 2
+      </span>
+    </button>
+    <button
+      aria-label="Tab 3"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className="label"
+      >
+        Tab 3
+      </span>
+    </button>
+    <button
+      aria-label="Tab 4"
+      aria-selected={false}
+      className="tab"
+      disabled={true}
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        aria-hidden={false}
+        className="icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style={
+            Object {
+              "height": "20px",
+              "width": "20px",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
+            style={
+              Object {
+                "fill": "currentColor",
+              }
+            }
+          />
+        </svg>
+      </span>
+      <span
+        className="label"
+      >
+        Tab 4
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tabs Pill With Badge 1`] = `
+<div>
+  <div
+    className="tab-wrap pill"
+    role="tablist"
+    style={Object {}}
+    value="tab1"
+  >
+    <button
+      aria-label="Tab 1"
+      aria-selected={true}
+      className="tab active"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 1
+      </span>
+      <div
+        className="tab-indicator"
+        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+        data-flip-id="tabIndicator"
+        data-portal-key="portal"
+      />
+      <span
+        className="badge header6 badge active"
+      >
+        1
+      </span>
+    </button>
+    <button
+      aria-label="Tab 2"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 2
+      </span>
+      <span
+        className="badge header6 badge"
+      >
+        2
+      </span>
+    </button>
+    <button
+      aria-label="Tab 3"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 3
+      </span>
+      <span
+        className="badge header6 badge"
+      >
+        3
+      </span>
+    </button>
+    <button
+      aria-label="Tab 4"
+      aria-selected={false}
+      className="tab"
+      disabled={true}
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 4
+      </span>
+      <span
+        className="badge header6 badge"
+      >
+        4
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tabs Scrollable 1`] = `
+<div>
+  <div
+    className="tab-wrap scrollable"
+    role="tablist"
+    style={
+      Object {
+        "maxWidth": "400px",
+      }
+    }
+    value="tab1"
+  >
+    <button
+      aria-label="Tab 1"
+      aria-selected={true}
+      className="tab active"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 1
+      </span>
+      <div
+        className="tab-indicator"
+        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+        data-flip-id="tabIndicator"
+        data-portal-key="portal"
+      />
+    </button>
+    <button
+      aria-label="Tab 2"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 2
+      </span>
+    </button>
+    <button
+      aria-label="Tab 3"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 3
+      </span>
+    </button>
+    <button
+      aria-label="Tab 4"
+      aria-selected={false}
+      className="tab"
+      disabled={true}
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 4
+      </span>
+    </button>
+    <button
+      aria-label="Tab 5"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 5
+      </span>
+    </button>
+    <button
+      aria-label="Tab 6"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 6
+      </span>
+    </button>
+    <button
+      aria-label="Tab 7"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 7
+      </span>
+    </button>
+    <button
+      aria-label="Tab 8"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 8
+      </span>
+    </button>
+    <button
+      aria-label="Tab 9"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 9
+      </span>
+    </button>
+    <button
+      aria-label="Tab 10"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 10
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tabs Small 1`] = `
+<div>
+  <div
+    className="tab-wrap small"
+    role="tablist"
+    style={Object {}}
+    value="tab1"
+  >
+    <button
+      aria-label="Tab 1"
+      aria-selected={true}
+      className="tab active"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 1
+      </span>
+      <div
+        className="tab-indicator"
+        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+        data-flip-id="tabIndicator"
+        data-portal-key="portal"
+      />
+    </button>
+    <button
+      aria-label="Tab 2"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 2
+      </span>
+    </button>
+    <button
+      aria-label="Tab 3"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 3
+      </span>
+    </button>
+    <button
+      aria-label="Tab 4"
+      aria-selected={false}
+      className="tab"
+      disabled={true}
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 4
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Tabs With Badge 1`] = `
+<div>
+  <div
+    className="tab-wrap"
+    role="tablist"
+    style={Object {}}
+    value="tab1"
+  >
+    <button
+      aria-label="Tab 1"
+      aria-selected={true}
+      className="tab active"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 1
+      </span>
+      <div
+        className="tab-indicator"
+        data-flip-config="{\\"translate\\":true,\\"scale\\":true,\\"opacity\\":true}"
+        data-flip-id="tabIndicator"
+        data-portal-key="portal"
+      />
+      <span
+        className="badge header6 badge active"
+      >
+        1
+      </span>
+    </button>
+    <button
+      aria-label="Tab 2"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 2
+      </span>
+      <span
+        className="badge header6 badge"
+      >
+        2
+      </span>
+    </button>
+    <button
+      aria-label="Tab 3"
+      aria-selected={false}
+      className="tab"
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 3
+      </span>
+      <span
+        className="badge header6 badge"
+      >
+        3
+      </span>
+    </button>
+    <button
+      aria-label="Tab 4"
+      aria-selected={false}
+      className="tab"
+      disabled={true}
+      onClick={[Function]}
+      role="tab"
+    >
+      <span
+        className="label"
+      >
+        Tab 4
+      </span>
+      <span
+        className="badge header6 badge"
+      >
+        4
+      </span>
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/src/components/Tooltip/__snapshots__/Tooltip.stories.storyshot b/src/src/components/Tooltip/__snapshots__/Tooltip.stories.storyshot
new file mode 100644
index 000000000..598898708
--- /dev/null
+++ b/src/src/components/Tooltip/__snapshots__/Tooltip.stories.storyshot
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Tooltip Tooltips 1`] = `
+<div
+  className="reference-wrapper"
+  id="4fzzzxj"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <button
+    aria-disabled={false}
+    aria-label="Show Tooltip"
+    className="button button-primary button-size2"
+    defaultChecked={false}
+    disabled={false}
+  >
+    <span
+      className="button-text2"
+    >
+      Show Tooltip
+    </span>
+  </button>
+</div>
+`;
diff --git a/src/storybook.test.js b/src/storybook.test.js
index 3cd4f937c..f49afc6e9 100644
--- a/src/storybook.test.js
+++ b/src/storybook.test.js
@@ -1,4 +1,6 @@
-import initStoryshots from '@storybook/addon-storyshots';
+import initStoryshots, {
+    multiSnapshotWithOptions,
+} from '@storybook/addon-storyshots';
 
 Object.defineProperty(window, 'matchMedia', {
     writable: true,
@@ -16,4 +18,6 @@ Object.defineProperty(window, 'matchMedia', {
 
 jest.spyOn(global.Math, 'random').mockReturnValue(0.123456789);
 
-initStoryshots();
+initStoryshots({
+    test: multiSnapshotWithOptions(),
+});