diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index 988af53a65..8f347e474f 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -16,12 +16,7 @@ import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { Button, useMediaQuery } from '@mui/material'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { UserTypeCell } from './UserTypeCell/UserTypeCell'; -import { - useFlexLayout, - useGlobalFilter, - useSortBy, - useTable, -} from 'react-table'; +import { useFlexLayout, useSortBy, useTable } from 'react-table'; import { sortTypes } from 'utils/sortTypes'; import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; @@ -35,6 +30,7 @@ import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; import { UserLimitWarning } from './UserLimitWarning/UserLimitWarning'; import { RoleCell } from 'component/common/Table/cells/RoleCell/RoleCell'; +import { useSearch } from 'hooks/useSearch'; const UsersList = () => { const navigate = useNavigate(); @@ -51,6 +47,8 @@ const UsersList = () => { const [delUser, setDelUser] = useState(); const { planUsers, isBillingUsers } = useUsersPlan(users); + const [searchValue, setSearchValue] = useState(''); + const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); @@ -105,7 +103,6 @@ const UsersList = () => { ), - disableGlobalFilter: true, disableSortBy: true, maxWidth: 80, }, @@ -120,6 +117,7 @@ const UsersList = () => { subtitle={user.email || user.username} /> ), + searchable: true, }, { id: 'role', @@ -130,14 +128,12 @@ const UsersList = () => { Cell: ({ row: { original: user }, value }: any) => ( ), - disableGlobalFilter: true, maxWidth: 120, }, { Header: 'Created', accessor: 'createdAt', Cell: DateCell, - disableGlobalFilter: true, sortType: 'date', width: 120, maxWidth: 120, @@ -153,7 +149,6 @@ const UsersList = () => { title={date => `Last login: ${date}`} /> ), - disableGlobalFilter: true, sortType: 'date', maxWidth: 150, }, @@ -165,7 +160,6 @@ const UsersList = () => { Cell: ({ row: { original: user } }: any) => ( ), - disableGlobalFilter: true, sortType: 'boolean', }, { @@ -182,9 +176,20 @@ const UsersList = () => { /> ), width: 150, - disableGlobalFilter: true, disableSortBy: true, }, + // Always hidden -- for search + { + accessor: 'username', + Header: 'Username', + searchable: true, + }, + // Always hidden -- for search + { + accessor: 'email', + Header: 'Email', + searchable: true, + }, ], [roles, navigate, isBillingUsers] ); @@ -196,30 +201,26 @@ const UsersList = () => { }; }, [isBillingUsers]); - const data = isBillingUsers ? planUsers : users; + const { data, getSearchText } = useSearch( + columns, + searchValue, + isBillingUsers ? planUsers : users + ); - const { - headerGroups, - rows, - prepareRow, - state: { globalFilter }, - setGlobalFilter, - setHiddenColumns, - } = useTable( + const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable( { columns: columns as any, data, initialState, sortTypes, - autoResetGlobalFilter: false, autoResetHiddenColumns: false, autoResetSortBy: false, disableSortRemove: true, + disableMultiSort: true, defaultColumn: { Cell: TextCell, }, }, - useGlobalFilter, useSortBy, useFlexLayout ); @@ -252,8 +253,8 @@ const UsersList = () => { actions={ <>