feat(SortableTable): Adds gradient shadow on scroll

Author: jappfolio

src/components/Table/SortableTable.d.ts

@@ -30,6 +30,7 @@ interface SortableTableProps<T> extends Omit<TableProps, 'children'> {
   rowExpanded?: (row: T) => React.ReactNode | boolean;
   rowOnClick?: (row: T, evt: React.MouseEvent) => void;
   truncate?: boolean;
+  showScrollShadows?: boolean;
 }
 
 declare class SortableTable<T> extends React.Component<SortableTableProps<T>, {}> {}

src/components/Table/SortableTable.js

@@ -106,6 +106,46 @@ function getExpandableCell(row, expanded, onExpand) {
 }
 
 class SortableTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      leftGradient: false,
+      rightGradient: false,
+    };
+    this.scrollContainerRef = React.createRef();
+  }
+
+  checkScroll = () => {
+    const el = this.scrollContainerRef.current;
+    if (!el) {
+      return;
+    }
+
+    const left = el.scrollLeft > 0;
+    const right = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
+
+    this.setState({ leftGradient: left, rightGradient: right });
+  };
+
+  componentDidMount() {
+    if (this.props.showScrollShadows) {
+      this.checkScroll();
+      const el = this.scrollContainerRef.current;
+      if (el) {
+        el.addEventListener('scroll', this.checkScroll);
+        window.addEventListener('resize', this.checkScroll);
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    const el = this.scrollContainerRef.current;
+    if (el) {
+      el.removeEventListener('scroll', this.checkScroll);
+      window.removeEventListener('resize', this.checkScroll);
+    }
+  }
+
   static propTypes = {
     ...Table.propTypes,
     columns: PropTypes.arrayOf(
@@ -143,6 +183,7 @@ class SortableTable extends React.Component {
     allSelected: PropTypes.bool,
     truncate: PropTypes.bool,
     renderRow: PropTypes.func,
+    showScrollShadows: PropTypes.bool,
     // TODO? support sort type icons (FontAwesome has numeric, A->Z, Z->A)
   };
 
@@ -154,6 +195,7 @@ class SortableTable extends React.Component {
     rowExpanded: () => false,
     truncate: false,
     renderRow: defaultRenderRow,
+    showScrollShadows: false,
   };
 
   render() {
@@ -174,6 +216,7 @@ class SortableTable extends React.Component {
       onExpand,
       rowExpanded,
       renderRow,
+      showScrollShadows,
       ...props
     } = this.props;
     const selectable = rowSelected;
@@ -222,7 +265,7 @@ class SortableTable extends React.Component {
       });
     }
 
-    return (
+    const tableContent = (
       <Table style={tableStyle} {...props}>
         {showColgroup && (
           <colgroup>
@@ -278,6 +321,57 @@ class SortableTable extends React.Component {
         )}
       </Table>
     );
+
+    if (!showScrollShadows) {
+      return tableContent;
+    }
+
+    return (
+      <div style={{ position: 'relative', width: '100%' }}>
+        <div
+          ref={this.scrollContainerRef}
+          style={{
+            overflowX: 'auto',
+            width: '100%',
+            maxWidth: '100%',
+          }}
+        >
+          {tableContent}
+        </div>
+
+        {/* Left gradient */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '15px',
+            height: '100%',
+            background: 'linear-gradient(to right, #a0a0a0, transparent)',
+            opacity: this.state.leftGradient ? 1 : 0,
+            pointerEvents: 'none',
+            zIndex: 1,
+            transition: 'opacity 0.3s',
+          }}
+        />
+
+        {/* Right gradient */}
+        <div
+          style={{
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            width: '15px',
+            height: '100%',
+            background: 'linear-gradient(to left, #a0a0a0, transparent)',
+            opacity: this.state.rightGradient ? 1 : 0,
+            pointerEvents: 'none',
+            zIndex: 1,
+            transition: 'opacity 0.3s',
+          }}
+        />
+      </div>
+    );
   }
 }
 export default SortableTable;

src/components/Table/SortableTable.spec.js

@@ -12,11 +12,20 @@ describe('<SortableTable />', () => {
 
   it('should accept all normal Table props', () => {
     const wrapper = mount(
-      <SortableTable size="lg" bordered striped dark hover responsive columns={[]} rows={[]} />
+      <SortableTable
+        size="lg"
+        bordered
+        striped
+        dark
+        hover
+        showScrollShadows
+        columns={[]}
+        rows={[]}
+      />
     );
     const table = wrapper.find('table');
 
-    assert(wrapper.render().hasClass('table-responsive'), 'responsive missing');
+    // Note: showScrollShadows doesn't add a CSS class, it adds wrapper divs
     assert(table.hasClass('table-bordered'), 'bordered missing');
     assert(table.hasClass('table-striped'), 'striped missing');
     assert(table.hasClass('table-dark'), 'dark missing');
@@ -329,6 +338,70 @@ describe('<SortableTable />', () => {
     assert.equal(wrapper.find('tfoot td.whatever').length, 1, 'tfoot td.whatever incorrect');
   });
 
+  describe('Gradient shadow on scroll', () => {
+    it('should render the gradient shadow when scrolling when showScrollShadows is true', () => {
+      const columns = [{ header: 'Name', cell: (row) => row.name, key: 'name' }];
+      const rows = [{ name: 'Test', key: '1' }];
+      const wrapper = mount(<SortableTable columns={columns} rows={rows} showScrollShadows />);
+
+      assert(wrapper.find('table').exists());
+      assert(wrapper.find('div').length > 1);
+    });
+
+    it('should hide/show gradients based on scroll position', () => {
+      const columns = [{ header: 'Name', cell: (row) => row.name, key: 'name' }];
+      const rows = [{ name: 'Test', key: '1' }];
+      const wrapper = mount(<SortableTable columns={columns} rows={rows} showScrollShadows />);
+      const instance = wrapper.instance();
+
+      // Mock the scroll container element
+      const mockElement = {
+        scrollLeft: 0,
+        scrollWidth: 1000,
+        clientWidth: 500,
+      };
+      instance.scrollContainerRef.current = mockElement;
+
+      // Test initial state (no scroll)
+      instance.checkScroll();
+      assert.equal(instance.state.leftGradient, false, 'Left gradient should be hidden initially');
+      assert.equal(
+        instance.state.rightGradient,
+        true,
+        'Right gradient should be visible initially'
+      );
+
+      // Test scrolled right
+      mockElement.scrollLeft = 100;
+      instance.checkScroll();
+      assert.equal(
+        instance.state.leftGradient,
+        true,
+        'Left gradient should be visible when scrolled right'
+      );
+      assert.equal(instance.state.rightGradient, true, 'Right gradient should still be visible');
+
+      // Test fully scrolled to end
+      mockElement.scrollLeft = 500;
+      instance.checkScroll();
+      assert.equal(
+        instance.state.leftGradient,
+        true,
+        'Left gradient should be visible when fully scrolled'
+      );
+      assert.equal(
+        instance.state.rightGradient,
+        false,
+        'Right gradient should be hidden when fully scrolled'
+      );
+    });
+
+    it('should not render the gradient shadow when scrolling when showScrollShadows is false', () => {
+      const wrapper = mount(<SortableTable columns={[]} rows={[]} showScrollShadows={false} />);
+      assert(!wrapper.find('div[style*="position: relative"]').exists());
+    });
+  });
+
   describe('Expandable column', () => {
     const columns = [
       { header: 'Default', cell: () => '-', footer: '-' },

src/components/Table/SortableTable.stories.js

@@ -157,6 +157,7 @@ SortableTableExample.args = {
   bordered: false,
   hover: true,
   responsive: true,
+  showScrollShadows: true,
   size: 'sm',
   striped: true,
   truncate: false,