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 {
);
};