more docs

docs-wip/_sidebar.md

@@ -1,5 +1,15 @@
-* [Getting Started](/)
+* [Frappe DataTable](/)
+* [Getting Started](/getting-started.md)
 * [Download](download.md)
 * [Configuration](configuration.md)
 * [Events](events.md)
+API
+- * [DataTable](api/datatable.md)
+- * [Datamanager](api/datamanager.md)
 
+* Getting started
+
+  * [Getting Started](getting-started.md)
+  * [Writing more pages](more-pages.md)
+  * [Custom navbar](custom-navbar.md)
+  * [Cover page](cover.md)

docs-wip/api/datamanager.md

@@ -0,0 +1,22 @@
+## DataManager
+
+All the methods listed here are available on the `datatable.datamanager` property.
+
+Example
+```javascript
+const datatable = new DataTable(container, options);
+datatable.datamanager.getRows();
+```
+
+#### sortRows
+
+Sorts rows according the values in the column identified by `colIndex` and order `sortOrder`.
+
+```javascript
+sortRows(colIndex: Number, sortOrder: 'asc | desc | none'): void
+
+// Usage
+datatable.datamanager.sortRows(data, columns);
+```
+
+---

docs-wip/api/datatable.md

@@ -0,0 +1,125 @@
+## Datatable
+
+All the methods listed here are available on the `datatable` instance created using the `DataTable` constructor.
+
+Example
+```javascript
+const datatable = new DataTable(container, options);
+datatable.refresh(data);
+```
+
+#### refresh
+
+Refreshes the datatable with new `data` and `column`
+
+```javascript
+refresh(data: Array, columns: Array): void
+
+// Usage
+datatable.refresh(data, columns);
+```
+
+---
+
+#### setDimensions
+
+Refreshes the datatable layout.
+
+```javascript
+setDimensions(): void
+
+// Usage
+datatable.setDimensions();
+```
+
+---
+
+#### appendRows
+
+Append new rows to the datatable
+
+```javascript
+appendRows(rows: Array): void
+
+// Usage
+datatable.appendRows(rows);
+```
+
+---
+
+#### showToastMessage
+
+Show a toast message at the bottom center of the datatable. You can hide the message by providing `hideAfter` value which is in seconds.
+
+```javascript
+showToastMessage(message: String, hideAfter: Number): void
+
+// Usage
+datatable.showToastMessage('Hey', 2);
+```
+
+---
+
+#### clearToastMessage
+
+Clear any toast message in the datatable.
+
+```javascript
+clearToastMessage(): void
+
+// Usage
+datatable.clearToastMessage();
+```
+
+---
+
+#### getColumns
+
+Get all the columns
+
+```javascript
+getColumns(): Array
+
+// Usage
+datatable.getColumns();
+```
+
+---
+
+#### getRows
+
+Get all the rows
+
+```javascript
+getRows(): Array
+
+// Usage
+datatable.getRows();
+```
+
+---
+
+#### freeze
+
+Show an overlay on the datatable which displays the `freezeMessage` value provided in `options`. You cannot interact with the datatable when it is frozen.
+
+```javascript
+freeze(): void
+
+// Usage
+datatable.freeze();
+```
+
+---
+
+#### unfreeze
+
+Remove the freeze overlay.
+
+```javascript
+unfreeze(): void
+
+// Usage
+datatable.unfreeze();
+```
+

docs-wip/configuration.md

@@ -1,8 +1,8 @@
-## Configuration
+# Configuration
 
 Frappe DataTable has a lot of customizable features, this section is dedicated to enabling / disabling existing functionality.
 
-### Container
+## Container
 
 The first parameter required by the `DataTable` constructor is the container element. You can pass in a CSS Selector or a DOM Object.
 
