-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feature: Sorting & finding by username (ID) admin interface #1778
Changes from 7 commits
2b18796
5caa3d5
8e3552c
10b98ae
d11053b
a3038b0
4bf2f2f
cba03a4
ad6e6a6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -35,7 +35,7 @@ import { | |
} from "@tanstack/react-table"; | ||
import { Filter } from "lucide-react"; | ||
import { useTranslation } from "next-i18next"; | ||
import { ChangeEvent, ReactNode, useState } from "react"; | ||
import { ChangeEvent, ReactNode, useRef, useState } from "react"; | ||
import { useDebouncedCallback } from "use-debounce"; | ||
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
|
@@ -59,7 +59,7 @@ export type DataTableProps<T> = { | |
filterValues?: FilterItem[]; | ||
onNextClick?: () => void; | ||
onPreviousClick?: () => void; | ||
onFilterChange?: (items: FilterItem[]) => void; | ||
onFilterChange?: (items: FilterItem[], filterByColumn?: string) => void; | ||
owenduncansnobel marked this conversation as resolved.
Show resolved
Hide resolved
|
||
disableNext?: boolean; | ||
disablePrevious?: boolean; | ||
disablePagination?: boolean; | ||
|
@@ -198,13 +198,13 @@ const FilterModal = ({ | |
value: string; | ||
}) => { | ||
const { isOpen, onOpen, onClose } = useDisclosure(); | ||
|
||
const initialFocusRef = useRef(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what is the purpose of this ref? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @AbdBarho That ref is for auto-focusing on the text input when the filter button is clicked. That way you can start typing as soon as the parent div/button is clicked |
||
const handleInputChange = useDebouncedCallback((e: ChangeEvent<HTMLInputElement>) => { | ||
onChange(e.target.value); | ||
}, 500); | ||
|
||
return ( | ||
<Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}> | ||
<Popover isOpen={isOpen} onOpen={onOpen} initialFocusRef={initialFocusRef} onClose={onClose}> | ||
<PopoverTrigger> | ||
<Button variant={"unstyled"} ml="2"> | ||
<Filter size="1em"></Filter> | ||
|
@@ -216,7 +216,7 @@ const FilterModal = ({ | |
<PopoverBody mt="4"> | ||
<FormControl> | ||
<FormLabel>{label}</FormLabel> | ||
<Input onChange={handleInputChange} defaultValue={value}></Input> | ||
<Input ref={initialFocusRef} onChange={handleInputChange} autoFocus defaultValue={value}></Input> | ||
</FormControl> | ||
</PopoverBody> | ||
</PopoverContent> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do you need filterByColumn here? Isn't
id
inFilterItem
enough?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I went and removed it