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

client/src/components/bills-list-table/bills-list-table.component.jsx

@@ -1,5 +1,5 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Checkbox, Input, Space, Table } from "antd";
+import { Button, Card, Checkbox, Input, Space } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaTasks } from "react-icons/fa";
@@ -18,6 +18,7 @@ import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -237,12 +238,13 @@ export function BillsListTableComponent({
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={billsQuery.loading}
         scroll={{
           x: true // y: "50rem"
         }}
         columns={columns}
+        mobileColumnKeys={["vendorname", "invoice_number", "date", "total", "actions"]}
         rowKey="id"
         dataSource={hasBillsAccess ? filteredBills : []}
         onChange={handleTableChange}