desc、ascによる並べ替え機能

Question

私は、列配列とデータ配列を持つテーブルコンポーネントを持っています。並べ替えの列とテーブルのテーブルの状態を更新する必要があります。私のメソッドは2つの引数を受け取りますキー（カラムキー）とソート可能（真または偽のカラムはソート可能かどうか）を、どのように混乱させますか？テーブルの列をソートするための最良の解決策は何ですか？それは簡単で、かつソート番号と文字列

const columns = [ 
    { 
     key: 'deviceType', 
     label:'Device Type', 
     numeric: false, 
    }, { 
     key: 'deviceID', 
     label:'Device ID', 
     sortable: true, 
     numeric: true, 
     // cellRenderer: ({item, key}) => 
     //   <Button >Default</Button>, 
    }, { 
     key: 'name', 
     label: 'Name', 
     sortable: false, 
     numeric: false, 

    },{ 
     key: 'currentVersion', 
     label: 'Current Version', 
     sortable: false, 
     numeric: false, 
    },{ 
     key: 'location', 
     label: 'Location', 
     sortable: false, 
     numeric: false, 
    },{ 
     key: 'status', 
     label: 'Status', 
     sortable: false, 
     numeric: false, 
    },{ 
     key: 'lastAliveMessage', 
     label: 'Last alive message', 
     sortable: false, 
     numeric: false, 
    }, { 
     key: 'action', 
     label: 'Actions', 
     cellRenderer:() => <SimpleMenu />, 
    }] 

const data = [ 
    { key: 1, deviceType: 'Tag', deviceID: 1, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'}, 
    { key: 2, deviceType: 'Tag', deviceID: 2, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'}, 
    { key: 3, deviceType: 'Tag', deviceID: 3, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'}, 
    { key: 4, deviceType: 'Tag', deviceID: 4, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'}, 
    { key: 5, deviceType: 'Tag', deviceID: 5, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'}, 
] 

class EnhancedTable extends Component { 
    state = { 
     selected: [], 
     data, 
     order: 'asc', 
     search: '', 
    } 

    handleRequestSort = (key, sortable) => { 
     let order = 'desc' 

     // if (this.state.order.by === key && this.state.order.direction === 'desc') { 
     //  order = 'asc' 
     // } 
     if (sortable && this.state.order.direction === 'desc') { 
      order = 'asc' 
     } 
     const data = this.state.data.sort(
      (a, b) => { 
       order === 'desc' ? b[key] > a[key] : a[key] > b[key]}, 
     ) 

     this.setState({ data, order }) 
    } 

Answer 1

sortは、インプレース配列の変更を行うことにより、作る方法。そして、あなたは帰ってこなかった。

const data = this.state.data.slice() 
data.sort(
      (a, b) => { 
       return order === 'desc' ? b[key] > a[key] : a[key] > b[key] 
      }, 
     ) 

または削除{}

data.sort(
    (a, b) => (order === 'desc' ? b[key] > a[key] : a[key] > b[key]), 
)