fixed creating the first table, indecate empty table

ROADMAP.md

@@ -68,6 +68,7 @@
 ### Functionality:
 
 - Sort rows
+- reorder columns
 - Locked columns
 - Table view only mode
 - SubCollection tables

src/components/Fields/File.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 import useUploader from "../../hooks/useFiretable/useUploader";
 

src/components/Table/index.tsx

@@ -132,6 +132,20 @@ function Table(props: any) {
           onColumnResize={(idx, width) =>
             tableActions.column.resize(idx, width)
           }
+          emptyRowsView={() => {
+            return (
+              <div
+                style={{
+                  textAlign: "center",
+                  backgroundColor: "#ddd",
+                  padding: "100px",
+                }}
+              >
+                <h3>no data to show</h3>
+                <Button onClick={tableActions.row.add}>Add Row</Button>
+              </div>
+            );
+          }}
         />
         <Button onClick={tableActions.row.add}>Add Row</Button>
         <ColumnEditor

src/hooks/useSettings.ts

@@ -17,10 +17,17 @@ const useSettings = () => {
   const createTable = (name: string, collection: string) => {
     const { tables } = settingsState;
     // updates the setting doc
-    documentDispatch({
-      action: DocActions.update,
-      data: { tables: [...tables, { name, collection }] },
-    });
+    if (tables) {
+      documentDispatch({
+        action: DocActions.update,
+        data: { tables: [...tables, { name, collection }] },
+      });
+    } else {
+      db.doc("_FIRETABLE_/settings").set(
+        { tables: [{ name, collection }] },
+        { merge: true }
+      );
+    }
     //create the firetable collection doc with empty columns
     db.collection(collection)
       .doc("_FIRETABLE_")