side bar update

2024-07-11 17:31:34 +01:00
parent 2eb12129bb
commit 450ae649c3
34 changed files with 1738 additions and 4 deletions
@@ -0,0 +1,66 @@
+import { useMemo } from "react";
+import { useTable, ColumnInstance, Row } from "react-table";
+import { CustomHeaderColumn } from "./columns/CustomHeaderColumn";
+import { CustomRow } from "./columns/CustomRow";
+import {
+  useQueryResponseData,
+  useQueryResponseLoading,
+} from "../core/QueryResponseProvider";
+import { usersColumns } from "./columns/_columns";
+import { User } from "../../core/_models";
+import { UsersListLoading } from "../components/loading/UsersListLoading";
+import { UsersListPagination } from "../components/pagination/UsersListPagination";
+import { KTCardBody } from "../../../../../_digifi/helpers";
+
+const UsersTable = () => {
+  const users = useQueryResponseData();
+  // console.log('users44', users)
+  const isLoading = useQueryResponseLoading();
+  const data = useMemo(() => users, [users]);
+  const columns = useMemo(() => usersColumns, []);
+  const { getTableProps, getTableBodyProps, headers, rows, prepareRow } =
+    useTable({
+      columns,
+      data,
+    });
+
+  return (
+    <KTCardBody className="py-4">
+      <div className="table-responsive">
+        <table
+          id="kt_table_users"
+          className="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
+          {...getTableProps()}
+        >
+          <thead>
+            <tr className="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
+              {headers.map((column: ColumnInstance<User>) => (
+                <CustomHeaderColumn key={column.id} column={column} />
+              ))}
+            </tr>
+          </thead>
+          <tbody className="text-gray-600 fw-bold" {...getTableBodyProps()}>
+            {rows.length > 0 ? (
+              rows.map((row: Row<User>, i) => {
+                prepareRow(row);
+                return <CustomRow row={row} key={`row-${i}-${row.id}`} />;
+              })
+            ) : (
+              <tr>
+                <td colSpan={7}>
+                  <div className="d-flex text-center w-100 align-content-center justify-content-center">
+                    No matching records found
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <UsersListPagination />
+      {isLoading && <UsersListLoading />}
+    </KTCardBody>
+  );
+};
+
+export { UsersTable };