import { useState } from 'react' ; import { Direction , EuiBasicTableProps , Pagination , PropertySort } from '@elastic/eui' ; const PAGE_SIZE = 10 ; const PAGE_SIZE_OPTIONS = [ 10 , 25 , 50 ] ; export interface Criteria < T > { page ? : { index : number ; size : number ; } ; sort ? : { field : keyof T ; direction : Direction ; } ; } export interface CriteriaWithPagination < T > extends Criteria < T > { page : { index : number ; size : number ; } ; } interface AnalyticsBasicTableSettings < T > { pageIndex : number ; pageSize : number ; totalItemCount : number ; hidePerPageOptions : boolean ; sortField : keyof T ; sortDirection : Direction ; } interface UseTableSettingsReturnValue < T > { onTableChange : EuiBasicTableProps < T > [ 'onChange' ] ; pagination : Pagination ; sorting : { sort : PropertySort ; } ; } export function useTableSettings < TypeOfItem > ( sortByField , items ) { const [ tableSettings , setTableSettings ] = useState < AnalyticsBasicTableSettings < TypeOfItem > > ( { pageIndex : 0 , pageSize : PAGE_SIZE , totalItemCount : 0 , hidePerPageOptions : false , sortField : sortByField , sortDirection : 'asc' , } ) ; const onTableChange = ( { page = { index : 0 , size : PAGE_SIZE } , sort = { field : sortByField , direction : 'asc' } , } ) => { const { index , size } = page ; const { field , direction } = sort ; setTableSettings ( { ... tableSettings , pageIndex : index , pageSize : size , sortField : field , sortDirection : direction , } ) ; } ; const { pageIndex , pageSize , sortField , sortDirection } = tableSettings ; const pagination = { pageIndex , pageSize , totalItemCount : items . length , pageSizeOptions : PAGE_SIZE_OPTIONS , } ; const sorting = { sort : { field : sortField as string , direction : sortDirection , } , } ; return { onTableChange , pagination , sorting } ; }