How to implement custom sort button

[automatedmachine]

So I have a fairly straight forward drop down menu I'd like to use to replace the native "click to sort" functionality. I've tried several ways to implement it, but I've gotten infinite loops, or errors such as "toggleSortBy is not a function". The method that seems most likely to work is something like the one in this example:
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/data-driven-classes-and-styles?file=/src/App.js

I've stripped down the function to an absolute barebones version below. Can someone help me implement this into a basic table?

• edit - I should clarify that I am trying to put this function as a button embedded in the header cell.

export function dropDownHeader (column: Column) {
  function sortAscHandler () {
    column.toggleSortBy(false)
  }
  return (
    <button onClick={sortAscHandler()}>Sort Asc</button>
  )
}

[automatedmachine]

I found a solution. I was trying to keep the function outside of the actual table component function to keep it slim and pass the column in as a prop, but I think there was more instance properties required to make that work? Instead I've just put the dropDownHeader function directly inside the useTable function and directly access the main table's toggleSortBy function. Works great.

...
useTable(
...

function dropDownHeader (column) {
  function sortAscHandler () {
    toggleSortBy(column.id, false, false)
  }
  return (
    <button onClick={() => sortAscHandler()}>Sort Asc</button>
  )
}

and then I call the dropdown function in the table body as below:

<div className='th'
     {...column.getHeaderProps()}
>
     {column.render('Header')}
     {dropDownHeader(column)}
</div>

End result: 👍

[ankursehdev]

Hello, thanks for the answer but is it possible to put the complete solution in a Sandbox?
want to implement this and custom header buttons.