NEO-2435: Global Custom Filter improvements

src/components/Table/Table.stories.tsx

@@ -41,7 +41,7 @@ const logger = log.getLogger("TableStories");
 logger.disableAll();
 
 import "./TableStories_shim.css";
-import type { SortType } from "./types";
+import type { ColumnFilter, SortType } from "./types";
 
 export default {
 	title: "Components/Table",
@@ -863,22 +863,56 @@ export const CustomBasicTableFilterDrawer = () => {
 	const closeFilterDrawer = () => {
 		setOpenColumnsFilterDrawer(false);
 	};
+
+	const [filtersToApply, setFiltersToApply] = useState<ColumnFilter[]>([]);
+
+	const [nameFilter, setNameFilter] = useState<string | null>(null);
+	const [otherFilter, setOtherFilter] = useState<string | null>(null);
+
+	const handleApply = () => {
+		const filters: ColumnFilter[] = [
+			{
+				id: "name",
+				value: nameFilter || null,
+			},
+			{
+				id: "other",
+				value: otherFilter || null,
+			},
+		];
+		setFiltersToApply(filters);
+		closeFilterDrawer();
+	};
+
 	return (
 		<>
 			<Table
 				columns={FilledFields.columns}
 				handleShowColumnsFilter={handleShowColumnsFilter}
 				allowToggleColumnVisibility
-				data={[...FilledFields.data]}
+				data={FilledFields.data}
+				allFilters={filtersToApply}
 			/>
+
 			<TableFilterDrawer
 				title="Custom Table Filter Drawer"
 				open={openColumnsFilterDrawer}
 				handleCancel={closeFilterDrawer}
+				handleApply={handleApply}
 			>
-				<p>Custom content goes here</p>
-				<br />
-				<p> 'Cancel' and 'Apply' buttons are built-in</p>
+				<TextInput
+					clearable
+					label="Name"
+					type="text"
+					onChange={(e) => setNameFilter(e.currentTarget.value)}
+				/>
+
+				<TextInput
+					clearable
+					label="Other"
+					type="text"
+					onChange={(e) => setOtherFilter(e.currentTarget.value)}
+				/>
 			</TableFilterDrawer>
 		</>
 	);

src/components/Table/Table.tsx

@@ -114,6 +114,7 @@ export const Table = <T extends Record<string, any>>({
 	handleShowColumnsFilter,
 	handleRowToggled,
 	handlePageChange = () => null,
+	allFilters = [],
 	readonly = false,
 	rowHeight = "large",
 	selectableRows = "none",
@@ -196,14 +197,25 @@ export const Table = <T extends Record<string, any>>({
 	const {
 		rows,
 		getTableProps,
-		state: { pageIndex, pageSize },
+		state: { pageIndex, pageSize, filters },
 		gotoPage,
 		setPageSize,
 		prepareRow,
 		pageCount,
 		toggleAllRowsSelected,
+		setAllFilters,
 	} = instance;
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: setAllFilters and filters don't need to be checked for perf reasons.
+	useEffect(() => {
+		logger.info(allFilters, filters);
+
+		if (allFilters.length > 0) {
+			// @ts-expect-error
+			setAllFilters(allFilters);
+		}
+	}, [allFilters]);
+
 	const handleSearchWrapper = useMemo(() => {
 		if (handleSearch) {
 			return (searchString: string, pageSize: number) => {

src/components/Table/types/TableTypes.ts

@@ -75,6 +75,9 @@ export interface IFilterContext<T extends AnyRecord = AnyRecord> {
 export type RowHeight = "compact" | "medium" | "large";
 export type SortType = "asc" | "desc" | "unsorted";
 
+// biome-ignore lint/suspicious/noExplicitAny: value should be any
+export type ColumnFilter = { id: string | null; value: any };
+
 export type TableProps<T extends AnyRecord> = {
 	caption?: string;
 	id?: string;
@@ -87,6 +90,7 @@ export type TableProps<T extends AnyRecord> = {
 	pushPaginationDown?: boolean;
 	draggableRows?: boolean;
 	handlePageChange?: (pageIndex: number, pageSize: number) => void;
+	allFilters?: ColumnFilter[];
 	itemsPerPageOptions?: number[];
 	initialStatePageIndex?: number;
 	initialStatePageSize?: number;