From 1be889365e8f84e5a73b785de2ef8385500c3848 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Sun, 24 May 2020 14:42:30 +0200
Subject: [PATCH] fix for table widget: table now scrollable #101

---
 src/styles/widgets.css      | 8 +++++++-
 src/widget/widgets/table.js | 3 ++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/styles/widgets.css b/src/styles/widgets.css
index 3d3455d..4e367a3 100644
--- a/src/styles/widgets.css
+++ b/src/styles/widgets.css
@@ -415,7 +415,13 @@ div[class*="-widget"] label {
     background-color: #fff;
 }
 
-.table-widget td, .table-widget th {
+.table-widget th {
+    position: sticky; 
+    top: 0;
+    text-align: left;
+}
+
+.table-widget td{
     text-align: left;
 }
 
diff --git a/src/widget/widgets/table.js b/src/widget/widgets/table.js
index a7ef37b..54383a8 100644
--- a/src/widget/widgets/table.js
+++ b/src/widget/widgets/table.js
@@ -94,6 +94,7 @@ class WidgetTable extends Component {
   render() {
     
     let rows = this.state.rows;
+
     if(rows.length === 0){
       rows.push({
         name: "no entries"
@@ -109,7 +110,7 @@ class WidgetTable extends Component {
       columns.push(<TableColumn key={3} title="Unit" dataKey="unit" />)
 
     return (
-      <div className="table-widget">
+      <div className="table-widget" style={{width: this.props.widget.width, height: this.props.widget.height, overflowY: 'auto'}}>
         <Table data={rows}>
           { columns }
         </Table>