Typescript refactor.

src/components/common/DataTable.tsx

@@ -36,11 +36,11 @@ export function DataTable({
   const hasData = Boolean(!isLoading && data?.length);
   const noResults = Boolean(!isLoading && query && !hasData);
 
-  const handleSearch = query => {
+  const handleSearch = (query: string) => {
     setParams({ ...params, query, page: params.page ? page : 1 });
   };
 
-  const handlePageChange = page => {
+  const handlePageChange = (page: number) => {
     setParams({ ...params, query, page });
   };
 
@@ -54,7 +54,7 @@ export function DataTable({
         <SearchField
           className={styles.search}
           value={query}
-          onChange={handleSearch}
+          onSearch={handleSearch}
           delay={searchDelay || DEFAULT_SEARCH_DELAY}
           autoFocus={true}
           placeholder={formatMessage(labels.search)}

src/components/common/EmptyPlaceholder.tsx

@@ -3,11 +3,11 @@ import { Icon, Text, Flexbox } from 'react-basics';
 import Logo from 'assets/logo.svg';
 
 export interface EmptyPlaceholderProps {
-  message: string;
+  message?: string;
   children?: ReactNode;
 }
 
-export function EmptyPlaceholder({ message, children }) {
+export function EmptyPlaceholder({ message, children }: EmptyPlaceholderProps) {
   return (
     <Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}>
       <Icon size="xl">

src/components/common/FilterButtons.tsx

@@ -4,7 +4,7 @@ import { ButtonGroup, Button, Flexbox } from 'react-basics';
 export interface FilterButtonsProps {
   items: any[];
   selectedKey?: Key;
-  onSelect: () => void;
+  onSelect: (key: any) => void;
 }
 
 export function FilterButtons({ items, selectedKey, onSelect }: FilterButtonsProps) {