feat: add table component on manage account and manage groups

src/pages/groups/Column.tsx

@@ -0,0 +1,30 @@
+import { ColumnDef } from '@tanstack/react-table';
+
+export type Group = {
+  id: number;
+  createdDate: Date;
+  name: string;
+  description: string;
+};
+
+export const columns: ColumnDef<Group>[] = [
+  {
+    accessorKey: 'id',
+    header: 'ID'
+  },
+  {
+    accessorKey: 'createdDate',
+    header: 'Created Date'
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name'
+  },
+  {
+    accessorKey: 'description',
+    header: 'Description'
+  },
+  {
+    id: 'actions'
+  }
+];

src/pages/groups/ManageGroups.tsx

@@ -0,0 +1,36 @@
+import { DataTable } from '@/components/ui/DataTable';
+import { columns, Group } from './Column';
+
+const dataGroup: Group[] = [
+  {
+    id: 1,
+    createdDate: new Date('2018-11-23'),
+    name: 'ADMIN',
+    description: 'Admin Web'
+  },
+  {
+    id: 2,
+    createdDate: new Date('2019-02-08'),
+    name: 'BANK',
+    description: 'Bank/Switching Group'
+  },
+  {
+    id: 3,
+    createdDate: new Date('2018-11-27'),
+    name: 'REGULER',
+    description: 'Reguler Member'
+  }
+];
+
+const ManageGroups = () => {
+  return (
+    <div>
+      <div className="container mx-auto pt-2">
+        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
+        <DataTable data={dataGroup} columns={columns} />
+      </div>
+    </div>
+  );
+};
+
+export default ManageGroups;