[components,excel][m]: add support for multiple sheets

packages/components/src/components/Excel.tsx

@@ -10,9 +10,27 @@ export type ExcelProps = {
 
 export function Excel({ url }: ExcelProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [activeSheetName, setActiveSheetName] = useState<string>();
+  const [workbook, setWorkbook] = useState<any>();
   const [rows, setRows] = useState<any>();
   const [cols, setCols] = useState<any>();
 
+  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 ? (
     <div className="w-full flex items-center justify-center w-[600px] h-[300px]">
@@ -46,7 +51,23 @@ export function Excel({ url }: ExcelProps) {
   ) : (
     <>
       {cols && rows && (
-        <DataGrid columns={cols} rows={rows} onRowsChange={setRows} />
+        <div>
+          <DataGrid columns={cols} rows={rows} onRowsChange={setRows} />
+          <div className="border-t">
+            {workbook.SheetNames.map((name: string, idx: number) => {
+              return (
+                <button
+                  className={`px-3 pb-1 pt-2 border-b border-l border-r ${
+                    name == activeSheetName ? 'font-bold' : ''
+                  }`}
+                  onClick={() => loadSpreadsheet(workbook, name)}
+                >
+                  {name}
+                </button>
+              );
+            })}
+          </div>
+        </div>
       )}
     </>
   );