Пользовательский метод сортировки заголовка таблицы react

#javascript #reactjs #sorting #react-table

Вопрос:

Мне нужно отсортировать таблицу реакций на основе разных значений в зависимости от заголовка столбца, на который нажата кнопка. Пока что это мой код:

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

Это мой столик:

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

Передача сортировки в sortMethod опору кажется правильным способом, но как мне это реализовать на самом деле? В таблице вы можете видеть, что я передаю onEdit метод, который обрабатывает редактирование ячейки. Я пробовал этот способ и для заголовка, но, похоже, у него нет доступа к тем же реквизитам.