Jobslines schema. Added phone number formatting.

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

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { Table } from "antd";
+import { alphaSort } from "../../utils/sorters";
+
+export default function JobLinesComponent({ loading, joblines }) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" }
+  });
+
+  const columns = [
+    {
+      title: "Line #",
+      dataIndex: "line_ind",
+      key: "line_ind",
+      // onFilter: (value, record) => record.ro_number.includes(value),
+      // filteredValue: state.filteredInfo.text || null,
+      sorter: (a, b) => alphaSort(a, b),
+      sortOrder:
+        state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
+      ellipsis: true
+    },
+    {
+      title: "Description",
+      dataIndex: "line_desc",
+      key: "line_desc",
+      sorter: (a, b) => alphaSort(a, b),
+      sortOrder:
+        state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
+      ellipsis: true
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const handleChange = event => {
+    const { value } = event.target;
+    setState({ ...state, filterinfo: { text: [value] } });
+  };
+console.log('joblines', joblines)
+  return (
+    <Table
+      loading={loading}
+      pagination={{ position: "bottom" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={joblines}
+      onChange={handleTableChange}
+    />
+  );
+}