Merge pull request #35 from jbetancur/34-enhancement-rows

add row padding

Author: jbetancur

src/DataTable/TableCell.js

@@ -29,6 +29,8 @@ const TableCellStyle = styled.div`
   min-height: ${props => props.theme.rows.height};
   ${props => props.column.right && 'justify-content: flex-end'};
   ${props => props.column.center && 'justify-content: center'};
+  padding-top: 3px;
+  padding-bottom: 3px;
   padding-left: calc(${props => props.theme.cells.cellPadding} / 2);
   padding-right: calc(${props => props.theme.cells.cellPadding} / 2);
   ${props => props.firstCellIndex > 0 && css`

src/DataTable/TableCol.js

@@ -56,6 +56,7 @@ const ColumnCellWrapper = styled.div`
   margin-left: -3px;
   display: inline-flex;
   align-items: center;
+  ${props => props.active && 'font-weight: 800'};
 `;
 
 const SortIcon = styled.span`
@@ -126,7 +127,7 @@ class TableCol extends PureComponent {
         firstCellIndex={firstCellIndex}
       >
         {column.name &&
-          <ColumnCellWrapper>
+          <ColumnCellWrapper active={sortable}>
             {sortable && sortIcon &&
               <SortIcon className={sortDirection === 'asc' ? 'asc' : 'desc'}>
                 {sortIcon}

src/DataTable/__tests__/__snapshots__/TableCell.test.js.snap

@@ -23,6 +23,8 @@ exports[`component <TableCell /> should render correctly 1`] = `
   white-space: nowrap;
   color: rgba(0,0,0,.87);
   min-height: 48px;
+  padding-top: 3px;
+  padding-bottom: 3px;
   padding-left: calc(48px / 2);
   padding-right: calc(48px / 2);
 }