Added web UI

exp_groups/web/components/GroupsTable.tsx

@@ -0,0 +1,48 @@
+import React, { useContext, useState } from "react";
+import { Table } from "antd";
+import { useNavigate } from "react-router-dom";
+
+import { ControlContext, useAccount } from "@clusterio/web_ui";
+
+import GroupForm from "./GroupForm";
+
+const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;
+
+export default function GroupsTable() {
+	const control = useContext(ControlContext);
+	const plugin = control.plugins.get("exp_groups") as any;
+	const navigate = useNavigate();
+
+	const [groups, synced] = plugin.useGroups();
+
+	const [open, setOpen] = useState(false);
+
+	return <>
+		<Table
+			columns={[
+				{
+					title: "Name",
+					dataIndex: "name",
+					sorter: (a: any, b: any) => strcmp(a.name, b.name),
+				},
+				{
+					title: "Type",
+					render: (_: any, g: any) => g.permissions.isBlacklist ? "Blacklist" : "Whitelist",
+				},
+				{
+					title: "Permissions",
+					render: (_: any, g: any) => g.permissions.permissions.length,
+				},
+			]}
+			dataSource={[...groups.values()]}
+			loading={!synced}
+			pagination={false}
+			rowKey={(g) => g.id}
+			onRow={(g) => ({
+				onClick: () => navigate(`/exp_groups/${g.id}/view`),
+			})}
+		/>
+
+		<GroupForm open={open} setOpen={setOpen} />
+	</>;
+}