[react] How to set sorting based on a html select?

[marceloverdijk]

Having a react table like:

	const [data] = useState(() => [...initialData])
	const [globalFilter, setGlobalFilter] = useState('')
	const [sorting, setSorting] = useState<SortingState>([])

	const table = useReactTable({
		data,
		columns,
		state: {
			globalFilter,
			sorting,
		},
		getCoreRowModel: getCoreRowModel(),
		getFilteredRowModel: getFilteredRowModel(),
		getPaginationRowModel: getPaginationRowModel(),
		onGlobalFilterChange: setGlobalFilter,
		onSortingChange: setSorting,
	})

and a custom html select having the sorting options:

<select onChange={event => console.log(event.target.selectedIndex)}>
    <option value="meta.rank" data-sort-id="meta.rank">Relevance</option>
    <option value="name" data-sort-id="name">Name</option>
    <option value="totalEntries__desc" data-sort-id="totalEntries" data-sort-order="desc">Entries high - low</option>
    <option value="totalEntries__asc" data-sort-id="totalEntries" data-sort-order="asc">Entries low - high</option>
</select>

When the select changes I want to kick-in the table sorting based on the data-sort-id and data-sort-order (if omitted; asc).

I believe I have to call the setSorting() here , but how to do this?
What do I need to pass?

[marceloverdijk]

I got it working with:

const [data] = useState(() => [...initialData])
const [globalFilter, setGlobalFilter] = useState('')

const table = useReactTable({
  data,
  columns,
  state: {
    globalFilter,
  },
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
  onGlobalFilterChange: setGlobalFilter,
})


const handleSortChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
  const selectedIndex = event.target.selectedIndex
  const selectedOption = event.target.options[selectedIndex]!
  const id = selectedOption.dataset.sortId!
  const desc = selectedOption.dataset.sortOrder === 'desc'
  table.setSorting([{ id, desc }])
}

<select onChange={handleSortChange}>
    <option data-sort-id="meta.rank">Relevance</option>
    <option data-sort-id="name">Name</option>
    <option data-sort-id="totalEntries" data-sort-order="desc">Entries high - low</option>
    <option data-sort-id="totalEntries" data-sort-order="asc">Entries low - high</option>
</select>