refactor(docker/events): convert table to react [EE-4667] (#8937)

app/react/docker/events/EventsDatatables.tsx

@@ -0,0 +1,54 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { Clock } from 'lucide-react';
+
+import { isoDateFromTimestamp } from '@/portainer/filters/filters';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+
+type DockerEvent = {
+  Time: number;
+  Type: string;
+  Details: string;
+};
+
+const columnHelper = createColumnHelper<DockerEvent>();
+
+export const columns = [
+  columnHelper.accessor('Time', {
+    header: 'Date',
+    cell: ({ getValue }) => {
+      const value = getValue();
+      return isoDateFromTimestamp(value);
+    },
+  }),
+  columnHelper.accessor('Type', {
+    header: 'Type',
+  }),
+  columnHelper.accessor('Details', {
+    header: 'Details',
+  }),
+];
+
+const tableKey = 'docker-events';
+const settingsStore = createPersistedStore(tableKey, {
+  id: 'Time',
+  desc: true,
+});
+
+export function EventsDatatable({ dataset }: { dataset: Array<DockerEvent> }) {
+  const tableState = useTableState(settingsStore, tableKey);
+
+  return (
+    <Datatable
+      dataset={dataset}
+      columns={columns}
+      settingsManager={tableState}
+      title="Events"
+      titleIcon={Clock}
+      disableSelect
+      emptyContentLabel="No event available."
+    />
+  );
+}