VioletSortLink

This component requests the first page of data, sorted by a given field. The example below shows two sort links as they would appear in the VioletDataTable component. The arrow in the Name column indicates that we have sorted the list by the name field in ascending order. Clicking the link would switch to descending order and flip the arrow.

In addition to the listId and the fetch function, VioletSortLink requires the field to sort by and the text to display.

import { VioletSortLink } from 'violet-paginator'

export default function TableHeader() {
  return (
    <thead>
      <tr>
        <td>
          <VioletSortLink listId="recipes" field="name" text="Name" />
          <VioletSortLink listId="recipes" field="created_at" text="Date Created" />
        </td>
      </tr>
    </thead>
  )
}