React 网格 table 在特定列中进行双重排序

Question

我很难完成新出现的任务。我必须实现一个 table，其中某些列必须有两个字段。这些列必须具有排序功能，用户可以通过该功能对所选字段进行排序。更准确地说，请看下面的截图：

您可以看到包含两个字段的列。当用户在一个字段中单击时，必须显示箭头并且网格将按所选值排序。当用户单击其他字段（例如价格）时，将显示箭头，该字段变为粗体并且网格按所选字段排序。

我使用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, (_, , ) => { ax.push([ || Infinity,  || '']); });
  b[key].replace(/(\d+)|(\D+)/g, (_, , ) => { bx.push([ || Infinity,  || '']); });

  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>

React 网格 table 在特定列中进行双重排序

React grid table with double sorting in specific columns

grid

reactjs

griddle