diff --git a/src/components/Table/head/header.js b/src/components/Table/head/header.js
index b49ac7523..8a9ffc83b 100644
--- a/src/components/Table/head/header.js
+++ b/src/components/Table/head/header.js
@@ -9,6 +9,7 @@ import StyledTh from './styled/th';
import StyledWrapper from './styled/wrapper';
import StyledHeaderContainer from './styled/headerContainer';
import StyledContent from './styled/content';
+import StyledScrollShadow from './styled/scrollShadow';
export default class Header extends Component {
constructor(props) {
@@ -65,10 +66,13 @@ export default class Header extends Component {
tableId,
maxRowSelection,
bulkSelection,
+ hasScroll,
} = this.props;
+
const headerStyles = {
width: computedWidth,
};
+
const isResizable = this.isResizable();
if (type === SELECTABLE_CHECKBOX) {
@@ -79,6 +83,7 @@ export default class Header extends Component {
tableId={tableId}
maxRowSelection={maxRowSelection}
bulkSelection={bulkSelection}
+ hasScroll={hasScroll}
style={headerStyles}
/>
);
@@ -118,6 +123,7 @@ export default class Header extends Component {
onResize={this.handleResize}
headerWidth={computedWidth}
/>
+
);
@@ -144,6 +150,7 @@ Header.propTypes = {
tableId: PropTypes.string.isRequired,
maxRowSelection: PropTypes.number,
bulkSelection: PropTypes.oneOf(['none', 'some', 'all']),
+ hasScroll: PropTypes.bool,
};
Header.defaultProps = {
@@ -164,4 +171,5 @@ Header.defaultProps = {
onDeselectAllRows: () => {},
maxRowSelection: undefined,
bulkSelection: 'none',
+ hasScroll: false,
};
diff --git a/src/components/Table/head/index.js b/src/components/Table/head/index.js
index 1e3b856cf..163705e47 100644
--- a/src/components/Table/head/index.js
+++ b/src/components/Table/head/index.js
@@ -50,6 +50,7 @@ Head.propTypes = {
sortDirection: PropTypes.string,
defaultSortDirection: PropTypes.string,
sortedBy: PropTypes.string,
+ hasScroll: PropTypes.bool,
};
Head.defaultProps = {
@@ -57,4 +58,5 @@ Head.defaultProps = {
sortDirection: undefined,
defaultSortDirection: 'asc',
sortedBy: undefined,
+ hasScroll: false,
};
diff --git a/src/components/Table/head/selectableHeader.js b/src/components/Table/head/selectableHeader.js
index 5c3535cf6..b7b2ab6b2 100644
--- a/src/components/Table/head/selectableHeader.js
+++ b/src/components/Table/head/selectableHeader.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import InputCheckbox from './InputCheckbox';
import StyledWrapper from './styled/wrapper';
import StyledCheckboxWrapper from './styled/checkboxWrapper';
+import StyledScrollShadow from './styled/scrollShadow';
export default function SelectableHeader(props) {
const {
@@ -11,6 +12,7 @@ export default function SelectableHeader(props) {
tableId,
maxRowSelection,
bulkSelection,
+ hasScroll,
style,
} = props;
const name = `${tableId}-options`;
@@ -27,7 +29,11 @@ export default function SelectableHeader(props) {
};
if (isRadio) {
- return ;
+ return (
+
+
+
+ );
}
return (
@@ -45,6 +51,7 @@ export default function SelectableHeader(props) {
onClick={handleClick}
/>
+
);
}
@@ -55,6 +62,7 @@ SelectableHeader.propTypes = {
tableId: PropTypes.string.isRequired,
maxRowSelection: PropTypes.number,
bulkSelection: PropTypes.oneOf(['none', 'some', 'all']),
+ hasScroll: PropTypes.bool,
style: PropTypes.object,
};
@@ -63,5 +71,6 @@ SelectableHeader.defaultProps = {
onDeselectAllRows: () => {},
maxRowSelection: undefined,
bulkSelection: 'none',
+ hasScroll: false,
style: undefined,
};
diff --git a/src/components/Table/head/styled/scrollShadow.js b/src/components/Table/head/styled/scrollShadow.js
new file mode 100644
index 000000000..5503ee00c
--- /dev/null
+++ b/src/components/Table/head/styled/scrollShadow.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
+
+const StyledScrollShadow = attachThemeAttrs(styled.div)`
+ width: inherit;
+ height: 1px;
+ position: absolute;
+ top: 42px;
+
+ ${props =>
+ props.hasScroll &&
+ `
+ box-shadow: 0 1.5px 2.5px 0 ${props.palette.text.header};
+ `}
+`;
+
+export default StyledScrollShadow;
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index 28856da6f..a57269353 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -221,6 +221,14 @@ export default class Table extends Component {
});
}
+ isScrollActive() {
+ if (this.scrollableY.current) {
+ const { clientHeight, scrollHeight } = this.scrollableY.current;
+ return clientHeight < scrollHeight;
+ }
+ return false;
+ }
+
updateColumnsAndTableWidth(newColumns) {
const { columns } = this.state;
const { minColumnWidth, maxColumnWidth } = this.props;
@@ -431,6 +439,7 @@ export default class Table extends Component {
tableId={this.tableId}
maxRowSelection={maxRowSelection}
bulkSelection={bulkSelection}
+ hasScroll={this.isScrollActive()}
/>