@@ -13,7 +13,7 @@ const container = document.querySelector('#datatable');
 const datatable = new DataTable(container, options);
 ```
 
-### Options
+## Options
 
 The second parameter required by the `DataTable` constructor is the options object. The minimum required configuration is to pass `column` and `data` values.
 
@@ -31,7 +31,7 @@ const datatable = new DataTable(container, options);
 
 The following options are configurable:
 
-#### getEditor
+### getEditor
  - Type: `Function`
  - Default: `null`
 
@@ -39,7 +39,7 @@ Customize the editor behaviour.
 
 ---
 
-#### serialNoColumn
+### serialNoColumn
  - Type: `Boolean`
  - Default: `true`
 
@@ -47,7 +47,7 @@ Whether to show serial number as the first column in datatable.
 
 ---
 
-#### checkboxColumn
+### checkboxColumn
  - Type: `Boolean`
  - Default: `false`
 
@@ -55,7 +55,7 @@ Whether to show checkbox column in the datatable.
 
 ---
 
-#### clusterize
+### clusterize
  - Type: `Boolean`
  - Default: `true`
 
@@ -65,28 +65,28 @@ Whether to use clusterize to render the data.
 
 ---
 
-#### layout
+### layout
  - Type: `String`
  - Default: `fixed`
  - Options: `fixed | fluid | ratio`
 
 This option controls how width of each `column` is calculated in the DataTable.
 
-##### fixed
+#### fixed
 
 The column width is calculated based on the content of the first row of the table. This layout can result in horizontal scroll.
 
-##### fluid
+#### fluid
 
 The column width is adjusted based on the width of container. So the columns will be resized if the window is resized. This layout won't result in horizontal scroll. You will always see all the columns.
 
-##### ratio
+#### ratio
 
 This layout works similar to the `flex` property in CSS. When column A has `width` set as `1` and column B as `2`, then column B's width  will be twice as much as column A.
 
 ---
 
-#### noDataMessage
+### noDataMessage
  - Type: `String`
  - Default: `No Data`
 
@@ -94,7 +94,7 @@ The message shown when there are no rows to show in the DataTable.
 
 ---
 
-#### dynamicRowHeight
+### dynamicRowHeight
  - Type: `Boolean`
  - Default: `false`
 
@@ -102,7 +102,7 @@ The height of the row will be set according to the content of the cell with the
 
 ---
 
-#### cellHeight
+### cellHeight
  - Type: `Number`
  - Default: `null`
 
@@ -112,7 +112,7 @@ Set the height of each cell explicitly.
 
 ---
 
-#### inlineFilters
+### inlineFilters
  - Type: `Boolean`
  - Default: `false`
 
@@ -120,7 +120,7 @@ Whether to enable the inline filter feature. If the value is `true`, then you ca
 
 ---
 
-#### treeView
+### treeView
  - Type: `Boolean`
  - Default: `false`
 
@@ -166,7 +166,7 @@ const datatable = new DataTable('#datatable', {
 
 ---
 
-#### checkedRowStatus
+### checkedRowStatus
  - Type: `Boolean`
  - Default: `true`
 
@@ -174,7 +174,7 @@ Whether to show the number of rows checked in a toast message.
 
 ---
 
-#### pasteFromClipboard
+### pasteFromClipboard
  - _Experimental_
  - Type: `Boolean`
  - Default: `false`
@@ -183,7 +183,7 @@ Whether to allow the user to paste copied content into selected cell(s).
 
 ---
 
-#### dropdownButton
+### dropdownButton
  - Type: `String`
  - Default: `▼`
 
@@ -198,7 +198,7 @@ Example
 
 ```
 
-#### headerDropdown
+### headerDropdown
  - Type: `Array`
 
 When you hover over any column, you see the dropdown button which is used to perform certain actions for that column.
@@ -216,7 +216,7 @@ options = {
 }
 ```
 
-#### events
+### events
  - Type: `Object`
 
  The events options is described in detailed in the [next section](events.md).

docs-wip/getting-started.md

@@ -1,9 +1,9 @@
-# Frappe Datatable
+# Getting Started
-
-## Getting Started
 
 The easiest way to get started with Frappe DataTable is using this [JSFiddle Demo](https://jsfiddle.net/f4qe6phc/7/). Or you can copy the following template into a new index.html file.
 
+## Example
+
 ```html
 <!-- include styles -->
 <link href="https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.css">

docs-wip/index.html

@@ -7,6 +7,9 @@
   <meta name="description" content="A modern datatable library for the web">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
+  <link rel="stylesheet" href="//unpkg.com/docsify/themes/pure.css">
+  <!-- <link rel="stylesheet" href="assets/css/docsify.css"> -->
+  <!-- <link rel="stylesheet" href="assets/css/frappe-datatable.css"> -->
 </head>
 <body>
   <div id="app"></div>
@@ -15,12 +18,20 @@
       repo: 'https://github.com/frappe/datatable',
       themeColor: '#58b81d',
       loadSidebar: true,
-      loadNavbar: true,
       auto2top: true,
-      maxSubLevel: 3
+      homepage: 'getting-started.md',
+      executeScript: true,
+      maxLevel: 4,
+      subMaxLevel: 2,
     }
   </script>
   <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
   <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
+  <script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
+  <script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
+  <script src="assets/js/clusterize.min.js"></script>
+  <script src="assets/js/Sortable.min.js"></script>
+  <script src="assets/js/frappe-datatable.js"></script>
+  <script src="assets/js/index.js"></script>
 </body>
 </html>