diff --git a/packages/components/src/components/Excel.tsx b/packages/components/src/components/Excel.tsx index 1a66e399..b94a56c0 100644 --- a/packages/components/src/components/Excel.tsx +++ b/packages/components/src/components/Excel.tsx @@ -10,9 +10,27 @@ export type ExcelProps = { export function Excel({ url }: ExcelProps) { const [isLoading, setIsLoading] = useState(false); + const [activeSheetName, setActiveSheetName] = useState(); + const [workbook, setWorkbook] = useState(); const [rows, setRows] = useState(); const [cols, setCols] = useState(); + const loadSpreadsheet = (wb: any, name: string) => { + console.log(name) + setActiveSheetName(name); + const ws = wb.Sheets[name]; + const rows = utils.sheet_to_json(ws, { header: 1 }); + + const range = utils.decode_range(ws['!ref'] || 'A1'); + const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({ + key: String(i), + name: utils.encode_col(i), + editor: textEditor, + })); + setRows(rows); + setCols(columns); + }; + useEffect(() => { setIsLoading(true); @@ -20,24 +38,11 @@ export function Excel({ url }: ExcelProps) { .then((res) => res.arrayBuffer()) .then((f) => { const wb = read(f); - const ws = wb.Sheets[wb.SheetNames[0]]; - - const rows = utils.sheet_to_json(ws, { header: 1 }); - - const range = utils.decode_range(ws['!ref'] || 'A1'); - const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({ - key: String(i), - name: utils.encode_col(i), - editor: textEditor, - })); - - - setRows(rows); - setCols(columns); - + setWorkbook(wb); + loadSpreadsheet(wb, wb.SheetNames[0]); setIsLoading(false); }); - }, []); + }, [url]); return isLoading ? (
@@ -46,7 +51,23 @@ export function Excel({ url }: ExcelProps) { ) : ( <> {cols && rows && ( - +
+ +
+ {workbook.SheetNames.map((name: string, idx: number) => { + return ( + + ); + })} +
+
)} );