Реагировать таблицу сетки с двойной сортировкой в ​​определенных столбцах

Question

У меня возникли трудности с выполнением возникающей задачи. Я должен реализовать таблицу, в которой некоторые столбцы должны иметь два поля. Эти столбцы должны иметь функцию сортировки, с помощью которой пользователь сможет сортировать выбранные поля. Чтобы быть более точным, см скриншот ниже:

Вы можете увидеть столбцы, который содержит два поля. Когда пользователь нажимает на поле, стрелки должны быть показаны, и сетка будет сортироваться по выбранному значению. Когда пользователь нажимает на другие поля (например, цена), отображаются стрелки, поле становится полужирным, а сетка сортируется по выбранному полю.

Я использую 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>