diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js
index 190a9d130b..1c0c2c52b7 100644
--- a/src/components/Table/Table.js
+++ b/src/components/Table/Table.js
@@ -13,10 +13,12 @@
* limitations under the License.
*/
-import React, { Component } from 'react';
+/** @jsx jsx */
+
+import { Component } from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { jsx, css } from '@emotion/core';
import TableHead from './components/TableHead';
import TableBody from './components/TableBody';
@@ -91,7 +93,7 @@ const noShadowStyles = ({ noShadow }) =>
`;
const ScrollContainer = styled.div(containerStyles);
-const Container = styled.div`
+const ShadowContainer = styled.div`
${shadowSingle};
${noShadowStyles};
`;
@@ -158,31 +160,41 @@ class Table extends Component {
} = this.props;
const { sortDirection, sortHover, sortedRow } = this.state;
+ /**
+ * The position: relative; container is necessary because ShadowContainer
+ * is a position: absolute; element
+ */
return (
-
-
-
-
-
+
+
+
-
-
-
+ borderCollapsed={borderCollapsed}
+ >
+
+
+
+
+
+
);
}
}
diff --git a/src/components/Table/__snapshots__/Table.spec.js.snap b/src/components/Table/__snapshots__/Table.spec.js.snap
index 15703ec740..32489cc7a5 100644
--- a/src/components/Table/__snapshots__/Table.spec.js.snap
+++ b/src/components/Table/__snapshots__/Table.spec.js.snap
@@ -1,6 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Table Style tests should render a collapsed table 1`] = `
+.circuit-49 {
+ position: relative;
+}
+
.circuit-47 {
box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
}
@@ -218,163 +222,171 @@ tbody .circuit-11:last-child td {
}
-
-
-
-
-
- Foo
- |
-
- Foo
- |
-
+
+
+
+
+ Foo
+ |
+
+ Foo
+ |
+
+ Bar
+ |
+
+ Baz
+ |
+
+
+ |
+
- Bar
-
-
+ 1
+ |
+
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
- Baz
-
-
-
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
- 3
- |
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
- 3
- |
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
+ 1
+
+ |
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
- 3
-
-
-
-
+
+ 1
+ |
+
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
+
+
`;
exports[`Table Style tests should render with default styles 1`] = `
+.circuit-49 {
+ position: relative;
+}
+
.circuit-47 {
box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
}
@@ -591,163 +603,171 @@ tbody .circuit-11:last-child td {
}
-
-
-
-
-
- Foo
- |
-
- Foo
- |
-
+
+
+
+
+ Foo
+ |
+
+ Foo
+ |
+
+ Bar
+ |
+
+ Baz
+ |
+
+
+ |
+
- Bar
-
-
+ 1
+ |
+
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
- Baz
-
-
-
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
- 3
- |
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
- 3
- |
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
+ 1
+
+ |
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
- 3
-
-
-
-
+
+ 1
+ |
+
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
+
+
`;
exports[`Table Style tests should render with rowHeader styles 1`] = `
+.circuit-49 {
+ position: relative;
+}
+
.circuit-47 {
box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
}
@@ -964,163 +984,171 @@ tbody .circuit-11:last-child td {
}
-
-
-
-
-
- Foo
- |
-
- Foo
- |
-
+
+
+
+
+ Foo
+ |
+
+ Foo
+ |
+
+ Bar
+ |
+
+ Baz
+ |
+
+
+ |
+
- Bar
-
-
+ 1
+ |
+
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
- Baz
-
-
-
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
- 3
- |
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
- 3
- |
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
+ 1
+
+ |
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
- 3
-
-
-
-
+
+ 1
+ |
+
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
+
+
`;
exports[`Table Style tests should render without the table shadow 1`] = `
+.circuit-49 {
+ position: relative;
+}
+
.circuit-45 {
border-radius: 4px;
}
@@ -1338,158 +1366,162 @@ tbody .circuit-11:last-child td {
}
-
-
-
-
-
- Foo
- |
-
- Foo
- |
-
+
+
+
+
+ Foo
+ |
+
+ Foo
+ |
+
+ Bar
+ |
+
+ Baz
+ |
+
+
+ |
+
- Bar
-
-
+ 1
+ |
+
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
- Baz
-
-
-
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
- 3
- |
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
- 3
- |
-
-
-
- 1
- |
-
- 1
- |
-
- 2
- |
-
+ 1
+
+ |
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
- 3
-
-
-
-
+
+ 1
+ |
+
+ 1
+ |
+
+ 2
+ |
+
+ 3
+ |
+
+
+
+
`;