improve table with pagination

setup.py

@@ -2,7 +2,7 @@
 
 setuptools.setup(
     name="streamfy",
-    version="0.2.7",
+    version="0.2.8",
     author="",
     author_email="",
     description="",

streamfy/__init__.py

@@ -16,6 +16,24 @@
     _component_func = components.declare_component(
         "streamfy", path=build_dir)
 
+defaults = {
+    "table": {
+        "per-page": 5,
+        "pagination-rounded": True,
+        "pagination-size": "is-small",
+        "sort-icon": "arrow-up",
+        "sort-icon-size": "is-small",
+        "default-sort-direction": "asc",
+        "paginated": True,
+    }
+}
+
+def defaults_apply(component, hyphened):
+    if not component in defaults:
+        return
+    for key, value in defaults[component].items():
+        hyphened.setdefault(key, value)
+
 def hyphen_case(string):
     string = string.replace('_', '-')
     return string
@@ -135,6 +153,9 @@ def steps(**kwargs):
 
 def table(**kwargs):
     hyphened = hyphen_case_keys(kwargs)
+    defaults_apply("table", hyphened)
+    if not "columns" in hyphened:
+        hyphened["columns"] = [{"field": key} for key in data[0].keys()]
     component_value = _component_func(component="table", **hyphened)
     return component_value
 
@@ -251,20 +272,33 @@ def table(**kwargs):
     st.write(step)
 
     st.subheader("Table")
-    columns = [
+    data = [
+        { 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016/10/15 13:43:27', 'gender': 'Male' },
+        { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016/12/15 06:00:53', 'gender': 'Male' },
+        { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016/04/26 06:26:28', 'gender': 'Female' },
+        { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016/04/10 10:28:46', 'gender': 'Male' },
+        { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016/12/06 14:38:38', 'gender': 'Female' }
+    ]
+
+    for i in range(0, 10):
+        data.append(data[i])
+
+    footer = [
         {
-            "field": 'id',
-            "label": 'ID',
-            "width": '40',
-            "numeric": True
+            "text": "Totals",
         },
         {
-            "field": 'name',
-            "label": 'Name',
+            "text": "",
+        },
+        {
+            "text": "",
+        },
+        {
+            "text": "2000-2010",
+        },
+        {
+            "text": "Gender",
         },
     ]
-    data = [
-        { 'id': 1, 'name': 'Jesse' },
-        { 'id': 2, 'first_name': 'John' },
-    ]
-    table(data=data, columns=columns, paginated=True)
+
+    table(data=data, footer=footer)

streamfy/frontend/src/Streamfy.vue

@@ -199,15 +199,36 @@
           clickable
           v-bind="step"
         >
-          {{step.text}}
+          {{ step.text }}
         </b-step-item>
       </b-steps>
 
       <b-table
         v-else-if="args.component == 'table'"
-        v-bind="args"
+        v-bind="filterKeys(args, ['columns'])"
         :mobile-cards="args['has_mobile_cards'] != undefined ? args['has_mobile_cards'] : false"
       >
+        <b-table-column
+          v-for="(column, i) in args.columns" :key="i"
+          v-slot="props"
+          sortable
+          :label="column.field"
+          v-bind="column"
+        >
+          <span v-bind="column">
+          {{ props.row[column.field] }}
+          </span>
+        </b-table-column>
+
+        <template #footer v-if="args.footer">
+          <th
+            v-for="(footer, i) in args.footer" :key="i"
+          >
+            <div class="th-wrap" v-bind="footer">
+              {{ footer.text }}
+            </div>
+          </th>
+        </template>
       </b-table>
     </b-field>
   </span>
@@ -277,6 +298,15 @@ export default {
             .indexOf(text.toLowerCase()) >= 0
         })
     },
+    filterKeys(args, keysToExclude) {
+      const filteredDict = {};
+      Object.keys(args).forEach((key) => {
+        if (!keysToExclude.includes(key)) {
+          filteredDict[key] = args[key];
+        }
+      });
+      return filteredDict;
+    },
   },
   watch: {
     result: {