Initial dev on DataTable component.

src/components/pages/realtime/RealtimeCountries.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useRouter } from 'next/router';
-import DataTable from 'components/metrics/DataTable';
+import ListTable from 'components/metrics/ListTable';
 import useLocale from 'components/hooks/useLocale';
 import useCountryNames from 'components/hooks/useCountryNames';
 import useMessages from 'components/hooks/useMessages';
@@ -24,7 +24,7 @@ export function RealtimeCountries({ data }) {
   );
 
   return (
-    <DataTable
+    <ListTable
       title={formatMessage(labels.countries)}
       metric={formatMessage(labels.visitors)}
       data={data}

src/components/pages/realtime/RealtimeUrls.js

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import { ButtonGroup, Button, Flexbox } from 'react-basics';
 import firstBy from 'thenby';
 import { percentFilter } from 'lib/filters';
-import DataTable from 'components/metrics/DataTable';
+import ListTable from 'components/metrics/ListTable';
 import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
 import useMessages from 'components/hooks/useMessages';
 
@@ -82,7 +82,7 @@ export function RealtimeUrls({ websiteDomain, data = {} }) {
         </ButtonGroup>
       </Flexbox>
       {filter === FILTER_REFERRERS && (
-        <DataTable
+        <ListTable
           title={formatMessage(labels.referrers)}
           metric={formatMessage(labels.views)}
           renderLabel={renderLink}
@@ -90,7 +90,7 @@ export function RealtimeUrls({ websiteDomain, data = {} }) {
         />
       )}
       {filter === FILTER_PAGES && (
-        <DataTable
+        <ListTable
           title={formatMessage(labels.pages)}
           metric={formatMessage(labels.views)}
           renderLabel={renderLink}