diff --git a/components/metrics/EventsTable.js b/components/metrics/EventsTable.js
index 437942fb..2d301f8d 100644
--- a/components/metrics/EventsTable.js
+++ b/components/metrics/EventsTable.js
@@ -1,18 +1,65 @@
-import React from 'react';
+import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable';
import Tag from 'components/common/Tag';
+import DropDown from 'components/common/DropDown';
+import { eventTypeFilter } from 'lib/filters';
+import useDateRange from 'hooks/useDateRange';
+import useFetch from 'hooks/useFetch';
+import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import { TOKEN_HEADER } from 'lib/constants';
+
+const EVENT_FILTER_DEFAULT = {
+ value: 'EVENT_FILTER_DEFAULT',
+ label: 'All Events',
+};
export default function EventsTable({ websiteId, ...props }) {
+ const [eventType, setEventType] = useState(EVENT_FILTER_DEFAULT.value);
+
+ const {
+ query: { url },
+ } = usePageQuery();
+
+ const shareToken = useShareToken();
+ const [dateRange] = useDateRange(websiteId);
+
+ const { startDate, endDate, modified } = dateRange;
+ const { data, loading, error } = useFetch(
+ `/api/website/${websiteId}/event-types`,
+ {
+ params: {
+ start_at: +startDate,
+ end_at: +endDate,
+ url,
+ },
+ headers: { [TOKEN_HEADER]: shareToken?.token },
+ },
+ [modified],
+ );
+
+ const eventTypes = data ? [...new Set(data.map(({ x }) => x))] : [];
+ const dropDownOptions = [EVENT_FILTER_DEFAULT, ...eventTypes.map(t => ({ value: t, label: t }))];
+
return (
-