Update table component

hotel-management/src/pages/User/UserTable.tsx

@@ -1,17 +1,9 @@
-import { useCallback } from 'react';
-
 // Components
-import Menus from '@src/components/Menus';
 import Table from '@src/components/Table';
 import Message from '@src/components/Message';
 import Search from '@src/components/Search';
 import SortBy from '@src/components/SortBy';
 import OrderBy from '@src/components/OrderBy';
-import UserRow from './UserRow';
-import Pagination from '@src/components/Pagination';
-
-// Types
-import { IUser } from '@src/types/user';
 
 // Constants
 import { ORDERBY_OPTIONS, USER_PAGE } from '@src/constants/commons';
@@ -23,29 +15,46 @@ import Spinner from '@src/commons/styles/Spinner';
 
 // Hooks
 import { useUsers } from '@src/hooks/users/useUsers';
+import { ColumnProps } from '@src/types/common';
+import { IUser } from '@src/types/user';
+
+interface IUserTable extends Omit<IUser, 'isBooked'>{
+  isBooked: string;
+  onClick: () => void;
+}
 
 const UserTable = () => {
-  const columnName = [
-    'Id',
-    'Name',
-    'Phone',
-    'Is Booked'
+  const columns: ColumnProps[] = [
+    {
+      key: 'id',
+      title: 'Id',
+      width: 10,
+    },
+    {
+      key: 'name',
+      title: 'Name',
+      width: 35,
+    },
+    {
+      key: 'phone',
+      title: 'Phone',
+      width: 30,
+    },
+    {
+      key: 'isBooked',
+      title: 'Is Booked',
+      width: 20,
+    },
   ];
-  const {
-    isLoading,
-    users,
-    count
-  } = useUsers();
+  const { isLoading, users, count } = useUsers();
 
-  const renderUserRow = useCallback(
-    (user: IUser) => (
-      <UserRow
-        user={user}
-        key={user.id}
-      />
-    ),
-    []
-  );
+  const tempUsers = users?.map((user) => ({
+    ...user,
+    isBooked: user.isBooked 
+      ? 'Yes' 
+      : 'No',
+    onClick: () => console.log(user),
+  }));
 
   return (
     <>
@@ -59,16 +68,8 @@ const UserTable = () => {
 
         {isLoading && <Spinner />}
 
-        {users && users.length ? (
-          <Menus>
-            <Table columns="10% 35% 30% 15% 5%">
-              <Table.Header headerColumn={columnName} />
-              <Table.Body<IUser> data={users} render={renderUserRow} />
-              <Table.Footer>
-                <Pagination count={count!}/>
-              </Table.Footer>
-            </Table>
-          </Menus>
+        {tempUsers && tempUsers.length ? (
+          <Table<IUserTable> columns={columns} rows={tempUsers} count={count}/>
         ) : (
           !isLoading && <Message>No data to show here!</Message>
         )}