mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-23 21:36:37 +00:00
use global search for tables
This commit is contained in:
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user