在 blueprintjs 表中创建排序答案

【问题标题】：Create sorting in a blueprintjs table在 blueprintjs 表中创建排序
【发布时间】：2020-11-28 05:36:01
【问题描述】：

我想让我的列按升序和降序排序。 blueprintjs 讨论了这是如何实现的，但并不清楚如何实现它的步骤。我有一个以这种格式创建的表。我希望能够对数字进行升序和降序排序。我尝试创建一个菜单，但似乎没有解决我的问题。

class DataTable extends Component {
  renderCell = (rowIndex, colIndex) => {
    return (
      <Cell>
        {rowIndex}
      </Cell>
    );
  };

  render() {
    const { data } = this.props;
    const { length } = data;
    return (
      <Table numRows={length} numFrozenColumns={1}>
        <Column name="Campaign" cellRenderer={this.renderCell} />
        <Column name="Date Sent" cellRenderer={this.renderCell} />
      </Table>
    );
  }
}

【问题讨论】：

标签： html-table blueprintjs

【解决方案1】：

这里有一个简单的例子。我希望它会有所帮助。

import { Column, ColumnHeaderCell, Table, Cell } from "@blueprintjs/table";
import { Menu, MenuItem } from "@blueprintjs/core";

export const SortableTable = () => {
  const [items] = useState([
    { _id: 1, campaign: "L", email: "some1@test.com" },
    { _id: 2, campaign: "A", email: "some2@test.com" },
    { _id: 3, campaign: "V", email: "some3@test.com" }
  ]);

  const cellRenderer = (rowIndex, type) => {
    return <Cell>{items[rowIndex][type]}</Cell>;
  };

  const handleSortCampaignAsc = () => {
    // todo sort asc
  };
  const handleSortCampaignDesc = () => {
    // todo sort desc
  };

  const menuRenderer = (sortAsc, sortDesc) => (
    <Menu>
      <MenuItem icon="sort-asc" onClick={sortAsc} text="Sort Asc" />
      <MenuItem icon="sort-desc" onClick={sortDesc} text="Sort Desc" />
    </Menu>
  );

  const header = () => (
    <ColumnHeaderCell
      name="Campaign"
      menuRenderer={menuRenderer(handleSortCampaignAsc, handleSortCampaignDesc)}
    />
  );

  return (
    <Table numRows={items.length}>
      <Column
        columnHeaderCellRenderer={header}
        cellRenderer={(rowIndex) => cellRenderer(rowIndex, "campaign")}
      />
      <Column
        name="Email"
        cellRenderer={(rowIndex) => cellRenderer(rowIndex, "email")}
      />
    </Table>
  );
};

附：不要忘记为图标添加依赖项。

【讨论】：