Reagieren Grid-Tabelle mit Doppel-Sortierung in bestimmten Spalten

Question

Ich habe Schwierigkeiten, eine aufkommende Aufgabe abzuschließen. Ich muss eine Tabelle implementieren, in der einige Spalten zwei Felder haben müssen. Diese Spalten müssen eine Sortierfunktion haben, über die der Benutzer die ausgewählten Felder sortieren kann. Um genauer zu sein, siehe Abbildung unten:

Sie können die Spalten sehen, die zwei Felder enthält. Wenn der Benutzer in ein Feld klickt, müssen Pfeile angezeigt werden und das Gitter wird nach dem ausgewählten Wert sortiert. Wenn der Benutzer auf die anderen Felder klickt (Preis zum Beispiel), werden Pfeile angezeigt, das Feld wird fett und das Gitter wird nach dem ausgewählten Feld sortiert.

Ich benutze Griddle aber, wie kann ich in Griddle solch eine Funktionalität implementieren? Soll ich mein eigenes Raster von Grund auf neu erstellen?

Answer 1

Dies wird jede Spalte sortieren, wenn Sie Ihre Daten in dem Zustand gespeichert haben und die Daten entweder eine Zeichenfolge, eine Zahl oder ein boolescher Wert sind.

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>