Found graphql input objects.

client/src/pages/jobs/jobs.page.jsx

@@ -5,6 +5,7 @@ import AlertComponent from "../../components/alert/alert.component";
 import { SUBSCRIPTION_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
 
 import JobsList from "../../components/jobs-list/jobs-list.component";
+import Test from "./test";
 
 export default function JobsPage() {
   const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
@@ -13,5 +14,10 @@ export default function JobsPage() {
 
   if (error) return <AlertComponent message={error.message} />;
 
-  return <JobsList loading={loading} jobs={data ? data.jobs : null} />;
+  return (
+    <div>
+      <JobsList loading={loading} jobs={data ? data.jobs : null} />
+      <Test />
+    </div>
+  );
 }

client/src/pages/jobs/test.jsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { Table, Button } from "antd";
+
+const data = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    address: "New York No. 1 Lake Park"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 42,
+    address: "London No. 1 Lake Park"
+  },
+  {
+    key: "3",
+    name: "Joe Black",
+    age: 32,
+    address: "Sidney No. 1 Lake Park"
+  },
+  {
+    key: "4",
+    name: "Jim Red",
+    age: 32,
+    address: "London No. 2 Lake Park"
+  }
+];
+
+export default class Test extends React.Component {
+  state = {
+    filteredInfo: null,
+    sortedInfo: null
+  };
+
+  handleChange = (pagination, filters, sorter) => {
+    console.log("Various parameters", pagination, filters, sorter);
+    this.setState({
+      filteredInfo: filters,
+      sortedInfo: sorter
+    });
+  };
+
+  clearFilters = () => {
+    this.setState({ filteredInfo: null });
+  };
+
+  clearAll = () => {
+    this.setState({
+      filteredInfo: null,
+      sortedInfo: null
+    });
+  };
+
+  setAgeSort = () => {
+    this.setState({
+      sortedInfo: {
+        order: "descend",
+        columnKey: "age"
+      }
+    });
+  };
+
+  render() {
+    let { sortedInfo, filteredInfo } = this.state;
+    sortedInfo = sortedInfo || {};
+    filteredInfo = filteredInfo || {};
+    console.log("filteredInfo", filteredInfo);
+    const columns = [
+      {
+        title: "Name",
+        dataIndex: "name",
+        key: "name",
+        filters: [
+          { text: "Joe", value: "Joe" },
+          { text: "Jim", value: "Jim" }
+        ],
+        filteredValue: filteredInfo.name || null,
+        onFilter: (value, record) => record.name.includes(value),
+        sorter: (a, b) => a.name.length - b.name.length,
+        sortOrder: sortedInfo.columnKey === "name" && sortedInfo.order,
+        ellipsis: true
+      },
+      {
+        title: "Age",
+        dataIndex: "age",
+        key: "age",
+        sorter: (a, b) => a.age - b.age,
+        sortOrder: sortedInfo.columnKey === "age" && sortedInfo.order,
+        ellipsis: true
+      },
+      {
+        title: "Address",
+        dataIndex: "address",
+        key: "address",
+        filters: [
+          { text: "London", value: "London" },
+          { text: "New York", value: "New York" }
+        ],
+        filteredValue: filteredInfo.address || null,
+        onFilter: (value, record) => record.address.includes(value),
+        sorter: (a, b) => a.address.length - b.address.length,
+        sortOrder: sortedInfo.columnKey === "address" && sortedInfo.order,
+        ellipsis: true
+      }
+    ];
+    return (
+      <div>
+        <div className="table-operations">
+          <Button onClick={this.setAgeSort}>Sort age</Button>
+          <Button onClick={this.clearFilters}>Clear filters</Button>
+          <Button onClick={this.clearAll}>Clear filters and sorters</Button>
+        </div>
+        <Table
+          columns={columns}
+          dataSource={data}
+          onChange={this.handleChange}
+        />
+      </div>
+    );
+  }
+}