import React , { useEffect } from 'react' ; import { FilterProps , HeaderProps } from 'react-table' ; import { TextField } from '@mui/material' ; import { camelToWords } from '../../utils/object.utils' ; const DefaultHeader = ( { column } ) => ( < > { column . id . startsWith ( '_' ) ? null : camelToWords ( column . id ) } < />); export const defaultColumn = { Filter : DefaultColumnFilter , Header : DefaultHeader , minWidth : 80 , width : 100 , maxWidth : 200 , } ; function DefaultColumnFilter < T extends object > ( { column : { id , index , filterValue , setFilter , render , parent } , } ) { const [ value , setValue ] = React . useState ( filterValue || '' ) ; const handleChange = ( event ) => { setValue ( event . target . value ) ; } ; useEffect ( ( ) => { setValue ( filterValue || '' ) ; } , [ filterValue ] ) ; const firstIndex = ! ( parent && parent . index ) ; return ( < TextField name = { id } label = { render ( 'Header' ) } value = { value } autoFocus = { index === 0 && firstIndex } variant = { 'standard' } onChange = { handleChange } onBlur = { ( e ) => { setFilter ( e . target . value || undefined ) ; } } />); } export default DefaultColumnFilter ;