Fix tables sorting being broken

Newer versions of Ant Design requires either dataIndex or key to be
defined on columns for sorting of the tables to work.  Add missing key
entries on columns.

packages/web_ui/src/components/HostsPage.tsx

@@ -217,12 +217,14 @@ export default function HostsPage() {
 				},
 				{
 					title: "CPU%",
+					key: "cpuPct",
 					sorter: (a, b) => (systems.get(a.id)?.cpuRatio ?? 0) - (systems.get(b.id)?.cpuRatio ?? 0),
 					render: (_, host) => <MetricCpuRatio system={systems.get(host.id)} />,
 					hidden: !showRatios,
 				},
 				{
 					title: "Cores",
+					key: "cores",
 					sorter: (a, b) => (
 						(systems.get(a.id)?.cpuUsed ?? 0) - (systems.get(b.id)?.cpuUsed ?? 0)
 					),
@@ -231,6 +233,7 @@ export default function HostsPage() {
 				},
 				{
 					title: "Mem%",
+					key: "memPct",
 					sorter: (a, b) => (
 						(systems.get(a.id)?.memoryRatio ?? 0) - (systems.get(b.id)?.memoryRatio ?? 0)
 					),
@@ -239,6 +242,7 @@ export default function HostsPage() {
 				},
 				{
 					title: "Memory",
+					key: "memory",
 					sorter: (a, b) => (
 						(systems.get(a.id)?.memoryUsed ?? 0) - (systems.get(b.id)?.memoryUsed ?? 0)
 					),
@@ -247,12 +251,14 @@ export default function HostsPage() {
 				},
 				{
 					title: "Disk%",
+					key: "diskPct",
 					sorter: (a, b) => (systems.get(a.id)?.diskAvailable ?? 0) - (systems.get(b.id)?.diskAvailable ?? 0),
 					render: (_, host) => <MetricDiskRatio system={systems.get(host.id)} />,
 					hidden: !showRatios,
 				},
 				{
 					title: "Disk",
+					key: "disk",
 					sorter: (a, b) => (
 						(systems.get(a.id)?.diskUsed ?? 0) - (systems.get(b.id)?.diskUsed ?? 0)
 					),

packages/web_ui/src/components/ModsPage.tsx

@@ -209,7 +209,7 @@ export default function ModsPage() {
 				},
 				{
 					title: "Mods",
-					key: "roles",
+					key: "mods",
 					render: (_, modPack) => modPack.mods.size,
 				},
 			]}

packages/web_ui/src/components/PluginsPage.tsx

@@ -77,6 +77,7 @@ export default function PluginsPage() {
 				},
 				{
 					title: "Loaded",
+					key: "loaded",
 					render: (_, plugin) => (plugin.package ? "Yes" : null),
 					sorter: (a, b) => Number(Boolean(a.package)) - Number(Boolean(b.package)),
 					responsive: ["sm"],

packages/web_ui/src/components/SavesList.tsx

@@ -214,6 +214,7 @@ export default function SavesList(props: { instance: lib.InstanceDetails }) {
 		columns={[
 			{
 				title: "Name",
+				key: "name",
 				render: (_, save) => <>
 					{save.name}
 					{save.loaded && <Tooltip title="Currently loaded save"><CaretLeftOutlined /></Tooltip>}