Can not filter properly data in cloudspace design table

Question

I am using NodeJS for backend, ReactJs and Cloudspace Design for frontend application. I have a cloudspace design table to list data acquired from backend services. I am able to fetch and provide data into table but can not display total count as expected. The filter method that i used to prevent data in backend service is breaking the total data count. But when I remove the filter method, it returns properly but this time I can not make free text search in search bar. Here is the codeblock for backend service:

    const takeAllUsers = async ()=>{
    const res = await getUsers();
    const users = res.data.getAllUsers.result.map((item: any) => {
        if (item.enabled)
            return {id: item.email,
                firstName: item.givenName,
                lastName: item.familyName,
                email: item.email,
                mobileNumber: item.phoneNumber,
                role: item.userRoles.toString(),
                profilePicture: item.profilePicture,
                status: item.enabled ? 'OK' : 'ERROR',
                customerId: item.customerId
            };
    }).filter((i:any) => i);
    setUserLoading(false);
    setAllUsers(users);
};

And this is the frontend part:

 import * as React from 'react';
 import Layout from '../Layout/layout';
 import Table from '../Customers/components/CustomTable';
 import { SpaceBetween,TableProps, Link, StatusIndicator, StatusIndicatorProps, 
  CollectionPreferencesProps} from '@cloudscape-design/components';
 import UpdateUser from './components/UpdateUser';
 import DeleteUser from './components/DeleteUser';
 import InviteNewUser from './components/InviteNewUser';
 import UsersType from '../../configs/types/Users';
 import { userContext } from '../../UserContext/UserContext';
 import { UserContextType } from '../../configs/types/UserContextType';

 type InstanceState = 'OK' | 'ERROR';
 const columnLabel = (column: string) => (sortState: TableProps.LabelData) => {
  const ascending = !sortState.descending;
  return `${column}, ${sortState.sorted ? `sorted ${ascending ? 'ascending' : 'descending'}` : 'not sorted'}.`;
 };

 const stateToStatusIndicator: Record<InstanceState, StatusIndicatorProps> = {
  OK: { type: 'success', children: 'Active' },
  ERROR: { type: 'error', children: 'Disabled' },
 };

 const visibleContentOptions: 
 ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup> = [
 {
    label: 'Instance properties',
    options: [
        {
            id: 'id',
            label: 'ID',
            editable: false,
        },
        {
            id: 'firstName',
            label: 'First Name',
        },
        { id: 'type', label: 'Type' },
        {
            id: 'lastName',
            label: 'Last Name',
        },
        {
            id: 'email',
            label: 'Email',
        },
        {
            id: 'mobileNumber',
            label: 'Mobile Number',
        },
        {
            id: 'officeAddress',
            label: 'Office Address',
        },
        {
            id: 'role',
            label: 'Role',
        },
        {
            id: 'profilePicture',
            label: 'Profile Picture',
        }
    ],
  },
 ];

 const Users: React.FC = () => {    
  const { takeAllUsers,allUsers } = React.useContext(userContext) as UserContextType;
  const columnsConfig: TableProps.ColumnDefinition<UsersType>[] = [
    {
        id: 'id',
        header: 'ID',
        cell: item => <Link href={`#${item.id}`}>{item.id}</Link>,
        ariaLabel: columnLabel('id'),
        sortingField: 'id',
    },
    
    {
        id: 'firstName',
        header: 'Name',
        cell: item => item.firstName || '-',
        ariaLabel: columnLabel('Name'),
        sortingField: 'name',
    },
    { id: 'lastName', header: 'Last Name', cell: item => item.lastName, ariaLabel: columnLabel('lastName'), sortingField: 'lastName' },
    { id: 'email', header: 'Email', cell: item => item.email, ariaLabel: columnLabel('email'), sortingField: 'email' },
    { id: 'mobileNumber', header: 'Mobile Number', cell: item => item.mobileNumber, ariaLabel: columnLabel('mobileNumber'), sortingField: 'mobileNumber' },
    { id: 'officeAddress', header: 'Office Address', cell: item => item.officeAdress, ariaLabel: columnLabel('officeAdress'), sortingField: 'officeAdress' },
    { id: 'role', header: 'Roles', cell: item => item.role, ariaLabel: columnLabel('role'), sortingField: 'role' },
    {
        id: 'status',
        header: 'Status',
        cell: item => <StatusIndicator {...stateToStatusIndicator[item.status]} />,
        ariaLabel: columnLabel('state'),
        sortingField: 'status',
    },
    {
        id: 'profilePicture',
        header: 'Image ID',
        cell: item => item.profilePicture,
        ariaLabel: columnLabel('imageId'),
        sortingField: 'imageId',
    }
];

const visibleContent=['id','firstName','lastName','email','mobileNumber','officeAddress','role','status','profilePicture'];
const renderCustomerPage = () => {
    return (

        <React.Fragment>
            <Table 
                TableHeader={
                    <SpaceBetween direction="horizontal" size="xs">
                        <UpdateUser/>
                        <DeleteUser/>
                        <InviteNewUser/>
                    </SpaceBetween>
                }
                columnsConfig={columnsConfig}
                data={allUsers}
                header="User"
                visibleContentOptions={visibleContentOptions}
                takeCustomerList={takeAllUsers}
                visibleContent={visibleContent}
            />
        </React.Fragment>
    );
};

return (
    <>
        <Layout
            header="Users"
            mainContent={renderCustomerPage()}
            items={[
                { text: 'Home', href: '/admin' },
                { text: 'Users', href: '/user'}
            ]}
        />
    </>
  );
};

export default Users;

Any help would be appreciated. Thanks a lot!

Answer 1

Anyway I have found the real problem. The problem is that, users are pre-filtered with respect to their status. Besides, unfortunately there should be pagination to list cognito users since cognito allows at max 60 users to be displayed without pagination.