feat: Collapse expanded rows on each action (#24)

Author: anitta-keyvalue

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);

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 }}>

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> {