UI Updates.

client/src/components/accounting-payables-table/accounting-payables-table.component.jsx

@@ -1,4 +1,4 @@
-import { Input, Table, Checkbox } from "antd";
+import { Input, Table, Checkbox, Card, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -145,28 +145,26 @@ export default function AccountingPayablesTableComponent({ loading, bills }) {
     : bills;
 
   return (
-    <div>
+    <Card
+      extra={
+        <Space wrap>
+          <PayableExportAll
+            billids={selectedBills}
+            disabled={transInProgress || selectedBills.length === 0}
+            loadingCallback={setTransInProgress}
+            completedCallback={setSelectedBills}
+          />
+          <Input
+            value={state.search}
+            onChange={handleSearch}
+            placeholder={t("general.labels.search")}
+            allowClear
+          />
+        </Space>
+      }
+    >
       <Table
         loading={loading}
-        title={() => {
-          return (
-            <div className="imex-table-header">
-              <PayableExportAll
-                billids={selectedBills}
-                disabled={transInProgress || selectedBills.length === 0}
-                loadingCallback={setTransInProgress}
-                completedCallback={setSelectedBills}
-              />
-              <Input
-                className="imex-table-header__search"
-                value={state.search}
-                onChange={handleSearch}
-                placeholder={t("general.labels.search")}
-                allowClear
-              />
-            </div>
-          );
-        }}
         dataSource={dataSource}
         pagination={{ position: "top", pageSize: 50 }}
         columns={columns}
@@ -185,6 +183,6 @@ export default function AccountingPayablesTableComponent({ loading, bills }) {
           type: "checkbox",
         }}
       />
-    </div>
+    </Card>
   );
 }