特定の列でのダブルソートによるグリッドテーブルの反応

Question

新しく作成するタスクを完了するのは難しいです。私はいくつかの列に2つのフィールドが必要なテーブルを実装する必要があります。これらの列には、ユーザーが選択したフィールドを並べ替えるソート機能が必要です。次の2つのフィールドを含む列を見ることができます

：より正確であると 、下のスクリーンショットを参照してください。ユーザーがフィールド内をクリックすると、矢印が表示され、グリッドが選択された値でソートされます。ユーザーが他のフィールド（価格など）をクリックすると、矢印が表示され、フィールドは太字になり、グリッドは選択したフィールドでソートされます。

私はGriddleを使用しますが、Griddleにそのような機能を実装するにはどうしたらいいですか？自分のグリッドをゼロから作るべきですか？

Answer 1

これは、データを状態に格納していて、データが文字列、数値またはブールのいずれかである場合は、任意の列をソートします。

function sortFunc(a, b, key) { 
 
    
 
    if (typeof(a[key]) === 'number') { 
 
    return a[key] - b[key]; 
 
    } else if (typeof(a[key]) === 'boolean') { 
 
    return a[key] ? 0 : 1; 
 
    } 
 

 
    const ax = []; 
 
    const bx = []; 
 

 
    a[key].replace(/(\d+)|(\D+)/g, (_, $1, $2) => { ax.push([$1 || Infinity, $2 || '']); }); 
 
    b[key].replace(/(\d+)|(\D+)/g, (_, $1, $2) => { bx.push([$1 || Infinity, $2 || '']); }); 
 

 
    while (ax.length && bx.length) { 
 
    const an = ax.shift(); 
 
    const bn = bx.shift(); 
 
    const nn = (an[0] - bn[0]) || an[1].localeCompare(bn[1]); 
 
    if (nn) return nn; 
 
    } 
 

 
    return ax.length - bx.length; 
 
} 
 

 
function sortByColumn(column, data) { 
 
     const isAsc = this.state.sortHeader === column ? !this.state.isAsc : true; 
 
     const sortedData = data.sort((a, b) => sortFunc(a, b, column)); 
 

 
     if (!isAsc) { 
 
     sortedData.reverse(); 
 
     } 
 

 
     this.setState({ 
 
     data: sortedData, 
 
     sortHeader: column, 
 
     isAsc 
 
     }); 
 
    }

<IconButton onClick={() => this.sortByColumn(column.key, this.state.data)} style={styles.sortButton} > 
 
    <SortIcon /> 
 
</IconButton>