feature/feature/IO-3554-Form-Row-Layout - Responsive overhaul

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

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table, Typography } from "antd";
+import { Button, Card, Input, Space, Typography } from "antd";
 import queryString from "query-string";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,6 +14,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { pageLimit } from "../../utils/config";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -170,13 +171,14 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se
       }
     >
       <ContractsFindModalContainer />
-      <Table
+      <ResponsiveTable
         loading={loading}
         scroll={{
           x: "50%" //y: "40rem"
         }}
         pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1, 10), total: total }}
         columns={columns}
+        mobileColumnKeys={["agreementnumber", "driver_ln", "status", "scheduledreturn"]}
         rowKey="id"
         dataSource={contracts}
         onChange={handleTableChange}