diff --git a/src/components/MatrixView.tsx b/src/components/MatrixView.tsx index ebca7c4..358afdb 100644 --- a/src/components/MatrixView.tsx +++ b/src/components/MatrixView.tsx @@ -1,4 +1,5 @@ import React, { useState, useMemo } from 'react'; +import { Search } from 'lucide-react'; import { ExcelRow } from '../types'; interface MatrixViewProps { @@ -9,11 +10,20 @@ interface MatrixViewProps { export function MatrixView({ data, headers }: MatrixViewProps) { const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(25); + const [search, setSearch] = useState(''); + + const filteredData = useMemo(() => { + if (!search) return data; + const s = search.toLowerCase(); + return data.filter(row => + row.some(cell => String(cell || '').toLowerCase().includes(s)) + ); + }, [data, search]); const paginatedData = useMemo(() => { const start = (page - 1) * pageSize; - return data.slice(start, start + pageSize); - }, [data, page, pageSize]); + return filteredData.slice(start, start + pageSize); + }, [filteredData, page, pageSize]); const formatCellValue = (val: any, header: string = '') => { if (val === undefined || val === null || val === '') return ''; @@ -72,13 +82,25 @@ export function MatrixView({ data, headers }: MatrixViewProps) { return val; }; - const totalPages = Math.ceil(data.length / pageSize); + const totalPages = Math.ceil(filteredData.length / pageSize); return (
All data fields formatted to 2 decimal places for numbers/prices.
+All data fields formatted to 2 decimal places for numbers/prices.
+