pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-07 03:06:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

🚧 wip: table filters

Browse Source
This commit is contained in:
Fred KISSIE
2026-02-07 04:51:37 +01:00
parent 5d7f082ebf
commit 1889386f64
2 changed files with 54 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/UserDevicesTable.tsx
View File

@@ -706,8 +706,6 @@ export default function UserDevicesTable({
return ["active", "pending"]; return ["active", "pending"];
}, []); }, []);
const [, setCount] = useState(0);
function handleFilterChange( function handleFilterChange(
column: string, column: string,
value: string | undefined | null | string[] value: string | undefined | null | string[]
@@ -726,7 +724,6 @@ export default function UserDevicesTable({
filter({ filter({
searchParams searchParams
}); });
setCount((c) => c + 1);
} }
function toggleSort(column: string) { function toggleSort(column: string) {
@@ -791,54 +788,54 @@ export default function UserDevicesTable({
rowCount={rowCount} rowCount={rowCount}
stickyLeftColumn="name" stickyLeftColumn="name"
stickyRightColumn="actions" stickyRightColumn="actions"
// filters={[ filters={[
// { {
// id: "status", id: "status",
// label: t("status") || "Status", label: t("status") || "Status",
// multiSelect: true, multiSelect: true,
// displayMode: "calculated", displayMode: "calculated",
// options: statusFilterOptions, options: statusFilterOptions,
// filterFn: ( onFilter: (
// row: ClientRow, selectedValues: (string | number | boolean)[]
// selectedValues: (string | number | boolean)[] ) => {
// ) => { console.log({ selectedValues });
// if (selectedValues.length === 0) return true; // if (selectedValues.length === 0) return true;
// const rowArchived = row.archived; // const rowArchived = row.archived;
// const rowBlocked = row.blocked; // const rowBlocked = row.blocked;
// const approvalState = row.approvalState; // const approvalState = row.approvalState;
// const isActive = // const isActive =
// !rowArchived && // !rowArchived &&
// !rowBlocked && // !rowBlocked &&
// approvalState !== "pending" && // approvalState !== "pending" &&
// approvalState !== "denied"; // approvalState !== "denied";
// if (selectedValues.includes("active") && isActive) // if (selectedValues.includes("active") && isActive)
// return true; // return true;
// if ( // if (
// selectedValues.includes("pending") && // selectedValues.includes("pending") &&
// approvalState === "pending" // approvalState === "pending"
// ) // )
// return true; // return true;
// if ( // if (
// selectedValues.includes("denied") && // selectedValues.includes("denied") &&
// approvalState === "denied" // approvalState === "denied"
// ) // )
// return true; // return true;
// if ( // if (
// selectedValues.includes("archived") && // selectedValues.includes("archived") &&
// rowArchived // rowArchived
// ) // )
// return true; // return true;
// if ( // if (
// selectedValues.includes("blocked") && // selectedValues.includes("blocked") &&
// rowBlocked // rowBlocked
// ) // )
// return true; // return true;
// return false; // return false;
// }, },
// defaultValues: statusFilterDefaultValues values: statusFilterDefaultValues
// } }
// ]} ]}
/> />
</> </>
); );

20
src/components/ui/controlled-data-table.tsx
View File

@@ -33,7 +33,7 @@ import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility"
import { Columns, Filter, Plus, RefreshCw, Search } from "lucide-react"; import { Columns, Filter, Plus, RefreshCw, Search } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useState } from "react"; import { useMemo, useState } from "react";
// Extended ColumnDef type that includes optional friendlyName for column visibility dropdown // Extended ColumnDef type that includes optional friendlyName for column visibility dropdown
export type ExtendedColumnDef<TData, TValue = unknown> = ColumnDef< export type ExtendedColumnDef<TData, TValue = unknown> = ColumnDef<
@@ -54,11 +54,8 @@ type DataTableFilter = {
label: string; label: string;
options: FilterOption[]; options: FilterOption[];
multiSelect?: boolean; multiSelect?: boolean;
filterFn: ( onFilter: (selectedValues: (string | number | boolean)[]) => void;
row: any, values?: (string | number | boolean)[];
selectedValues: (string | number | boolean)[]
) => boolean;
defaultValues?: (string | number | boolean)[];
displayMode?: "label" | "calculated"; // How to display the filter button text displayMode?: "label" | "calculated"; // How to display the filter button text
}; };
@@ -119,15 +116,13 @@ export function ControlledDataTable<TData, TValue>({
); );
// TODO: filters // TODO: filters
const [activeFilters, setActiveFilters] = useState< const activeFilters = useMemo(() => {
Record<string, (string | number | boolean)[]>
>(() => {
const initial: Record<string, (string | number | boolean)[]> = {}; const initial: Record<string, (string | number | boolean)[]> = {};
filters?.forEach((filter) => { filters?.forEach((filter) => {
initial[filter.id] = filter.defaultValues || []; initial[filter.id] = filter.values || [];
}); });
return initial; return initial;
}); }, [filters]);
console.log({ console.log({
pagination, pagination,
@@ -147,7 +142,6 @@ export function ControlledDataTable<TData, TValue>({
}, },
manualFiltering: true, manualFiltering: true,
manualPagination: true, manualPagination: true,
// pageCount: pagination.pageCount,
rowCount, rowCount,
state: { state: {
columnFilters, columnFilters,
@@ -177,7 +171,7 @@ export function ControlledDataTable<TData, TValue>({
} }
// Multiple selections: always join with "and" // Multiple selections: always join with "and"
return selectedOptions.map((opt) => opt.label).join(" and "); return selectedOptions.map((opt) => opt.label).join(" or ");
}; };
// Helper function to check if a column should be sticky // Helper function to check if a column should be sticky