Question

我想按照标题对数据进行排序。让我有一个像这样的常量。

const headTitles = ["number", "champion", "mastery_level", "points", "progress", "tokens", "vision_score", "chest", "last_played"];

我在thead中这样做：

<thead>
  <tr>
    {headTitles.map(title => <th key={title}><Translate use={`connekt_champions_table_${title}_title`} /></th>)}
  </tr>
</thead>

然后在tbody我有基本的东西，如：

{data.map((item, i) => (
  <tr key={item.name}><td>{item.name}</td></tr>
}

Answer 1

你可以使用蚂蚁设计https://ant.design/components/table/，它有几种属性可以从表中对数据进行排序，或者你可以根据它来做它。

    <thead>
      <tr>
        {headTitles.map(title => <th onClick={() => sortData(title)}
         key={title}><Translate use={`connekt_champions_table_${title}_title`} /></th>)}
      </tr>
    </thead>

并使用变量对数据进行排序：

sortData = (sortRow) => {
  const newDataSorted = data.sort((a, b) => {
    if (a[sortRow] > b[sortRow]) {
      return 1;
    }
    if (a[sortRow] < b[sortRow]) {
      return -1;
    }
    // a must be equal to b
    return 0;
  })
}

有关排序MDN Sort

的更多信息

点击表格中的tbody中的排序数据

1 个答案: