react-sticky-table - npm Package Compare versions

Comparing version 4.2.0 to 4.3.0

package.json

 {
   "name": "react-sticky-table",
   "description": "Dynamically sized fixed header and columns for tables",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "author": "Henrybuilt",
@@ -6,0 +6,0 @@ "bugs": {

README.md

@@ -60,6 +60,17 @@ # React Sticky Table
 
-## Options
+## Props
 
-- `stickyHeaderCount`: default: `1`, value: `0 or 1`
-- `stickyColumnCount`: default: `1`, value: `0 or 1`
+- sticky count
+  - `stickyHeaderCount`: `0` or `1` - default: `1`
+  - `leftStickyColumnCount`: `0` or `1` - default: `1`
+  - `rightStickyColumnCount`: `0` or `1` - default: `0`
+  - `stickyFooterCount`: `0` or `1` - default: `0`
+- z-index
+  - `headerZ`: default: `2` (sticky corners are the greater of their two sides + 1)
+  - `leftColumnZ`: default: `2`
+  - `rightColumnZ`: default: `2`
+  - `footerZ`: default: `2`
+- border
+  - `borderWidth`: default: `'2px'`
+  - `borderColor`: default: `'#e5e5e5'`
 - `wrapperRef`: default: `undefined`, value: `React ref` - a reference you can use for the wrapper element that has scroll events on it
@@ -76,5 +87,11 @@
 ```javascript
-<StickyTable stickyColumnCount={0}>
+<StickyTable leftStickyColumnCount={0}>
 ```
 
+Disable borders:
+
+```javascript
+<StickyTable borderWidth={0}>
+```
+
 ## License
@@ -81,0 +98,0 @@

src/__tests__/index.js

@@ -14,3 +14,3 @@ import React from 'react';
     const table = mount(
-      <StickyTable stickyColumnCount={1}>
+      <StickyTable leftStickyColumnCount={1}>
         <Row>
@@ -32,3 +32,3 @@ <Cell>header 1</Cell>
     const table = mount(
-      <StickyTable stickyColumnCount={0}>
+      <StickyTable leftStickyColumnCount={0}>
         <Row>
@@ -48,5 +48,5 @@ <Cell>header 1</Cell>
 
-  it('should render the correct number of stickyColumnCount', () => {
+  it('should render the correct number of leftStickyColumnCount', () => {
     const table = mount(
-      <StickyTable stickyColumnCount={3}>
+      <StickyTable leftStickyColumnCount={3}>
         <Row>
@@ -72,3 +72,3 @@ <Cell>header 1</Cell>
     const table = mount(
-      <StickyTable stickyColumnCount={1} stickyHeaderCount={0}>
+      <StickyTable leftStickyColumnCount={1} stickyHeaderCount={0}>
         <Row>
@@ -90,3 +90,3 @@ <Cell>header 1</Cell>
     const table = mount(
-      <StickyTable stickyColumnCount={1}>
+      <StickyTable leftStickyColumnCount={1}>
         <Row>
@@ -93,0 +93,0 @@ <Cell>header 1</Cell>

src/index.js

 import React from 'react';
 import styled from 'styled-components';
 
+var getBorder = (props) => `${props.borderWidth === undefined ? '2px' : (props.borderWidth || '0px')} solid ${props.borderColor || '#e5e5e5'}`
+
 const Table = styled('div').attrs({
@@ -20,3 +22,2 @@ className: 'sticky-table-table'
   padding: 0.5rem 0.75rem;
-  border-bottom: 2px solid #e5e5e5;
   background-color: #fff;
@@ -31,6 +32,2 @@ `;
   display: table-row;
-
-  & ${Cell}:first-child {
-    border-right: 2px solid #e5e5e5;
-  }
 `;
@@ -48,28 +45,47 @@
 
+
+  & ${Row}:not(:last-child) ${Cell} {
+    border-bottom: ${getBorder};
+  }
+
   & ${Row}:nth-child(${props => `-n+${props.stickyHeaderCount}`}) ${Cell} {
     position: -webkit-sticky;
     position: sticky;
-    top: 0;
+    top: 0px;
     z-index: ${props => props.headerZ || 2};
   }
-
-  & ${Row} ${Cell}:nth-child(-n+${props => props.stickyColumnCount}) {
+  & ${Row}:nth-last-child(-n+${props => props.stickyFooterCount}) ${Cell} {
     position: -webkit-sticky;
     position: sticky;
-    left: 0;
-    z-index: ${props => props.columnZ || 2};
+    bottom: 0px;
+    z-index: ${props => props.footerZ || 2};
+    border-top: ${getBorder};
   }
-  & ${Row}:nth-child(-n+${props =>
-  props.stickyHeaderCount}) ${Cell}:nth-child(-n+${props =>
-  props.stickyColumnCount}) {
+  & ${Row} ${Cell}:nth-child(-n+${props => props.leftStickyColumnCount}) {
     position: -webkit-sticky;
     position: sticky;
-    top: 0;
-    left: 0;
-    z-index: ${props => Math.max(props.headerZ || 2, props.columnZ || 2) + 1};
+    left: 0px;
+    z-index: ${props => props.leftColumnZ || 2};
+    border-right: ${getBorder};
+  }
+  & ${Row} ${Cell}:nth-last-child(-n+${props => props.rightStickyColumnCount}) {
+    position: -webkit-sticky;
+    position: sticky;
+    right: 0px;
+    z-index: ${props => props.rightColumnZ || 2};
+    border-left: ${getBorder};
+  }
 
-    &:first-child {
-      border-right: 2px solid #e5e5e5;
-    }
+  & ${Row}:nth-child(-n+${props => props.stickyHeaderCount}) ${Cell}:nth-child(-n+${props => props.leftStickyColumnCount}) {
+    z-index: ${props => Math.max(props.headerZ || 2, props.leftColumnZ || 2) + 1};
   }
+  & ${Row}:nth-child(-n+${props => props.stickyHeaderCount}) ${Cell}:nth-last-child(-n+${props => props.rightStickyColumnCount}) {
+    z-index: ${props => Math.max(props.headerZ || 2, props.rightColumnZ || 2) + 1};
+  }
+  & ${Row}:nth-last-child(-n+${props => props.stickyFooterCount}) ${Cell}:nth-child(-n+${props => props.leftStickyColumnCount}) {
+    z-index: ${props => Math.max(props.footerZ || 2, props.leftColumnZ || 2) + 1};
+  }
+  & ${Row}:nth-last-child(-n+${props => props.stickyFooterCount}) ${Cell}:nth-last-child(-n+${props => props.rightStickyColumnCount}) {
+    z-index: ${props => Math.max(props.footerZ || 2, props.rightColumnZ || 2) + 1};
+  }
 `;
@@ -80,7 +96,7 @@
 function StickyTable({
-  stickyColumnCount = 1,
+  leftStickyColumnCount = 1,
   stickyHeaderCount = 1,
   wrapperRef,
   children,
-  ...rest
+  ...restProps
 }) {
@@ -90,5 +106,5 @@ return (
       ref={wrapperRef}
-      stickyColumnCount={stickyColumnCount}
+      leftStickyColumnCount={leftStickyColumnCount}
       stickyHeaderCount={stickyHeaderCount}
-      {...rest}
+      {...restProps}
     >
@@ -95,0 +111,0 @@ <Table>{children}</Table>

stories/index.stories.js

@@ -7,2 +7,5 @@ import React from 'react';
 import Basic from './Basic/index';
+import StickyAllSides from './StickyAllSides/index';
+import Borders from './Borders/index';
+import NoBorders from './NoBorders/index';
 import ChangingContent from './ChangingContent/index';
@@ -15,8 +18,11 @@ import NoColumn from './NoColumn/index';
 storiesOf('Basic', module)
-  .add('Basic', () => <Basic />)
-  .add('ChangingContent', () => <ChangingContent />)
-  .add('NoColumn', () => <NoColumn />)
-  .add('NoHeader', () => <NoHeader />)
-  .add('ResizingCells', () => <ResizingCells />)
-  .add('CustomZ', () => <CustomZ />);
+  .add('basic', () => <Basic />)
+  .add('sticky on all sides', () => <StickyAllSides />)
+  .add('only sticky header', () => <NoColumn />)
+  .add('only sticky column', () => <NoHeader />)
+  .add('dynamically changing content', () => <ChangingContent />)
+  .add('resizing cells', () => <ResizingCells />)
+  .add('custom borders', () => <Borders />)
+  .add('no borders', () => <NoBorders />)
+  .add('custom z-index', () => <CustomZ />);
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6048651

increased by0.07%

Number of package files

50

increased by6.38%

Lines of code

13833

increased by0.7%

Number of lines in readme file

106

increased by19.1%

No dependency changes