import React from 'react' ; import { IndexPattern } from '../../../../../opensearch_dashboards_services' ; import { TableHeaderColumn } from './table_header_column' ; import { SortOrder , getDisplayedColumns } from './helpers' ; import { getDefaultSort } from '../../lib/get_default_sort' ; interface Props { columns : string [ ] ; defaultSortOrder : string ; hideTimeColumn : boolean ; indexPattern : IndexPattern ; isShortDots : boolean ; onChangeSortOrder ? : ( sortOrder : SortOrder [ ] ) => void ; onMoveColumn ? : ( name : string , index : number ) => void ; onRemoveColumn ? : ( name : string ) => void ; sortOrder : SortOrder [ ] ; } export function TableHeader ( { columns , defaultSortOrder , hideTimeColumn , indexPattern , isShortDots , onChangeSortOrder , onMoveColumn , onRemoveColumn , sortOrder , } ) { const displayedColumns = getDisplayedColumns ( columns , indexPattern , hideTimeColumn , isShortDots ) ; return ( < tr data - test - subj = "docTableHeader" className = "osdDocTableHeader" > < th style = { { width : '24px' } } /> { displayedColumns . map ( ( col ) => { return ( < TableHeaderColumn key = { col . name } { ... col } sortOrder = { sortOrder . length ? sortOrder : getDefaultSort ( indexPattern , defaultSortOrder ) } onMoveColumn = { onMoveColumn } onRemoveColumn = { onRemoveColumn } onChangeSortOrder = { onChangeSortOrder } / > ) ; } ) } < /tr>); }