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()} />