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