add support for tables

hal9ai · Mar 3, 2024 · 7cfd4ca · 7cfd4ca
1 parent 972dcb1
commit 7cfd4ca
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/setup.py b/setup.py
@@ -2,7 +2,7 @@
 
 setuptools.setup(
     name="streamfy",
-    version="0.1.3",
+    version="0.1.4",
     author="",
     author_email="",
     description="",

diff --git a/streamfy/__init__.py b/streamfy/__init__.py
@@ -16,12 +16,33 @@
     _component_func = components.declare_component(
         "streamfy", path=build_dir)
 
-def taginput(data=[], placeholder="", key=None):
-    component_value = _component_func(data=data, placeholder=placeholder, key=key)
+def taginput(data=[], placeholder="", label="", key=None):
+    component_value = _component_func(component="taginput", label=label, data=data, placeholder=placeholder, key=key)
+    return component_value
+
+def table(data=[], columns=[], label="", key=None):
+    component_value = _component_func(component="table", label=label, data=data, columns=columns)
     return component_value
 
 if not _RELEASE:
-    st.subheader("Start")
+    st.subheader("Tags")
     tags = taginput(data = ["A", "B", "C"], placeholder = "Choose letter")
     st.write(tags)
-    st.subheader("End")
+    st.subheader("Table")
+    columns = [
+        {
+            "field": 'id',
+            "label": 'ID',
+            "width": '40',
+            "numeric": True
+        },
+        {
+            "field": 'name',
+            "label": 'Name',
+        },
+    ]
+    data = [
+        { 'id': 1, 'name': 'Jesse' },
+        { 'id': 2, 'first_name': 'John' },
+    ]
+    table(data = data, columns = columns)
diff --git a/streamfy/frontend/src/Streamfy.vue b/streamfy/frontend/src/Streamfy.vue
@@ -1,19 +1,24 @@
 <template>
   <span>
-    <b-field label="Add some tags">
+    <b-field ref="tagField" :label="label">
       <b-taginput
-        ref="tagRef"
+        v-if="args.component == 'taginput'"
         v-model="tags"
-        :data="data"
+        :data="args.data"
         autocomplete
         :allow-new="true"
         :open-on-focus="true"
         type="is-info"
-        placeholder="Contains what?"
+        :placeholder="args.placeholder"
         aria-close-label="Remove"
         @focus="focused"
         @blur="blured">
       </b-taginput>
+      <b-table
+        v-else-if="args.component == 'table'"
+        :data="args.data"
+        :columns="args.columns">
+      </b-table>
     </b-field>
   </span>
 </template>
@@ -29,36 +34,35 @@ export default {
   data() {
     return {
       tags: [],
-      focusOpen: false,
-      data: this.args.data ?? [],
-      placeholder: this.args.placeholder ?? '',
+      jdata: undefined,
     }
   },
   methods: {
     focused() {
-      if (this.tagRef) {
-        const menu = this.tagRef.$el.querySelector('.dropdown-menu');
+      if (this.tagField) {
+        const menu = this.tagField.$el.querySelector('.dropdown-menu');
         menu.style.bottom = 'auto';
       }
 
       Streamlit.setFrameHeight(300);
+      setTimeout(() => Streamlit.setFrameHeight(), 200);
     },
     blured() {
-      setTimeout(() => Streamlit.setFrameHeight(80), 200);
+      setTimeout(() => Streamlit.setFrameHeight(), 200);
     }
   },
   watch: {
     tags() {
       Streamlit.setComponentValue([...this.tags]);
-    }
+    },
   },
   setup() {
-    useStreamlit() // lifecycle hooks for automatic Streamlit resize
+    useStreamlit()
 
-    const tagRef = ref(null);
+    const tagField = ref(null);
 
     return {
-      tagRef,
+      tagField,
     }
   },
 }