IO-2671 Add in appropriate sorters at same time

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

client/src/components/vehicles-list/vehicles-list.component.jsx

@@ -4,8 +4,9 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
+import { pageLimit } from "../../utils/config";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
-import {pageLimit} from "../../utils/config";
+import { alphaSort } from './../../utils/sorters';
 export default function VehiclesListComponent({
   loading,
   vehicles,
@@ -31,6 +32,8 @@ export default function VehiclesListComponent({
       title: t("vehicles.fields.v_vin"),
       dataIndex: "v_vin",
       key: "v_vin",
+      sorter: (a, b) => alphaSort(a.v_vin, b.v_vin),
+      sortOrder: state.sortedInfo.columnKey === "v_vin" && state.sortedInfo.order,
       render: (text, record) => (
         <Link to={"/manage/vehicles/" + record.id}>
           <VehicleVinDisplay>{record.v_vin || "N/A"}</VehicleVinDisplay>
@@ -51,8 +54,10 @@ export default function VehiclesListComponent({
     },
     {
       title: t("vehicles.fields.plate_no"),
-      dataIndex: "plate",
-      key: "plate",
+      dataIndex: "plate_no",
+      key: "plate_no",
+      sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
+      sortOrder: state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
       render: (text, record) => {
         return (
           <span>{`${record.plate_st || ""} | ${record.plate_no || ""}`}</span>