Merge pull request clauderic#271 from silvenon/examples-virtual-table-columns

Add example for sorting react-virtualized table columns

Author: Claudéric Demers

.eslintrc

@@ -15,6 +15,7 @@
         ],
         "allowSamePrecedence": true
       }
-    ]
+    ],
+    "quotes": ["error", "single"]
   }
 }

examples/drag-handle.js

@@ -33,14 +33,14 @@ class SortableComponent extends Component {
     items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
   };
   onSortEnd = ({oldIndex, newIndex}) => {
-    let {items} = this.state;
+    const {items} = this.state;
 
     this.setState({
       items: arrayMove(items, oldIndex, newIndex),
     });
   };
   render() {
-    let {items} = this.state;
+    const {items} = this.state;
 
     return <SortableList items={items} onSortEnd={this.onSortEnd} useDragHandle={true} />;
   }

examples/infinite-list.js

@@ -33,14 +33,14 @@ class SortableComponent extends Component {
     ],
   };
   onSortEnd = ({oldIndex, newIndex}) => {
-    let {items} = this.state;
+    const {items} = this.state;
 
     this.setState({
       items: arrayMove(items, oldIndex, newIndex),
     });
   };
   render() {
-    let {items} = this.state;
+    const {items} = this.state;
 
     return <SortableList items={items} onSortEnd={this.onSortEnd} />;
   }

examples/virtual-list.js

@@ -13,7 +13,7 @@ const SortableItem = SortableElement(({value}) => {
 
 class VirtualList extends Component {
   render() {
-    let {items} = this.props;
+    const {items} = this.props;
 
     return (
       <List
@@ -22,7 +22,7 @@ class VirtualList extends Component {
         }}
         rowHeight={({index}) => items[index].height}
         rowRenderer={({index}) => {
-          let {value} = items[index];
+          const {value} = items[index];
           return <SortableItem index={index} value={value} />;
         }}
         rowCount={items.length}
@@ -53,21 +53,21 @@ class SortableComponent extends Component {
   };
   onSortEnd = ({oldIndex, newIndex}) => {
     if (oldIndex !== newIndex) {
-      let {items} = this.state;
+      const {items} = this.state;
 
       this.setState({
         items: arrayMove(items, oldIndex, newIndex),
       });
 
       // We need to inform React Virtualized that the items have changed heights
-      let instance = this.SortableList.getWrappedInstance();
+      const instance = this.SortableList.getWrappedInstance();
 
       instance.List.recomputeRowHeights();
       instance.forceUpdate();
     }
   };
   render() {
-    let {items} = this.state;
+    const {items} = this.state;
 
     return (
       <SortableList 

examples/virtual-table-columns.js

@@ -0,0 +1,76 @@
+import React, {Component} from 'react';
+import {render} from 'react-dom';
+import {Table, Column} from 'react-virtualized';
+import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
+import 'react-virtualized/styles.css';
+
+const ROW_HEIGHT = 30;
+const HEADER_ROW_HEIGHT = 20;
+const COL_WIDTH = 100;
+
+const SortableHeader = SortableElement(({children, ...props}) =>
+  React.cloneElement(children, props)
+);
+
+const SortableHeaderRowRenderer = SortableContainer(
+  ({className, columns, style}) => (
+    <div className={className} role="row" style={style}>
+      {React.Children.map(columns, (column, index) => (
+        <SortableHeader index={index}>
+          {column}
+        </SortableHeader>
+      ))}
+    </div>
+  )
+);
+
+class TableWithSortableColumns extends Component {
+  state = {
+    cols: [
+      {dataKey: 'col1', label: 'Column 1'},
+      {dataKey: 'col2', label: 'Column 2'},
+      {dataKey: 'col3', label: 'Column 3'},
+    ],
+    rows: [
+      {col1: 'row1 col1', col2: 'row1 col2', col3: 'row1 col3'},
+      {col1: 'row2 col1', col2: 'row2 col2', col3: 'row2 col3'},
+      {col1: 'row3 col1', col2: 'row3 col2', col3: 'row3 col3'},
+    ],
+  };
+  onSortEnd = ({oldIndex, newIndex}) => {
+    this.setState(state => ({
+      cols: arrayMove(state.cols, oldIndex, newIndex),
+    }));
+  };
+  render() {
+    const {rows, cols} = this.state;
+    return (
+      <Table
+        width={COL_WIDTH * rows.length}
+        height={HEADER_ROW_HEIGHT + (ROW_HEIGHT * rows.length)}
+        headerHeight={ROW_HEIGHT}
+        rowHeight={ROW_HEIGHT}
+        rowCount={rows.length}
+        rowGetter={({index}) => rows[index]}
+        headerRowRenderer={params => (
+          <SortableHeaderRowRenderer
+            {...params}
+            axis="x"
+            lockAxis="x"
+            onSortEnd={this.onSortEnd}
+          />
+        )}
+      >
+        {cols.map(col => (
+          <Column
+            {...col}
+            key={col.dataKey}
+            width={COL_WIDTH}
+          />
+        ))}
+      </Table>
+    );
+  }
+}
+
+render(<TableWithSortableColumns />, document.getElementById('root'));