diff --git a/package.json b/package.json index 9ab2fe8..71c0370 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "lodash.get": "^4.4.2", "prop-types": "^15.5.8", "react-custom-scrollbars": "^4.2.1", - "styled-components": "^4.4.1" + "styled-components": "^5.0.0" }, "devDependencies": { "@babel/cli": "~7.6.0", diff --git a/src/Table.jsx b/src/Table.jsx index f7dcee0..dfd207a 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import isEqual from 'lodash/isEqual'; import TableContext from './context'; import Loader from './Loader'; @@ -129,7 +129,6 @@ class Table extends Component { return ( + + + + + + )} ); @@ -151,6 +158,7 @@ class Table extends Component { } const WrapperStyle = styled.div` + position: relative; display: flex; flex-direction: column; line-height: 20px; @@ -160,26 +168,45 @@ const WrapperStyle = styled.div` *, *:before, *:after { box-sizing: inherit; } - - ${props => !props.minimalist && css` - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; - `} - - ${props => props.minimalist && css` - border: 0; - `} `; const EmptyBodyStyle = styled.div` text-align: center; padding: 44px 12px; color: #999; +`; + +const VerticalLine = styled.div` + border: none; + border-left: 1px solid #ddd; + height: 100%; + width: 1px; +`; - ${props => !props.minimalist && css` - border-left: 1px solid #ddd; - border-right: 1px solid #ddd; - `} +const HorizontalLine = styled.div` + border: none; + border-top: 1px solid #ddd; + height: 1px; + width: 100%; +`; + +const BorderTop = styled(HorizontalLine)` + position: absolute; + top: 0; +`; +const BorderRight = styled(VerticalLine)` + position: absolute; + top: 0; + right: 0; +`; +const BorderBottom = styled(HorizontalLine)` + position: absolute; + bottom: 0; +`; +const BorderLeft = styled(VerticalLine)` + position: absolute; + top: 0; + left: 0; `; export default Table; diff --git a/src/TableCell.jsx b/src/TableCell.jsx index 1234f30..8caca92 100644 --- a/src/TableCell.jsx +++ b/src/TableCell.jsx @@ -36,9 +36,6 @@ const CellStyle = styled.div` ${props => !props.minimalist && css` border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; - &:first-child { - border-left: 1px solid #ddd; - } `} ${props => props.minimalist && css` diff --git a/src/TableHeaderCell.jsx b/src/TableHeaderCell.jsx index f47dc30..915b28a 100644 --- a/src/TableHeaderCell.jsx +++ b/src/TableHeaderCell.jsx @@ -39,9 +39,6 @@ const HeaderCellStyle = styled.div` background-color: #EEEEEE; border-right: 1px solid #ddd; border-bottom: 2px solid #ccc; - &:first-child { - border-left: 1px solid #ddd; - } `} ${props => props.minimalist && css` diff --git a/src/TableTemplate.jsx b/src/TableTemplate.jsx index dd61bbb..9852993 100644 --- a/src/TableTemplate.jsx +++ b/src/TableTemplate.jsx @@ -120,7 +120,6 @@ class TableTemplate extends Component { columns, ...props } = this.props; - const isNoData = (data.length === 0) && !loading; return ( diff --git a/styleguide/examples/Expand.jsx b/styleguide/examples/Expand.jsx index 910c319..3217101 100644 --- a/styleguide/examples/Expand.jsx +++ b/styleguide/examples/Expand.jsx @@ -187,9 +187,8 @@ const StyledTableRow = styled(TableRow)` `; const ExpandedRowStyle = styled.div` - border: 1px solid #ddd; - border-top-width: 0; padding: 16px 16px 16px 52px; + border-bottom: 1px solid #ddd; &:last-child { border-bottom-width: 0; } diff --git a/styleguide/examples/FixedColumns.jsx b/styleguide/examples/FixedColumns.jsx index 2e5901b..508c678 100644 --- a/styleguide/examples/FixedColumns.jsx +++ b/styleguide/examples/FixedColumns.jsx @@ -161,6 +161,9 @@ class Selection extends Component { checked={isChecked} indeterminate={isIndeterminate} onClick={this.handleHeaderCheckbox} + inputStyle={{ + margin: 0 + }} /> ); }; @@ -171,6 +174,9 @@ class Selection extends Component { ); }; @@ -249,13 +255,13 @@ class Selection extends Component { const { width: cellWidth, render } = cell; const cellValue = _get(rowData, cell.dataKey); return ( - { typeof render === 'function' ? render(cellValue, rowData) : cellValue } - + ); }) } @@ -340,13 +346,13 @@ class Selection extends Component { const { width: cellWidth } = cell; const cellValue = _get(rowData, cell.dataKey); return ( - { cellValue } - + ); }) } @@ -388,12 +394,19 @@ const ShadowStyle = styled.div` display: none; `; +const StyledTableCell = styled(TableCell)``; + const StyledTableRow = styled(TableRow)` - ${props => props.active && css` - background-color: #fcf8da; - `} ${props => props.hover && css` - background-color: #e6f4fc; + ${StyledTableCell} { + background-color: #e6f4fc; + } + `} + + ${props => props.active && css` + ${StyledTableCell} { + background-color: #fcf8da; + } `} `; diff --git a/styleguide/examples/NoDataCustom.md b/styleguide/examples/NoDataCustom.md index 7f221e8..55ae78a 100644 --- a/styleguide/examples/NoDataCustom.md +++ b/styleguide/examples/NoDataCustom.md @@ -22,8 +22,6 @@ const columns = [ textAlign: 'center', fontSize: 24, padding: 50, - borderLeft: '1px solid #ddd', - borderRight: '1px solid #ddd', }} > ~ No data to display ~ diff --git a/styleguide/examples/Selection.jsx b/styleguide/examples/Selection.jsx index 3f109ed..84aea74 100644 --- a/styleguide/examples/Selection.jsx +++ b/styleguide/examples/Selection.jsx @@ -95,6 +95,9 @@ class Selection extends Component { checked={isChecked} indeterminate={isIndeterminate} onClick={this.handleHeaderCheckbox} + inputStyle={{ + margin: 0 + }} /> ); }; @@ -105,6 +108,9 @@ class Selection extends Component { ); };