Resizable columns

CHANGELOG.md

@@ -2,6 +2,12 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 0.5.3
+### Added
+- A `resizable` property on the `DataTable` component. If `True`, then the columns
+can be resized by clicking and dragging on the border on the edge of the column
+header. If `False`, they cannot be resized. By default, columns are resizable.
+
 ## 0.5.2
 ### Added
 - A `column_widths` property can be used to set the column widths of the

dash_table_experiments/metadata.json

@@ -148,7 +148,7 @@
           "name": "bool"
         },
         "required": false,
-        "description": "",
+        "description": "Are the cells in the table editable?\nIf `True`, you can listen to `rows` or `row_update` to\nget the updated data.",
         "defaultValue": {
           "value": "true",
           "computed": false
@@ -159,7 +159,7 @@
           "name": "bool"
         },
         "required": false,
-        "description": "",
+        "description": "Should the filtering UI in the Table appear?\nIf `True`, you can listen to `rows` or `row_update` to\nget the updated data.",
         "defaultValue": {
           "value": "false",
           "computed": false
@@ -170,7 +170,18 @@
           "name": "bool"
         },
         "required": false,
-        "description": "",
+        "description": "Is the table sortable? If `True`, click on the column headers\nto sort by that column.\nIf `True`, you can listen to `rows` or `row_update` to\nget the updated data.",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
+      "resizable": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "Are the columns resizble?\nIf `True`, then the columns can be resized by clicking and\ndragging on the border on the edge of the column\nheader. If `False`, they cannot be resized.",
         "defaultValue": {
           "value": "true",
           "computed": false
@@ -184,7 +195,7 @@
           }
         },
         "required": false,
-        "description": ""
+        "description": "Column widths (in pixels) of each column"
       },
       "columns": {
         "type": {

dash_table_experiments/version.py

@@ -1 +1 @@
-__version__ = '0.5.2'
+__version__ = '0.5.3'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table-experiments",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Dash table experiments",
   "main": "lib/index.js",
   "repository": {

src/components/DataTable.react.js

@@ -87,6 +87,7 @@ class DataTable extends Component {
             name: c,
             editable: Boolean(props.editable),
             sortable: Boolean(props.sortable),
+            resizable: Boolean(props.resizable),
             filterable: Boolean(props.filterable)
         }));
         if (props.column_widths) {
@@ -324,9 +325,40 @@ class DataTable extends Component {
 DataTable.propTypes = {
     // These props are "custom" - defined by me.
     id: PropTypes.string,
+
+    /**
+     * Are the cells in the table editable?
+     * If `True`, you can listen to `rows` or `row_update` to
+     * get the updated data.
+     */
     editable: PropTypes.bool,
+
+    /**
+     * Should the filtering UI in the Table appear?
+     * If `True`, you can listen to `rows` or `row_update` to
+     * get the updated data.
+     */
     filterable: PropTypes.bool,
+
+    /**
+     * Is the table sortable? If `True`, click on the column headers
+     * to sort by that column.
+     * If `True`, you can listen to `rows` or `row_update` to
+     * get the updated data.
+     */
     sortable: PropTypes.bool,
+
+    /**
+     * Are the columns resizble?
+     * If `True`, then the columns can be resized by clicking and
+     * dragging on the border on the edge of the column
+     * header. If `False`, they cannot be resized.
+     */
+    resizable: PropTypes.bool,
+
+    /**
+     * Column widths (in pixels) of each column
+     */
     column_widths: PropTypes.arrayOf(PropTypes.number),
 
     /**
@@ -374,6 +406,7 @@ DataTable.defaultProps = {
     editable: true,
     filterable: false,
     sortable: true,
+    resizable: true,
     filters: {},
     selected_row_indices: [],
     row_selectable: false