import CIcon from '@coreui/icons-react'
import { freeSet } from '@coreui/icons'
import { useCookies } from 'react-cookie'
import { useNavigate, useLocation } from 'react-router-dom'
React.icons = { ...freeSet }

const SmartTableBasicExample = () => {
const [user, setUser] = useState([])
const [details, setDetails] = useState([])
const [modal, setModal] = useState(false)
const [loading, setLoading] = useState(true)
const [fetchTrigger, setFetchTrigger] = useState(0)
const [token] = useCookies(['usertoken'])
const [page, setPage] = useState(1)
const [pages, setPages] = useState(5)
const [itemsPerPage, setItemsPerPage] = useState(5)
const [columnFilterValue, setColumnFilterValue] = useState()
const [tableFilterValue, setTableFilterValue] = useState('')
const [sorterValue, setSorterValue] = useState()
const navigate = useNavigate()
const url = 'http://127.0.0.1:8000/'
const params = {
page,
search: tableFilterValue,
page_size: JSON.stringify(itemsPerPage),
...columnFilterValue,
}

const handleItemPerPageChange = (value) => {
setItemsPerPage(value)
setFetchTrigger(fetchTrigger + 1)
console.log(itemsPerPage)
}
const query = new URLSearchParams(params).toString()

const columns = [
{
key: 'name',
label: 'Name',
_style: { width: '20%' },
},
{
key: 'surname',
label: 'Surname',
_style: { width: '20%' },
},
{
key: 'location_name',
label: 'Location',
_style: {
width: '20%',
color: '#000',
},
},
{
key: 'dept_name',
label: 'Department',
_style: { width: '20%' },
},
{ key: 'sub_name', label: 'Sub Department', _style: { width: '20%' } },
{ key: 'title_name', label: 'Title', _style: { width: '20%' } },
{
key: 'show_details',
label: '',
_style: { width: '1%' },
filter: false,
sorter: false,
},
]

useEffect(() => {
setLoading(true)
const fetchData = () => {
fetch(url + api/users/?${query}, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: Token ${token['usertoken']},
},
})
.then(function (data) {
data.json().then((json) => {
setUser(json.results)
setPages(json.pages)
setLoading(false)
})
})
.catch((e) => {
setTimeout(() => {
setFetchTrigger(fetchTrigger + 1)
}, 1000)
})
}

fetchData()
}, [query, fetchTrigger, token])

const positions = [
'static',
'top-left',
'top-center',
'top-right',
'top-full',
'bottom-left',
'bottom-center',
'bottom-right',
'bottom-full',
]

const [toasts, setToasts] = useState([])

const [position, setPosition] = useState('top-right')
const [autohide, setAutohide] = useState(true)
const [autohideValue, setAutohideValue] = useState(2000)
const [closeButton, setCloseButton] = useState(true)
const [fade, setFade] = useState(true)

const toggleDetails = (index) => {
const position = details.indexOf(index)
let newDetails = details.slice()
if (position !== -1) {
newDetails.splice(position, 1)
} else {
newDetails = [...details, index]
}
setDetails(newDetails)
}

const toggle = () => {
setModal(!modal)
}

const addToast = (title, message, type) => {
setToasts([
...toasts,
{
position,
autohide: autohide && autohideValue,
closeButton,
fade,
title,
message,
type,
},
])
}

const toasters = (() => {
return toasts.reduce((toasters, toast) => {
toasters[toast.position] = toasters[toast.position] || []
toasters[toast.position].push(toast)
return toasters
}, {})
})()

useEffect(() => {
console.log('Data', user)
})
return (
<React.Fragment>
<CSmartTable
cleaner
loading={loading}
items={user}
columns={columns}
columnFilter={{
external: true,
columnSorter
columnFilterValue={columnFilterValue}
onColumnFilterChange={(value) => setColumnFilterValue(value)}
tableFilterPlaceholder={'Type Something...'}
tableFilter={{
external: true,
}}
tableHeadProps={{
color: 'success',
}}
tableProps={{
striped: true,
hover: true,
responsive: true,
}}
tableFilterValue={tableFilterValue}
onTableFilterChange={(value) => setTableFilterValue(value)}
sorter
sorterValue={sorterValue}
onSorterValueChange={setSorterValue}
itemsPerPageLabel={'Select Items per Page'}
itemsPerPageOptions={[5, 15, 30, 50, 100, 150]}
itemsPerPageSelect={{ external: false }}
itemsPerPage={itemsPerPage}
onItemsPerPageChange={handleItemPerPageChange}
scopedColumns={{
show_details: (item, index) => (

<CButton
color="success"
onClick={() => {
toggleDetails(index)
}}

<CButton color="info" onClick={() => navigate(/users/${item.pk})}>

        {/* <CButton          color="danger"          onClick={() => {            window.confirm('Silmek istediğinize emin misiniz?') && removeClicked(item)          }}        >          <CIcon icon="cil-trash" custom-size="1xl" />        </CButton> */}      </CButtonGroup>    </td>  ),

</React.Fragment>
)
}

export default SmartTableBasicExample

In that code i have an issue. When i try filter with tablefilter, there is no problem. But when i try filter with column, after each keystroke focus goes out. How to solve that issue ?