Initial dev on DataTable component.

src/components/metrics/EventsChart.js

@@ -13,17 +13,17 @@ export function EventsChart({ websiteId, className, token }) {
   const { locale } = useLocale();
   const [timezone] = useTimezone();
   const {
-    query: { url, eventName },
+    query: { url, event },
   } = usePageQuery();
 
-  const { data, isLoading } = useQuery(['events', websiteId, modified, eventName], () =>
+  const { data, isLoading } = useQuery(['events', websiteId, modified, event], () =>
     get(`/websites/${websiteId}/events`, {
       startAt: +startDate,
       endAt: +endDate,
       unit,
       timezone,
       url,
-      eventName,
+      event,
       token,
     }),
   );

src/components/metrics/ListTable.js

@@ -6,9 +6,9 @@ import classNames from 'classnames';
 import Empty from 'components/common/Empty';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import useMessages from 'components/hooks/useMessages';
-import styles from './DataTable.module.css';
+import styles from './ListTable.module.css';
 
-export function DataTable({
+export function ListTable({
   data = [],
   title,
   metric,
@@ -102,4 +102,4 @@ const AnimatedRow = ({
   );
 };
 
-export default DataTable;
+export default ListTable;

src/components/metrics/MetricsTable.js

@@ -8,7 +8,7 @@ import { percentFilter } from 'lib/filters';
 import useDateRange from 'components/hooks/useDateRange';
 import usePageQuery from 'components/hooks/usePageQuery';
 import ErrorMessage from 'components/common/ErrorMessage';
-import DataTable from './DataTable';
+import ListTable from './ListTable';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
@@ -104,7 +104,7 @@ export function MetricsTable({
     <div className={classNames(styles.container, className)}>
       {!data && isLoading && !isFetched && <Loading icon="dots" />}
       {error && <ErrorMessage />}
-      {data && !error && <DataTable {...props} data={filteredData} className={className} />}
+      {data && !error && <ListTable {...props} data={filteredData} className={className} />}
       <div className={styles.footer}>
         {data && !error && limit && (
           <Link href={router.pathname} as={resolveUrl({ view: type })}>