Release v0.1.5

.gitignore

@@ -1,6 +1,7 @@
 **/node_modules
 
 # Distribution / packaging
+st_excel_table/frontend/build/
 .Python
 build/
 develop-eggs/

README.md

@@ -1,6 +1,8 @@
 # Streamlit-Excel-Table
 
-react-awesome-table is a great table like Microsoft Excel for web frontend. More information in [Kazunori-Kimura/react-awesome-table](https://github.com/Kazunori-Kimura/react-awesome-table) (Thanks!)
+This Streamlit component is a wrapper component of [@tk42/react-awesome-table](https://github.com/tk42/react-awesome-table).
+
+```react-awesome-table``` is a great table module like Microsoft Excel for web frontend. More information in [Kazunori-Kimura/react-awesome-table](https://github.com/Kazunori-Kimura/react-awesome-table) (Thanks!)
 
 ## Install
 ```
@@ -30,9 +32,7 @@ columns = [
     {"name": "color"},
 ]
 
-options = {"sortable": False, "filterable": False}
-
-Table(data=data, columns=columns, options=options)
+Table(data, columns)
 ```
 
 ![sample](./sample.png)

setup.py

@@ -5,7 +5,7 @@
 
 setuptools.setup(
     name="streamlit-excel-table",
-    version="0.1.4",
+    version="0.1.5",
     author="tk42",
     author_email="nsplat+pip@gmail.com",
     description="Streamlit component implementation of react-awesome-table",

st_excel_table/__init__.py

@@ -47,8 +47,10 @@
 def Table(
     data: List[Dict],
     columns: List[Dict],
-    options: Dict = {"sortable": False, "filterable": False},
     key: str | None = None,
+    sortable: bool = False,
+    filterable: bool = False,
+    **kwargs
 ) -> None:
     """Create a new instance of "Table".
 
@@ -62,21 +64,24 @@ def Table(
         Column data
         [{"name": "id"}, {"name": "x"}, {"name": "y"}, {"name": "color"}]
 
-    options: Dict
-        [Optional] sortable / filterable settings
-
     Returns
     -------
     None
 
     """
+    options = {"sortable": False, "filterable": False}
+    if sortable:
+        options["sortable"] = True
+    if filterable:
+        options["filterable"] = True
+
     # Call through to our private component function. Arguments we pass here
     # will be sent to the frontend, where they'll be available in an "args"
     # dictionary.
     #
     # "default" is a special argument that specifies the initial return
     # value of the component before the user has interacted with it.
-    component_value = _component_func(data=data, columns=columns, options=options, key=key)
+    component_value = _component_func(data=data, columns=columns, key=key, options=options, **kwargs)
 
     # We could modify the value returned from the component if we wanted.
     # There's no need to do this in our simple example - but it's an option.
@@ -105,4 +110,4 @@ def Table(
         {"name": "color"},
     ]
 
-    Table(data, columns, options={"sortable": False, "filterable": False})
+    Table(data, columns)

st_excel_table/frontend/build/asset-manifest.json

@@ -1,19 +1,19 @@
 {
   "files": {
-    "main.js": "./static/js/main.802c9602.chunk.js",
-    "main.js.map": "./static/js/main.802c9602.chunk.js.map",
+    "main.js": "./static/js/main.088f05f6.chunk.js",
+    "main.js.map": "./static/js/main.088f05f6.chunk.js.map",
     "runtime-main.js": "./static/js/runtime-main.4eedf725.js",
     "runtime-main.js.map": "./static/js/runtime-main.4eedf725.js.map",
     "static/js/2.0b501eff.chunk.js": "./static/js/2.0b501eff.chunk.js",
     "static/js/2.0b501eff.chunk.js.map": "./static/js/2.0b501eff.chunk.js.map",
     "index.html": "./index.html",
-    "precache-manifest.fe081778013a501bd23b99445136b4a2.js": "./precache-manifest.fe081778013a501bd23b99445136b4a2.js",
+    "precache-manifest.c6a0683e369a9c31057ae83c484c9b57.js": "./precache-manifest.c6a0683e369a9c31057ae83c484c9b57.js",
     "service-worker.js": "./service-worker.js",
     "static/js/2.0b501eff.chunk.js.LICENSE.txt": "./static/js/2.0b501eff.chunk.js.LICENSE.txt"
   },
   "entrypoints": [
     "static/js/runtime-main.4eedf725.js",
     "static/js/2.0b501eff.chunk.js",
-    "static/js/main.802c9602.chunk.js"
+    "static/js/main.088f05f6.chunk.js"
   ]
 }

st_excel_table/frontend/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><title>Streamlit Component</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Streamlit Component"/><link rel="stylesheet" href="bootstrap.min.css"/></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,u,a=t[0],i=t[1],f=t[2],p=0,s=[];p<a.length;p++)u=a[p],Object.prototype.hasOwnProperty.call(o,u)&&o[u]&&s.push(o[u][0]),o[u]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(c&&c(t);s.length;)s.shift()();return l.push.apply(l,f||[]),r()}function r(){for(var e,t=0;t<l.length;t++){for(var r=l[t],n=!0,a=1;a<r.length;a++){var i=r[a];0!==o[i]&&(n=!1)}n&&(l.splice(t--,1),e=u(u.s=r[0]))}return e}var n={},o={1:0},l=[];function u(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,u),r.l=!0,r.exports}u.m=e,u.c=n,u.d=function(e,t,r){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,t){if(1&t&&(e=u(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(u.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)u.d(r,n,function(t){return e[t]}.bind(null,n));return r},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="./";var a=this["webpackJsonpstreamlit-excel-table"]=this["webpackJsonpstreamlit-excel-table"]||[],i=a.push.bind(a);a.push=t,a=a.slice();for(var f=0;f<a.length;f++)t(a[f]);var c=i;r()}([])</script><script src="./static/js/2.0b501eff.chunk.js"></script><script src="./static/js/main.802c9602.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><title>Streamlit Component</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Streamlit Component"/><link rel="stylesheet" href="bootstrap.min.css"/></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,u,a=t[0],i=t[1],f=t[2],p=0,s=[];p<a.length;p++)u=a[p],Object.prototype.hasOwnProperty.call(o,u)&&o[u]&&s.push(o[u][0]),o[u]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(c&&c(t);s.length;)s.shift()();return l.push.apply(l,f||[]),r()}function r(){for(var e,t=0;t<l.length;t++){for(var r=l[t],n=!0,a=1;a<r.length;a++){var i=r[a];0!==o[i]&&(n=!1)}n&&(l.splice(t--,1),e=u(u.s=r[0]))}return e}var n={},o={1:0},l=[];function u(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,u),r.l=!0,r.exports}u.m=e,u.c=n,u.d=function(e,t,r){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,t){if(1&t&&(e=u(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(u.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)u.d(r,n,function(t){return e[t]}.bind(null,n));return r},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="./";var a=this["webpackJsonpstreamlit-excel-table"]=this["webpackJsonpstreamlit-excel-table"]||[],i=a.push.bind(a);a.push=t,a=a.slice();for(var f=0;f<a.length;f++)t(a[f]);var c=i;r()}([])</script><script src="./static/js/2.0b501eff.chunk.js"></script><script src="./static/js/main.088f05f6.chunk.js"></script></body></html>

st_excel_table/frontend/build/service-worker.js

@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "./precache-manifest.fe081778013a501bd23b99445136b4a2.js"
+  "./precache-manifest.c6a0683e369a9c31057ae83c484c9b57.js"
 );
 
 self.addEventListener('message', (event) => {

st_excel_table/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "streamlit-excel-table",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.12.4",

st_excel_table/frontend/src/ReactAwesomeTable.tsx

@@ -22,7 +22,13 @@ const ReactAwesomeTable: React.FC = () => {
             columns={args.columns}
             getRowKey={getRowKey}
             onChange={handleChange}
-            options={args.options}
+            options={args.options ?? { "sortable": false, "filterable": false }}
+            rowsPerPage={args.rowsPerPage ?? 10}
+            rowsPerPageOptions={args.rowsPerPageOptions ?? [10, 30, 100]}
+            readOnly={args.readOnly ?? false}
+            sticky={args.sticky ?? false}
+            rowNumber={args.rowNumber ?? false}
+            disableUndo={args.disableUndo ?? false}
         />
     )
 };

st_excel_table/frontend/src/index.tsx

@@ -1,15 +1,13 @@
 import React from "react"
 import ReactDOM from "react-dom"
 import ReactAwesomeTable from "./ReactAwesomeTable"
-// import EmptyRow from './empty'
 import { StreamlitProvider } from "streamlit-component-lib-react-hooks"
 
 
 ReactDOM.render(
     <React.StrictMode>
         <StreamlitProvider>
-            < ReactAwesomeTable />
-            {/* <EmptyRow /> */}
+            <ReactAwesomeTable />
         </StreamlitProvider>
     </React.StrictMode>
     , document.getElementById("root"))