Found graphql input objects.

client/src/components/job-tombstone/job-tombstone.component.jsx

@@ -25,7 +25,7 @@ function JobTombstone({ job, ...otherProps }) {
         console.log("Received values of form: ", values);
 
         mutationUpdateJob({
-          variables: { jobId: jobContext.id, job: JSON.stringify(values) }
+          variables: { jobId: jobContext.id, job: values }
         }).then(r => console.log("result", r));
       }
     });

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

@@ -1,18 +1,24 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { Table, Divider, Icon } from "antd";
+import { Table, Divider, Icon, Input } from "antd";
 import { alphaSort } from "../../utils/sorters";
 
 export default function JobsPage({ loading, jobs }) {
-  const [sortedInfo, setSortedInfo] = useState({});
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: null
+  });
 
   const columns = [
     {
       title: "RO #",
       dataIndex: "ro_number",
       key: "ro_number",
+      onFilter: (value, record) => record.ro_number.includes(value),
+      filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => alphaSort(a, b),
-      sortOrder: sortedInfo.columnKey === "ro_number" && sortedInfo.order,
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
       ellipsis: true,
       render: (text, record) => (
         <span>
@@ -30,7 +36,8 @@ export default function JobsPage({ loading, jobs }) {
       dataIndex: "status",
       key: "status",
       sorter: (a, b) => alphaSort(a, b),
-      sortOrder: sortedInfo.columnKey === "status" && sortedInfo.order,
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       ellipsis: true
     },
     {
@@ -76,19 +83,25 @@ export default function JobsPage({ loading, jobs }) {
     }
   ];
 
-  const handleChange = (pagination, filters, sorter) => {
-    setSortedInfo(sorter);
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const handleChange = event => {
+    const { name, value } = event.target;
+    setState({ ...state, filterinfo: { text: [value] } });
   };
 
   return (
     <div>
+      <Input name="searchCriteria" onChange={handleChange} />
       <Table
         loading={loading}
         pagination={{ position: "bottom" }}
         columns={columns.map(item => ({ ...item }))}
         rowKey="id"
         dataSource={jobs}
-        onChange={handleChange}
+        onChange={handleTableChange}
       />
     </div>
   );