Updated datable api (#92)

pynecone/components/datadisplay/datatable.py

@@ -19,9 +19,6 @@ class DataTable(Gridjs):
 
     tag = "Grid"
 
-    # The dataframe to use.
-    df: Var[Any]
-
     # The data to display. EIther a list of lists or a pandas dataframe.
     data: Any
 
@@ -40,6 +37,32 @@ class DataTable(Gridjs):
     # Enable pagination.
     pagination: Var[bool]
 
+    @classmethod
+    def create(cls, *children, **props):
+        """Create a datable component.
+
+        Args:
+            *children: The children of the component.
+            **props: The props to pass to the component.
+
+        Returns:
+            The datable component.
+
+        Raises:
+            ValueError: If a pandas dataframe is passed in and columns are also provided.
+        """
+        # If data is a pandas dataframe and columns are provided throw an error.
+        if utils.is_dataframe(type(props.get("data"))) and props.get("columns"):
+            raise ValueError(
+                "Cannot pass in both a pandas dataframe and columns to the data_table component."
+            )
+
+        # Create the component.
+        return super().create(
+            *children,
+            **props,
+        )
+
     def _get_imports(self) -> ImportDict:
         return utils.merge_imports(
             super()._get_imports(), {"": {"gridjs/dist/theme/mermaid.css"}}
@@ -47,11 +70,8 @@ class DataTable(Gridjs):
 
     def _render(self) -> Tag:
         if utils.is_dataframe(type(self.data)):
+            # If given a pandas df break up the data and columns
             self.columns = Var.create(list(self.data.columns.values.tolist()))  # type: ignore
             self.data = Var.create(list(self.data.values.tolist()))  # type: ignore
 
-        if isinstance(self.df, Var):
-            self.columns = self.df["columns"]
-            self.data = self.df["data"]
-
         return super()._render()