Necesito ordenar una tabla de reacción en función de diferentes valores según el encabezado de la columna en el que se hace clic. Hasta ahora este es mi código:

 { 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, },

Siendo esta mi tabla:

 <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} />

Pasar una ordenación a la propiedad sortMethod parece ser la forma correcta, pero ¿cómo implemento esto realmente? En la tabla, puede ver que paso un método onEdit que maneja cuando se edita una celda. También probé de esta manera para un encabezado, pero parece que no tiene acceso a los mismos accesorios.