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>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
@@ -49,6 +50,7 @@ export function RolesDataTable<TData, TValue>({
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
@@ -57,7 +59,8 @@ export function RolesDataTable<TData, TValue>({
},
state: {
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">
<Input
placeholder="Search roles"
value={
(table
.getColumn("name")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
value={globalFilter ?? ""}
onChange={(e) =>
table.setGlobalFilter(String(e.target.value))
}
className="w-full pl-8"
/>

View File

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

View File

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

View File

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

View File

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