From 333bb85a97ab5a601c9e550ca604835ede280c04 Mon Sep 17 00:00:00 2001
From: anitta-keyvalue <anitta@keyvalue.systems>
Date: Mon, 19 May 2025 14:21:47 +0530
Subject: [PATCH] feat: Collapse expanded rows on each action

---
 src/components/MultiLevelTable.tsx | 12 +++++++++---
 src/components/TableHeader.tsx     |  2 +-
 src/types/types.ts                 |  2 ++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/MultiLevelTable.tsx b/src/components/MultiLevelTable.tsx
index b5bec4a..d3161b1 100644
--- a/src/components/MultiLevelTable.tsx
+++ b/src/components/MultiLevelTable.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 import {
   type Row,
@@ -136,7 +136,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
         );
       },
       Filter: col.filterable
-        ? ({ column }: { column: { setFilter: (value: string) => void } }) => (
+        ? ({ column }: { column: { setFilter: (value: string) => void; filterValue?: string } }) => (
           <input
             value={filterInput}
             onChange={(e) => {
@@ -164,7 +164,7 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
     nextPage,
     previousPage,
     setPageSize,
-    state: { pageIndex, pageSize: currentPageSize },
+    state: { pageIndex, pageSize: currentPageSize, sortBy, filters },
   } = useTable(
     {
       columns: tableColumns,
@@ -208,6 +208,12 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
 
   const [expandedRows, setExpandedRows] = useState<Set<string | number>>(new Set());
 
+  // Collapse expanded rows when filtering or sorting occurs
+  useEffect(() => {
+    if (expandedRows.size > 0) setExpandedRows(new Set());
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortBy, filters]);
+
   const toggleRow = (rowId: string | number) => {
     setExpandedRows((prev) => {
       const newSet = new Set(prev);
diff --git a/src/components/TableHeader.tsx b/src/components/TableHeader.tsx
index 22d2f71..b42dbb4 100644
--- a/src/components/TableHeader.tsx
+++ b/src/components/TableHeader.tsx
@@ -104,7 +104,7 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
                       )}
                       <span
                         style={{ display: 'inline-flex', alignItems: 'center', cursor: isColumnSortable ? 'pointer' : 'default', userSelect: 'none' }}
-                        onClick={isColumnSortable ? (e => { e.stopPropagation(); (sortProps.onClick as any)?.(e); }) : undefined}
+                        onClick={isColumnSortable ? (e: React.MouseEvent) => { e.stopPropagation(); (sortProps.onClick as (e: React.MouseEvent) => void)?.(e); } : undefined}
                       >
                         {column.render('Header')}
                         <span className="sort-icon" style={{ marginLeft: 4 }}>
diff --git a/src/types/types.ts b/src/types/types.ts
index d2afdda..b113d47 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -22,6 +22,8 @@ export interface DataItem {
 export interface TableStateWithPagination<T extends object> extends TableState<T> {
   pageIndex: number;
   pageSize: number;
+  sortBy: Array<{ id: string; desc: boolean }>;
+  filters: Array<{ id: string; value: string }>;
 }
 
 export interface TableInstanceWithHooks<T extends object> extends TableInstance<T> {