use basic table

elastic · Mar 24, 2023 · d394a9d · d394a9d
1 parent 60ad884
commit d394a9d
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/x-pack/plugins/ml/public/application/notifications/components/notifications_list.tsx b/x-pack/plugins/ml/public/application/notifications/components/notifications_list.tsx
@@ -12,7 +12,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import {
   EuiBadge,
   EuiCallOut,
-  EuiInMemoryTable,
+  EuiBasicTable,
   EuiSearchBar,
   EuiSpacer,
   IconColor,
@@ -294,6 +294,12 @@ export const NotificationsList: FC = () => {
 
   const newNotificationsCount = Object.values(notificationsCounts).reduce((a, b) => a + b);
 
+  const itemsPerPage = useMemo(() => {
+    const fromIndex = pagination.pageIndex * pagination.pageSize;
+    const toIndex = fromIndex + pagination.pageSize;
+    return items.slice(fromIndex, toIndex);
+  }, [items, pagination]);
+
   return (
     <>
       <SavedObjectsWarning onCloseFlyout={fetchNotifications} forceRefresh={isLoading} />
@@ -382,12 +388,12 @@ export const NotificationsList: FC = () => {
         </>
       ) : null}
 
-      <EuiInMemoryTable<NotificationItem>
+      <EuiBasicTable<NotificationItem>
         columns={columns}
         hasActions={false}
         isExpandable={false}
         isSelectable={false}
-        items={items}
+        items={itemsPerPage}
         itemId={'id'}
         loading={isLoading}
         rowProps={(item) => ({
@@ -397,7 +403,7 @@ export const NotificationsList: FC = () => {
         onChange={onTableChange}
         sorting={sorting}
         data-test-subj={isLoading ? 'mlNotificationsTable loading' : 'mlNotificationsTable loaded'}
-        message={
+        noItemsMessage={
           <FormattedMessage
             id="xpack.ml.notifications.noItemsFoundMessage"
             defaultMessage="No notifications found"