use global search for tables

This commit is contained in:
miloschwartz
2025-03-31 10:31:35 -04:00
parent 8f1ee60119
commit 3612857585
5 changed files with 35 additions and 50 deletions

View File

@@ -39,6 +39,7 @@ export function RolesDataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]); const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]); const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({ const table = useReactTable({
data, data,
@@ -49,6 +50,7 @@ export function RolesDataTable<TData, TValue>({
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters, onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(), getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: { initialState: {
pagination: { pagination: {
pageSize: 20, pageSize: 20,
@@ -57,7 +59,8 @@ export function RolesDataTable<TData, TValue>({
}, },
state: { state: {
sorting, sorting,
columnFilters columnFilters,
globalFilter
} }
}); });
@@ -67,15 +70,9 @@ export function RolesDataTable<TData, TValue>({
<div className="flex items-center max-w-sm mr-2 w-full relative"> <div className="flex items-center max-w-sm mr-2 w-full relative">
<Input <Input
placeholder="Search roles" placeholder="Search roles"
value={ value={globalFilter ?? ""}
(table onChange={(e) =>
.getColumn("name") table.setGlobalFilter(String(e.target.value))
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
} }
className="w-full pl-8" className="w-full pl-8"
/> />

View File

@@ -39,6 +39,7 @@ export function UsersDataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]); const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]); const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({ const table = useReactTable({
data, data,
@@ -49,6 +50,7 @@ export function UsersDataTable<TData, TValue>({
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters, onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(), getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: { initialState: {
pagination: { pagination: {
pageSize: 20, pageSize: 20,
@@ -57,7 +59,8 @@ export function UsersDataTable<TData, TValue>({
}, },
state: { state: {
sorting, sorting,
columnFilters columnFilters,
globalFilter
} }
}); });
@@ -67,15 +70,9 @@ export function UsersDataTable<TData, TValue>({
<div className="flex items-center max-w-sm mr-2 w-full relative"> <div className="flex items-center max-w-sm mr-2 w-full relative">
<Input <Input
placeholder="Search users" placeholder="Search users"
value={ value={globalFilter ?? ""}
(table onChange={(e) =>
.getColumn("email") table.setGlobalFilter(String(e.target.value))
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("email")
?.setFilterValue(event.target.value)
} }
className="w-full pl-8" className="w-full pl-8"
/> />

View File

@@ -40,6 +40,7 @@ export function ResourcesDataTable<TData, TValue>({
}: ResourcesDataTableProps<TData, TValue>) { }: ResourcesDataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]); const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]); const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({ const table = useReactTable({
data, data,
@@ -50,6 +51,7 @@ export function ResourcesDataTable<TData, TValue>({
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters, onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(), getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: { initialState: {
pagination: { pagination: {
pageSize: 20, pageSize: 20,
@@ -58,7 +60,8 @@ export function ResourcesDataTable<TData, TValue>({
}, },
state: { state: {
sorting, sorting,
columnFilters columnFilters,
globalFilter
} }
}); });
@@ -68,15 +71,9 @@ export function ResourcesDataTable<TData, TValue>({
<div className="flex items-center max-w-sm mr-2 w-full relative"> <div className="flex items-center max-w-sm mr-2 w-full relative">
<Input <Input
placeholder="Search resources" placeholder="Search resources"
value={ value={globalFilter ?? ""}
(table onChange={(e) =>
.getColumn("name") table.setGlobalFilter(String(e.target.value))
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
} }
className="w-full pl-8" className="w-full pl-8"
/> />

View File

@@ -40,6 +40,7 @@ export function ShareLinksDataTable<TData, TValue>({
}: ShareLinksDataTableProps<TData, TValue>) { }: ShareLinksDataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]); const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]); const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({ const table = useReactTable({
data, data,
@@ -50,6 +51,7 @@ export function ShareLinksDataTable<TData, TValue>({
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters, onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(), getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: { initialState: {
pagination: { pagination: {
pageSize: 20, pageSize: 20,
@@ -58,7 +60,8 @@ export function ShareLinksDataTable<TData, TValue>({
}, },
state: { state: {
sorting, sorting,
columnFilters columnFilters,
globalFilter
} }
}); });
@@ -68,15 +71,9 @@ export function ShareLinksDataTable<TData, TValue>({
<div className="flex items-center max-w-sm mr-2 w-full relative"> <div className="flex items-center max-w-sm mr-2 w-full relative">
<Input <Input
placeholder="Search links" placeholder="Search links"
value={ value={globalFilter ?? ""}
(table onChange={(e) =>
.getColumn("title") table.setGlobalFilter(String(e.target.value))
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("title")
?.setFilterValue(event.target.value)
} }
className="w-full pl-8" className="w-full pl-8"
/> />

View File

@@ -40,6 +40,7 @@ export function SitesDataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]); const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]); const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({ const table = useReactTable({
data, data,
@@ -50,6 +51,7 @@ export function SitesDataTable<TData, TValue>({
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters, onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(), getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: { initialState: {
pagination: { pagination: {
pageSize: 20, pageSize: 20,
@@ -58,7 +60,8 @@ export function SitesDataTable<TData, TValue>({
}, },
state: { state: {
sorting, sorting,
columnFilters columnFilters,
globalFilter
} }
}); });
@@ -68,15 +71,9 @@ export function SitesDataTable<TData, TValue>({
<div className="flex items-center max-w-sm mr-2 w-full relative"> <div className="flex items-center max-w-sm mr-2 w-full relative">
<Input <Input
placeholder="Search sites" placeholder="Search sites"
value={ value={globalFilter ?? ""}
(table onChange={(e) =>
.getColumn("name") table.setGlobalFilter(String(e.target.value))
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
} }
className="w-full pl-8" className="w-full pl-8"
/> />