You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 ?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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})}>
</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 ?
Beta Was this translation helpful? Give feedback.
All reactions