Update table components.

components/metrics/BrowsersTable.js

@@ -3,15 +3,15 @@ import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import { browserFilter } from 'lib/filters';
 
-export default function BrowsersTable({ websiteId, token, limit }) {
+export default function BrowsersTable({ websiteId, token, ...props }) {
   return (
     <MetricsTable
+      {...props}
       title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
       type="browser"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
       token={token}
-      limit={limit}
       dataFilter={browserFilter}
     />
   );

components/metrics/CountriesTable.js

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
 
-export default function CountriesTable({ websiteId, token, limit, onDataLoad = () => {} }) {
+export default function CountriesTable({ websiteId, token, onDataLoad, ...props }) {
   const [locale] = useLocale();
   const countryNames = useCountryNames(locale);
 
@@ -15,13 +15,13 @@ export default function CountriesTable({ websiteId, token, limit, onDataLoad = (
 
   return (
     <MetricsTable
+      {...props}
       title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
       type="country"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
       token={token}
-      limit={limit}
-      onDataLoad={data => onDataLoad(percentFilter(data))}
+      onDataLoad={data => onDataLoad?.(percentFilter(data))}
       renderLabel={renderLabel}
     />
   );

components/metrics/DataTable.js

@@ -11,10 +11,10 @@ export default function DataTable({
   title,
   metric,
   className,
-  limit,
   renderLabel,
   height = 400,
   animate = true,
+  virtualize = false,
 }) {
   const [format, setFormat] = useState(true);
   const formatFunc = format ? formatLongNumber : formatNumber;
@@ -30,7 +30,7 @@ export default function DataTable({
         label={renderLabel ? renderLabel(row) : label}
         value={value}
         percent={percent}
-        animate={animate}
+        animate={animate && !virtualize}
         format={formatFunc}
         onClick={handleSetFormat}
       />
@@ -51,13 +51,13 @@ export default function DataTable({
       </div>
       <div className={styles.body}>
         {data?.length === 0 && <NoData />}
-        {limit
-          ? data.map(row => getRow(row))
-          : data.length > 0 && (
-              <FixedSizeList height={height} itemCount={data.length} itemSize={30}>
-                {Row}
-              </FixedSizeList>
-            )}
+        {virtualize && data.length > 0 ? (
+          <FixedSizeList height={height} itemCount={data.length} itemSize={30}>
+            {Row}
+          </FixedSizeList>
+        ) : (
+          data.map(row => getRow(row))
+        )}
       </div>
     </div>
   );

components/metrics/DevicesTable.js

@@ -4,15 +4,15 @@ import { deviceFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
 import { getDeviceMessage } from 'components/messages';
 
-export default function DevicesTable({ websiteId, token, limit }) {
+export default function DevicesTable({ websiteId, token, ...props }) {
   return (
     <MetricsTable
+      {...props}
       title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
       type="device"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
       token={token}
-      limit={limit}
       dataFilter={deviceFilter}
       renderLabel={({ x }) => getDeviceMessage(x)}
     />

components/metrics/EventsTable.js

@@ -3,17 +3,16 @@ import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import Tag from 'components/common/Tag';
 
-export default function EventsTable({ websiteId, token, limit, onDataLoad }) {
+export default function EventsTable({ websiteId, token, ...props }) {
   return (
     <MetricsTable
+      {...props}
       title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
       type="event"
       metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
       websiteId={websiteId}
       token={token}
-      limit={limit}
       renderLabel={({ x }) => <Label value={x} />}
-      onDataLoad={onDataLoad}
     />
   );
 }

components/metrics/MetricsTable.js

@@ -24,9 +24,11 @@ export default function MetricsTable({
   dataFilter,
   filterOptions,
   limit,
+  virtualize,
   renderLabel,
   height,
-  onDataLoad = () => {},
+  onDataLoad,
+  ...props
 }) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, modified } = dateRange;
@@ -70,14 +72,14 @@ export default function MetricsTable({
       {error && <ErrorMessage />}
       {data && !error && (
         <DataTable
+          {...props}
           title={title}
           data={filteredData}
           metric={metric}
           className={className}
           renderLabel={renderLabel}
-          limit={limit}
           height={height}
-          animate={limit > 0}
+          virtualize={virtualize}
         />
       )}
       <div className={styles.footer}>

components/metrics/PagesTable.js

@@ -10,7 +10,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import MetricsTable from './MetricsTable';
 import styles from './PagesTable.module.css';
 
-export default function PagesTable({ websiteId, token, websiteDomain, limit, showFilters }) {
+export default function PagesTable({ websiteId, token, websiteDomain, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const {
     resolve,
@@ -49,10 +49,10 @@ export default function PagesTable({ websiteId, token, websiteDomain, limit, sho
         metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
         websiteId={websiteId}
         token={token}
-        limit={limit}
         dataFilter={urlFilter}
         filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
         renderLabel={renderLink}
+        {...props}
       />
     </>
   );

components/metrics/ReferrersTable.js

@@ -6,7 +6,7 @@ import ButtonGroup from 'components/common/ButtonGroup';
 import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
 import ButtonLayout from '../layout/ButtonLayout';
 
-export default function ReferrersTable({ websiteId, websiteDomain, token, limit, showFilters }) {
+export default function ReferrersTable({ websiteId, websiteDomain, token, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
 
   const buttons = [
@@ -35,13 +35,13 @@ export default function ReferrersTable({ websiteId, websiteDomain, token, limit,
     <>
       {showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
       <MetricsTable
+        {...props}
         title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
         type="referrer"
         metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
         websiteId={websiteId}
         websiteDomain={websiteDomain}
         token={token}
-        limit={limit}
         dataFilter={refFilter}
         filterOptions={{
           domain: websiteDomain,