javascript - 反应表头的自定义排序方法

Question

我需要根据单击的列标题根据不同的值对反应表进行排序。到目前为止，这是我的代码：

{
    sortMethod: (a: ListItem, b: ListItem) => {
      console.log(a, b);
      return 1;
    },
    Header: (rest) => {
      console.log(rest);
      return (
        <Flex height={16} width="100%" justifyContent="center">
          <Text onClick={() => rest.column.sortMethod()} color="black">Name</Text>
        </Flex>
      );
    },
    accessor: 'product.name',
    minWidth: 280,
  },

这是我的桌子：

<Table
      key={`table.${products.length}.${selectedKeys.join('.')}`}
      isSelectable
      showPagination={showPagination}
      defaultPageSize={defaultPageSize}
      pageSizeOptions={pageSizes}
      onSelectionChange={(newSelectedProducts: ListItem[]) => {
        if (tableProductsWithTags.length > 0) {
          setSelectedProducts(newSelectedProducts.filter(Boolean));
        }
      }}
      noDataText={isLoading ? 'Loading ...' : 'No products'}
      columns={projectColumns}
      selectedKeys={selectedKeys}
      keyField="id"
      defaultSorted={sortingOptions}
      data={tableProductsWithTags}
      getTrProps={() => {
        return { style: { alignItems: 'start' }, passthrought: { onClick: setFilterOption } };
      }}
      getTdProps={
        ((_state, _rowInfo, column: { id: string }) => {
          const tdProps: { [key: string]: any } = {
            style: { minHeight: 55 }
          };
          if (column.id === 'tags') {
            tdProps.passthrough = { onEdit: handleEditProduct };
          }
          return tdProps;
        }) as ComponentPropsGetterRC
      }
      {...props}
    />

将排序传递给sortMethod道具似乎是正确的方法，但我该如何实际实现呢？在表格中，您可以看到我传入了一个onEdit在编辑单元格时处理的方法。我也尝试过这种方式来获取标题，但似乎它无法访问相同的道具。

标签： javascriptreactjssortingreact-table